TYPE DESIGN INFORMATION PAGE last updated on Wed Oct 1 12:47:32 EDT 2014

SEARCH THIS SITE:
IMAGE SEARCH:


Fonts and HTML



[Headline set in Azo Sans Uber (2013, Rui Abreu)]

Luc Devroye
McGill University
Montreal, Canada
lucdevroye@gmail.com
http://luc.devroye.org
Up to main font page
Up to main font index page



SWITCH TO INDEX FILE


101 vs lol

Great page about the importance of distinguishing between 0 and O and l and 1, especially in programming fonts. For a similar page, see 1 over n, where one can find overprinted alphabets such as for Apple Menlo, Droid Sans Mono and DejaVu Sans Mono, which are all based on Bitstream Vera Sans Mono. [Google] [More]  ⦿

Alertbox

Jakob Nielsen's great writings on the good and bad in web pages. [Google] [More]  ⦿

Andrew Daviel
[Linux Web Fonts]

[More]  ⦿

Andy Hume
[The anatomy of web fonts]

[More]  ⦿

Antonio Carusone
[The Grid System]

[More]  ⦿

Apache FOP: Fonts

Technical font page for Apache FOP systems: Apache FOP (Formatting Objects Processor) is a print formatter driven by XSL formatting objects (XSL-FO) and an output independent formatter. It is a Java application that reads a formatting object (FO) tree and renders the resulting pages to a specified output. Output formats currently supported include PDF, PS, PCL, AFP, XML (area tree representation), Print, AWT and PNG, and to a lesser extent, RTF and TXT. The primary output> [Google] [More]  ⦿

Apple: Fonts in HTML

Choosing fonts in HTML: pages by Apple. [Google] [More]  ⦿

Batik SVG Toolkit

The Batik SVG Toolkit is a Java-based toolkit for applications or applets that want to use images in the Scalable Vector Graphics (SVG) format for various purposes, such as display, generation or manipulation. The project's ambition is to give developers a set of core modules that can be used together or individually to support specific SVG solutions. Examples of modules are the SVG Parser, the SVG Generator and the SVG DOM. It includes an SVG Font Converter, called TrueType Font to SVG (ttf2svg): The TrueType Font converter application helps to embed font definitions in SVG files. Typically, one can just include a minimal subset of needed characters. [Google] [More]  ⦿

Ben Blish

Ben Blish compares PDF with HTML:" ... You could just use HTML in the first place. PDF is primarily a scam, a huge, overweight format that offers very little in return for it's proprietary nature. If you can't prepare a good document in HTML, use a higher level tool to do it for you. Or learn how, which is smarter, anyway. HTML is the language of the web. PDF is not. HTML is a fabulous, compatible, live loading streaming format. PDF is not. HTML is a flexible, live medium that encourages quality document authoring in many styles (including print styles) while PDF is a static, inflexible medium that encourages "print-like" authoring only. HTML is accessable to any machine, old or new. Anything on the net. PDF is accessible only to machines that have ports of these representations, and that's just a few platforms. PDF locks you to Adobe (like GIF locks you to Unisys.) HTML frees you to use any compatible mechanism from a text browser to the most complex, newest, dingleberry-enhanced browser (like Opera!) When ego drives you to require a printed document (or a net document!) that "must match exactly" what you see on your screen, all you're doing is demonstrating that you're anal retentive. And that you could care less, or have not considered in any depth, the needs of the readers. Yes, readers have vastly different needs. Some *need* large print, some prefer small. Size is totally relative - what looked good to the author on a 15 inch monitor running 800x600 looks like ant tracks on a 21 inch in 1600x1200. Some like wide columns, some like (or need!) narrow. TO limit the reader to the composer's vision of a document is egotistical, shortsighted and in some cases, even cruel. We're beginning to even see this foolhardy approach on web pages with advent of style sheets; pages where the font can't be enlarged and the page does not follow the browser size... imagine the dismap of the visually impaired as they can't read what's on the screen because some joker locked the font into a tiny representation. If you're good at authoring documents, you'll write them so that they display well in any browser, and print in a rational fashion from those browsers, barring actual browser printing problems you can't get around (the same thing applies to PDF... no special dispensation required!) You'll test your documents at all font sizes to make sure that they continue to format well, and you'll make sure your images don't stomp on your text because you didn't clear the margins. But what you WON'T do... is use PDF. And... almost all of that applies to postscript as well." [Google] [More]  ⦿

Bert Bos

Bert Bos studied Mathematics in Groningen (1982-1987), and wrote a thesis about Graphic User Interfaces (1987-1993). He worked on an Internet browser and the surrounding infrastructure for the Faculty of Arts in Groningen and is now working for The World Wide Web Consortium on style sheets and math. He lives in Sophia Antipolis near Nice in France.

Author of Cascading Style Sheets---designing for the Web (3rd ed.) (2005, Hakon Wium Lie & Bert Bos).

He also created a free transitional family in metafont and opentype for use with TeX, Gladiator and Gladiator Sans (1991).

Klingspor link. [Google] [More]  ⦿

Bessere Typographie

Tips by Jeff Carlson on web typography. German translation. [Google] [More]  ⦿

Better CSS Font Stacks
[Nathan Ford]

Nathan Ford (Plano, TX) discusses various font stacks that can be used in CSS. [Google] [More]  ⦿

Better Font Stacks
[Ryoichi Tsunekawa]

A comparison between various font stacks used in web pages. [Google] [More]  ⦿

BeyondPress

Commercial product for HTML creation. The manual has a lot of web font tips. [Google] [More]  ⦿

Browsers and fonts

Alan J. Flavell (Glasgow University) discusses the interface between fonts and browsers. A list of Unicode-compliant fonts is given. There is also information on monospaced fonts. Regarding Webdings, he explains that the font is not Unicode-compliant and thus is inappropriate for web use, as HTML looks for unicode mappings. In other words, the name Webdings is inappropriate. [Google] [More]  ⦿

CAP Online

Essay: The Best Choices for Web Fonts. By Jack Yan and Associates. [Google] [More]  ⦿

Cascading style sheets

The cascading style sheets info page on fonts translated into Japanese by Kazuteru Okahashi. [Google] [More]  ⦿

Cascading Style Sheets

Help with CSS. [Google] [More]  ⦿

Cascading style sheets

[More]  ⦿

Cascading style sheets: fonts

On the use and specs for fonts in HTML's Cascading Style Sheets (CSS). Another entry point. Aussie mirror. USA mirror. Sri Lanka mirror. Another Aussie mirror. French mirror. Japanese translation by Kazuteru Okahashi. Another German mirror. [Google] [More]  ⦿

Charles A. Upsdell's font comparisons

Charles Upsdell compares the main Windows, Mac and UNIX fonts that ship with the systems. There is information on which fonts to pick for web pages. Another URL. [Google] [More]  ⦿

Chengyin Liu
[Whatfont Bookmarklet]

[More]  ⦿

ChocoboNet's Web Page Counter

Archive of web page counter fonts, with designs by Andy Church, Andrew Vestal, Alyssa Gobelle, Stephen Marz, Charles Roode, Jones Acres, Hien Le, Matt Sprinkle, Scott Vergara, Scott Hammack, Alex Dolski, Brian Glick, Ike Sato, Wasan Syananondh, and about 40 others. [Google] [More]  ⦿

Chris Coyier
[Font embedding: a reality?]

[More]  ⦿

Chris Shiflett: Font Linking

Further discussion on font linking and web fonts. [Google] [More]  ⦿

Christian Metts
[Typogrify]

[More]  ⦿

Christian-Heinrich Wunderlich
[Socitype]

[More]  ⦿

Code Candies
[Nico Brünjes]

Nico Brünjes's German tutorial on @font-0face embedding. You will need a truetype or opentype font on your computer (local URL) or somewhere (global URL). The declaration in the CSS section is then as follows, assuming you'd like to give the name ConradBlack to the font file located on your computer at "/fonts/arrogance.ttf":

@font-face
{ font-family: ConradBlack;
  font-weight: normal;
  src: url(fonts/arrogance.ttf)
  format('truetype'); }
 h1 { font: normal 3em/120% ConradBlack, sans-serif;
  text-shadow: 1px 1px 1px #eee; }
[Google] [More]  ⦿

CoffeeCup Flash Website Font

A commercial Windows tool to create web pages that use your own fonts. By CoffeeCup Software from Corpus Christi, TX. It also has a medium-sized font archive. [Google] [More]  ⦿

Colour Contrast Check

Check the colour contrast of your type on certain backgrounds. [Google] [More]  ⦿

Conor Muirhead
[Icon Stacks]

[More]  ⦿

ConvertPS

Commercial product by Hake u. Said GmbH. ConvertPS 5.0 Windows translates the PostScript files and converts them into more compatible vector- and pixel-formats like, e.g., Windows Metafile (WMF) or Bitmaps (BMP). Output formats: Vector (WMF, EMF, DXF, SVG, PDF), Bitmap (BMP, TIFF, JPEG, PNG, GIF). Input formats: PS, EPS, AI, PRN. [Google] [More]  ⦿

CopyPasteCharacter
[Martin Ström]

Martin Ström's outfit. It has an on-line tool for grabbing and using special characters. [Google] [More]  ⦿

Cory Mawhorter
[Facelift Image Replacement]

[More]  ⦿

CSDN

This Chinese page compares fonts for coding and for small screens: Courier New, Andale Mono, Monaco, Profont, Monofur, Proggy, Droid Sans Mono, Deja Vu Sans Mono, Consolas and Inconsolata. [Google] [More]  ⦿

CSS Edge Home

Beautiful demos of what you can do with CSS. By Eric Meyer. [Google] [More]  ⦿

CSS Fonts

Listing of the most popular CSS fonts specified in Japanese web pages. At the top: MS P Gothic, MS UI Gothic, Osaka, Times New Roman, MS Gothic, Arial, Verdana, MS P Mincho, Courier New, Comic Sans MS, and so forth. [Google] [More]  ⦿

CSS Tips and tricks

Examples of CSS font styles for Cyrillic font choices. Latin sub-page. [Google] [More]  ⦿

CSS Tricks: Icon fonts

A style sheet example for creating useful colored variabl-size icons for web sites. [Google] [More]  ⦿

CSS Typography
[Garrett Dimon]

Garrett Dimon, a a freelance designer and developer, explains the necessity of good CSS code for larger web sites. [Google] [More]  ⦿

CSS with vertical rhythm

This page lets you test CSS options for typefaces. Examples include

 body { font-size: 12px; font-family:; }
 p { font-size: 1em; /* 12px */ line-height: 1.5em; /* 18px */ margin: 0 0 1.5em 0; }
 you-got24px { font-size: 2em; /* 24px */ line-height: 1.5em; /* 36px */ 
          margin-top: 0.75em; margin-bottom: 0em; }
 you-got22px { font-size: 1.8333em; /* 22px */ line-height: 1.6364em; /* 36px */ 
          margin-top: 0.8182em; margin-bottom: 0em; }
 you-got20px { font-size: 1.6667em; /* 20px */ line-height: 1.8em; /* 36px */ 
          margin-top: 0.9em; margin-bottom: 0em; }
 you-got18px { font-size: 1.5em; /* 18px */ line-height: 1em; /* 18px */ 
          margin-top: 1em; margin-bottom: 0em; }
 you-got16px { font-size: 1.3333em; /* 16px */ line-height: 1.125em; /* 18px */ 
          margin-top: 1.125em; margin-bottom: 0em; }
 you-got14px { font-size: 1.1667em; /* 14px */ line-height: 1.2857em; /* 18px */ 
          margin-top: 1.2857em; margin-bottom: 0em; } 
[Google] [More]  ⦿

CSS3 Techniques For Major Browsers using the Power of jQuery

Many exciting new functions and features are being thought up for CSS3: text-shadow, box-sizing, opacity, multiple backgrounds, border-radius, border-image, and so forth. CSS3 leads to greater flexibility and makes it much easier to recreate previously complex effects. Not all current browsers support CSS3, but it is however possible to create equivalent effects and serve it with the power of jQuery. This article presents 5 CSS3 techniques which can dramatically get you a stunning user interfaces and how to achieve almost the same effects using jQuery for browsers that are not compatible yet with CSS3 new features. [Google] [More]  ⦿

CSSTXT

CSSTXT is an uncomplicated web tool for generating CSS style rules for web typography. [Google] [More]  ⦿

CSSTYPE

Free on-line CSS type tester. [Google] [More]  ⦿

Cufon
[Simo Kinnunen]

Free software published in 2009 to render text in a font of one's choice. Developed by Simo Kinnunen. From the announcement:

Cufon aims to become a worthy alternative to sIFR, which despite its merits still remains painfully tricky to set up and use. To achieve this ambitious goal the following requirements were set:

  • No plug-ins required - it can only use features natively supported by the client
  • Compatibility - it has to work on every major browser on the market
  • Ease of use - no or near-zero configuration needed for standard use cases
  • Speed - it has to be fast, even for sufficiently large amounts of text

Cufon consists of a font generator, which converts fonts to a proprietary format and a rendering engine written in JavaScript. In reality the generator is little more than a web-based interface to FontForge. First, the generator builds a custom FontForge script based on user input and then runs it, saving the result as an SVG font. The SVG font is then parsed and SVG paths are converted to VML paths. This is a crucial step in achieving stellar performance in Internet Explorer, as it supports VML natively. The resulting document is then converted into JSON with a mix of functional JavaScript. This has numerous advantages:

  • To include a font, you only need to load it with the standard tag as any other JavaScript file and it will be registered automatically
  • There is no need to manually parse the file on client-side again
  • External JavaScript files block execution until they have loaded, which helps us to achieve a flicker-free, clean replacement
  • It compresses extremely well. While often somewhat large in terms of file size without any compression, a compressed font usually weighs in 60-80% less than the original.
Tutorial by Jeffrey Way, who argues that Cufon beats sIFR in simplicity and ease of use, but warns that text is not selectable and that the hover element does not work. Alternate URL. [Google] [More]  ⦿

Custom Fonts for the Web

We are in November 2008. The proposals for font usage on web pages are coming in from all sides. These include

[Google] [More]  ⦿

Dan's web tips

Good advice on fonts in html documents. [Google] [More]  ⦿

Dave Rupert
[Lettering.js]

[More]  ⦿

Dave Shea
[Fine typography for the web]

[More]  ⦿

David Barron

Author in 2009 of Downloadable font formats for the Web. [Google] [More]  ⦿

David Chester
[Typeface.js]

[More]  ⦿

Davide P. Cervone
[jsMath]

[More]  ⦿

Delicious Test Waterfall

Test page for Jos Buivenga's Delicious face. The fonts are converted to woff, encoded as base64 and embedded in the CSS in the head of the source code of the page. Great piece of coding! [Google] [More]  ⦿

Designer Plaything

Free software tool to experiment with different web typography and colour combinations on a page as well as check for colour accessibility level. [Google] [More]  ⦿

DHTML

Page on dynamic fonts in HTML IV. [Google] [More]  ⦿

Divya Manian
[Nimbupani Designs]

[More]  ⦿

dpi

A German language page on the calculation of dpi for screens. Typically, today, they range from 72 dpi to 96 dpi and with larger monitors well over 100 dpi. To have text appear identical on all screens, we should adjust for that discrepancy. [Google] [More]  ⦿

Dr. Roland Unger

Dr. Roland Unger's German language glossary. HTML help. [Google] [More]  ⦿

Drop Caps

A CSS tutorial on defining drop caps in CSS. [Google] [More]  ⦿

Drupal

A possible web font solution. [Google] [More]  ⦿

dumpglyphs

A free program based on code by Mauro Persano for turning a truetype font into a PNG image containing the glyphs, plus a font information file. [Google] [More]  ⦿

E. Muravjev

Russian artist and software specialist who was written an on-line HTML creator called Typograph. One of his typographic experiments/illustrations. [Google] [More]  ⦿

Embedding fonts

Eric Miller's tips for embedding fonts in HTML files. [Google] [More]  ⦿

Embedding Fonts Tutorial

Steve Mulder's nice crash course on font embedding. Format 1: "eot" (embedded open type) is a Microsoft IE format supporting truetype and opentype. Format 2: "pfr" (truedoc) is a Netscape/Bitstream way of doing things and supports truetype and type 1. [Google] [More]  ⦿

Eric Eaton

Why type on the web is so bad: very readable essay by Eric Eaton, a senior designer at Wired Digital. [Google] [More]  ⦿

Facelift Image Replacement
[Cory Mawhorter]

FLIR or Facelift Image Replacement is advertised as an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via Javascript and visible to all modern browsers. Any element with text can be replaced: from headers to elements and everything in between. It is an alternative to sIFR, and is free software by Cory Mawhorter. [Google] [More]  ⦿

Fahri Özkaramanli
[Wordmark]

[More]  ⦿

Faruk Ate
[Serif vs sans serif]

[More]  ⦿

Fine typography for the web
[Dave Shea]

Dave Shea gives a slideshow about good typography, and takes us through the various ways of insuring proper font selections. [Google] [More]  ⦿

Five simple steps to better typography
[Mark Boulton]

Mark Boulton on web typography. [Google] [More]  ⦿

Flash specific Bitmap-like Fonts

A complete guide on making Flash specific Bitmap-like Fonts. [Google] [More]  ⦿

Flipping Typical
[Stuart Robinson]

Comparison tool for fonts on one's computer. By Stuart Robinson. [Google] [More]  ⦿

fnsam

Peter Kleiweg's free utility, which creates a set of HTML pages, each showing samples of twenty fonts -- Type1, TrueType, and others that are available to Ghostscript. You can quickly browse your fonts using a HTML browser, and click a sample to view that font's complete character set. A separate script is available that lists detailed info about a particular font. [Google] [More]  ⦿

Font comparison

A google document (PDF based) that compares fonts. [Google] [More]  ⦿

font dragr

An on-line utility for testing fonts for use on web pages. Their blurb: font dragr allows you to easily test custom fonts, through the @font-face at-rule, without the need for any CSS coding or knowledge of CSS coding. All you need to do is drag and drop. [...] It's incredibly easy to use. All you need to do is drag and drop a font file from your computer into font dragr in a supporting browser (Such as Firefox 3.6+ or Chrome 6+). [Google] [More]  ⦿

Font embedding

Neat explanations on font embedding in web pages by Microsoft. [Google] [More]  ⦿

Font embedding: a reality?
[Chris Coyier]

Chris Coyier discusses the font-face tag in CSS, and the lack of success, due to the fact that either browsers are not implementing it, or font designers (like Hoefler, anfd many others) are explicitly forbidding their font licensees to offer up their fonts via that tag. [Google] [More]  ⦿

Font matching, CSS2

Great manual and essay about CSS2 (cascading style sheets) and the font matching algorithms used to pick the closest font in web pages. Cascading Style Sheets, level 2 W3C Proposed Recommendation 24-Mar-1998. See also here. [Google] [More]  ⦿

Font Matrix
[Richard Rutter]

Richard Rutter's nice cross-listing of fonts bundled with Mac and Windows operating systems, Microsoft Office and Adobe Creative Suite. Useful for specifying fonts in html as well. Original URL from 2007. [Google] [More]  ⦿

Font Smoothing
[Krzysztof Szafranek]

Krzysztof Szafranek explains font smoothing on computer screens. Things like antialiasing and subpixel rendering get a thorough treatment. Subpixel rendering seems to be the method of choice as of 2009, with Windows Vista's version called ClearType and the Masc OS X version called Quartz. I quote some of his conclusions.

Unfortunately, a designer cannot ensure that users will see HTML text exactly as designed. Rendering the whole page as an image or Flash file is not a sensible alternative due to performance, usability and accessibility concerns. What, then, can a designer do to ensure maximum legibility and a good look of a type?

  • Accept the reality. Right now there's no way to tell what settings your users have. Most likely, they have subpixel rendering on Mac OS X, no antialiasing at all on Windows XP with IE6 or Firefox, and ClearType in IE7, IE8 or Vista, but you can't be 100% sure. Needless to say, a website will look very different across all these environments.
  • Assume the worst. When designing the page in Photoshop, check how does it looks without any text smoothing at all and with Smooth setting applied. Bear in mind that Smooth setting is not equal to standard antialiasing and there's no Photoshop equivalent whatsoever to subpixel rendering. As for 2008, no smoothing at all is a very prevalent option out there, as it's used by IE6 and Firefox on Windows XP with default settings.
  • Use fonts designed for a screen. So called web fonts were designed with the screen in mind and its low-resolution pixel grid. The list includes Arial, Courier New, Georgia, Times New Roman and Verdana. While these fonts may look like over-exploited cliché and you may prefer Helvetica over Arial (like me), they're also the simplest way to achieve legibility for the widest audience. The old rule still holds: when in doubt, use Verdana.
  • Beware of big type. Big font sizes are especially harmed by pixelation when font smoothing is disabled. If your audience is likely to use this setting, avoid big type.
  • Test. Make sure the page is legible with font smoothing turned off, standard antialiasing (Windows) and subpixel rendering (ClearType on Windows, Quartz on Mac OS X). Change the typeface or its size when legibility is a problem. If you use Windows, you can check Mac rendering with Safari. On Mac, you will need to install Windows XP or Vista. If you're a web developer, you probably already did so.
  • Beware of ClearType fonts. Windows Vista and MS Office 2007 features a collection of fonts designed especially for use with ClearType: Constantia, Corbel, Calibri, Cambria, Candara and Consolas. Apart from sharing unfortunate naming, they can be barely readable when font smoothing is disabled (figure 6). While they may become a long-awaited refreshment to web fonts, one should avoid them if subpixel rendering is not ensured (e.g., on Firefox on Windows XP).
  • Wait for a future. CSS3 includes font-smooth property, which will allow designers to control text smoothing. Unfortunately, as for 2008, no browser supports this property. Keep in mind that the whole issue may become irrelevant before this CSS property will be implemented. Computer displays are being constantly improved and one day they should have enough DPI's to display type in a perfectly legible way without smart tricks.
[Google] [More]  ⦿

Font smoothing, anti-aliasing, and sub-pixel rendering
[Joel Spolsky]

Joel Spolsky on rendering engines, and on the differences between Mac and Windows. [Google] [More]  ⦿

Font Tester

Font Tester is a free online font comparison tool. It allows you to easily preview and compare different fonts side by side with various CSS font styles applied to them. It is very useful for web developers who are looking for just the right font/style/color to use in their pages. To use it all you have to do is simply enter the text you would like to preview, modify the various CSS properties until you find a style you like, and then click on the Get CSS Code button to generate all the necassary CSS code to reproduce those styles in your webpage. [Google] [More]  ⦿

Fontfarm
[Natascha Dell]

Natascha Dell (Fontfarm, Aachen) is a graduate from FH Aachen (Germany) who wrote a thesis in 2004 on the use and abuse of typography on the web.

Fonts designed at Fontfarm in 2005-2006 by Kai F. Oetzbach and Natascha Dell: Agendatype (+Swash), Goffik-Outline, Goffik-Shadow, KofiPure (in Sans, Serif and SemisKursiv), NakoticaBarrow (techno), Nafi (2005, upright connected script and some dingbats), Caput (2008, a sans family), Jenny (a six-style family that grew out of Jenson Antiqua into a more angular carapace), Parker-Barrow (a sans+slab experiment).

Typefaces by the same pair in 2011: Gedau Gothic (grotesque family), Ergilo (angular serif family). Newtype is a 36-style superfamily for headlines, information design and short passages.

. [Google] [More]  ⦿

Fontoteka

A hands-on comparison of the main web browser fonts. [Google] [More]  ⦿

Fonts

Great rules of thumb for web page layout. [Google] [More]  ⦿

Fonts available for @font-face embedding

This list contained the following fonts in January 2009: Graublau Sans Web, Anivers, Delicious, Fontin (sans), Fertigo, Tallys, Diavlo, Pykes Peak Zero, Gentium, Doulos SIL, Charis SIL, Andika Design Review, Linux Libertine, Century Catalogue, Inconsolata, Old Standard Covers, Breip, Tagesschrift, Kaffesatz, Vollkorn-Brotschrift, Prociono, Goudy Bookletter 1911, Liberation Fonts, Droid Fonts, M+ Web Fonts. Another similar list is here. [Google] [More]  ⦿

Fonts in HTML

  • Declaration at top of HTML page:
     <STYLE TYPE="text/css">
    <!-- @font-face { font-family: Eastman; font-style:  normal;
    font-weight: normal; src: url(http://www.loser.com/eastman.eot); }
    --> </STYLE>
  • Declaration before first font use:
    <LINK REL="fontdef" SRC="http://www.loser.com/eastman.pfr">
  • Font use:
    <font face="Eastman" size="5"><b>Yesterday's man</b>.
[Google] [More]  ⦿

Frank Rausch
[TypeShow]

[More]  ⦿

FRKT
[Johannes Gorset]

A 2009 article on font replacement, written by Oslo-based graphic designer and web developer Johannes Gorset. Verdict: Cufón and typeface.js are based on later technologies (that's not to say they are not widely supported, as is so often the case with new technology and the web), so it should come as no surprise that they perform better in most respects. Unless you are overly bothered about text selection not looking entirely right just yet, you should probably go with the HTML5-based technique Cufón. [Google] [More]  ⦿

Fun with Fonts

What you can do with font tags on web pages. [Google] [More]  ⦿

Garrett Dimon
[CSS Typography]

[More]  ⦿

Garrick Van Buren
[Kernest]

[More]  ⦿

Gary Munch

Nice tutorial by Gary Munch on HTML. [Google] [More]  ⦿

George Butler
[Web font stacks]

[More]  ⦿

Giko font

The Giko Font project is to provide (free open source code) for developing bitmap fonts with a web interface. [Google] [More]  ⦿

Github

The font subpages at the San Francisco-based computer software site GitHub. Most links are for apps and small utilities related to fonts. [Google] [More]  ⦿

GlyphGate

Commercial product by em2 Solutions AB. It is a web server extension that makes it possible to show text with in many languages on many browsers on many platforms. [Google] [More]  ⦿

Google Fonts Demo

Demo (in Dutch) on how to use the google fonts. See also here and be sure to check the source code. [Google] [More]  ⦿

Graphemica

Great page that permits Unicode character description and search. A great tool. Browse by character, script, and so forth. [Google] [More]  ⦿

Günter Schuler

Günter Schuler is a German author interested in good typography. Among the things he seels are the Cleverprinting DTP-Typomter (a handy sheet for measuring type sizes, both absolute and relative), TypeSelect Schriftenfächer (a wall paint-style foldout with typefaces), and Grundkurs Typografie und Layout (an introductory book on typography). [Google] [More]  ⦿

Gzip your @fontface files

Advice on gzipping font files for placing on web pages. [Google] [More]  ⦿

Hakon Wium Lie

CSS co-inventor who proposed the CSS font solution for font selection on web pages in 1994: browser makers should fully implement the CSS font specification by letting raw, unprotected font files be linked to web pages. And revise the CSS specs to allow zipped font collections to be linked to web pages, so that web designers can benefit from the large volume of freeware fonts. He is still a member of the W3C CSS Working Group. He is the CTO of Opera Software and a champion for CSS compliance in all browsers. Lie is also a director of YesLogic, the company behind the CSS-based Prince formatter, which was used to produce a book he co-authored: Cascading Style Sheets: Designing for the Web. He has a Master's degree from the MIT Media Lab and a PhD from the University of Oslo. He is an advocate of Acid2. [Google] [More]  ⦿

How to View Hebrew letters on Hebrew--Israeli Web Sites

Useful links related to Hebrew fonts and web pages. [Google] [More]  ⦿

HTML Abuse

Adam Costello, a computer science graduate student at UC Berkeley, shows with the aid of KellyAnnGothic how not to use letters in HTML pages. [Google] [More]  ⦿

HTML: Character encoding
[R. Jansen]

Most HTML character coding tables are incomplete or non-visual. This table by R. Jansen is something else. It is the reference I use. [Google] [More]  ⦿

HTML Ipsum

Chris Coyier's tool provides one with the standard Latin text already in HTML tags. Clicking on any of the blocks automatically copies the text to your clipboard! [Google] [More]  ⦿

HTML Resource Guide

HTML-related links by DataRecoveryLabs. [Google] [More]  ⦿

HTML Tutorial

Anne DeBlois' tutorial on using fonts in HTML pages. [Google] [More]  ⦿

htmlcompendium.org

Ron Woodall's nice explanations about font tags for dynamic font inclusion. [Google] [More]  ⦿

HTMLDOC

Mike Sweet's free program for converting HTML files to indexed HTML, PostScript level 1 and 2, and PDF. It has some limitations (no pictures, no stylesheets). Copyright Easy Software Products. [Google] [More]  ⦿

HTMLite Tutorials

Tutorial on the font tags in HTML: font-family, font-style, font-weight, font-size. [Google] [More]  ⦿

iBoost

Tutorial on the font tags in CSS: font-family, font-variant, font-style, font-weight, font-size. [Google] [More]  ⦿

Icon Stacks
[Conor Muirhead]

Conor Muirhead shows how to combine icon glyphs to create complex icons using clever CSS programming. [Google] [More]  ⦿

Information Architects
[Oliver Reichenstein]

Blog about information design, with occasional articles about typography, such as Web Design is 95% Typography (2008). That article has good common sense advice, so I quote passages.

  • Macro-typography (overall text-structure) in contrast to micro typography (detailed aspects of type and spacing) covers many aspects of what we nowadays call information design. So to speak, information designers nowadays do the job that typographers did 30 years ago: Typography has one plain duty before it and that is to convey information in writing. No argument or consideration can absolve typography from this duty. A printed work which cannot be read becomes a product without purpose. Optimizing typography is optimizing readability, accessibility, usability(!), overall graphic balance. Organizing blocks of text and combining them with pictures, isnt that what graphic designers, usability specialists, information architects do? So why is it such a neglected topic?
  • The main usually whiny argument against typographical discipline online is that there are only few fonts available. The second argument is that the screen resolution is too low, which makes it hard to read pixelated or anti-aliased fonts in the first place. The argument that we do not have enough fonts at our disposition is as good as irrelevant: During the Italian renaissance the typographer had one font to work with, and yet this period produced some of the most beautiful typographical work.
  • Information design is not about the use of good typefaces, it is about the use of good typography. Which is a huge difference. Anyone can use typefaces, some can choose good typefaces, but only few master typography.
  • It is part of a web designers job to make sure that texts are easy and nice to read on all major browsers and platforms. Correct leading, word and letter spacing, active white space, and dosed use of color help readability. But thats not quite it. A great web designer knows how to work with text not just as content, he treats text as a user interface. Treating text as a user interface is the only parameter for success. Successful websites manage to create a simple interface AND a strong identity at the same time.
[Google] [More]  ⦿

Interactive Typography

Set of links related to type for web pages. [Google] [More]  ⦿

Intro to Embedded Fonts

Webmonkey's intro to font embedding on web pages. [Google] [More]  ⦿

Introduction to HTML

Ian Graham's fantastic introduction to HTML. Special characters, ISO Latin-1 character table. [Google] [More]  ⦿

Ironic Sans

On-line illustration of wht one should always prefer black on white instead of white on black. [Google] [More]  ⦿

ISO 8859-1

Coding that supports the following languages: Afrikaans, Catalan, Danish, Dutch, English, Faeroese, Finnish, French, German, Galician, Irish, Icelandic, Italian, Norwegian, Portuguese, Spanish and Swedish. See also here, here, here, here, here, here, here, and here. More specifically, other ISO-8859 groups are as follows:

  • 8859-1 Europe, Latin America
  • 8859-2 Eastern Europe
  • 8859-3 SE Europe
  • 8859-4 Scandinavia (mostly covered by 8859-1 also)
  • 8859-5 Cyrillic
  • 8859-6 Arabic
  • 8859-7 Greek
  • 8859-8 Hebrew
  • 8859-9 Latin5, same as 8859-1 except for Turkish instead of Icelandic
  • 8859-10 Latin6, for Eskimo/Scandinavian languages
[Google] [More]  ⦿

ISO-8859-1 Characters in HTML

Useful tables of all special characters allowed in HTML. [Google] [More]  ⦿

Jack Schofield

In 2001, Jack Schofield at the Guardian writes a gorgeous piece about the silliness of designing web pages using pixel technology for one browser and one screen. The web users should dictate what they want to see and how, and not the web page designers. Great piece, Jack. [Google] [More]  ⦿

Jan Thor

One of the greatest introductions to HTML, by Jan Thor. [Google] [More]  ⦿

Jaroslav „Dero“ Polakovic
[typografie.dero.name]

[More]  ⦿

Javascript--CSS Font Detector
[Lalit Patel]

Free on-line software by Lalit Patel (from Orissa, India) for detecting fonts on one's system. See also Johan sundström's version. [Google] [More]  ⦿

Jim Byrne

Author of Accessible Web Typography. The web page corresponds to the book. [Google] [More]  ⦿

Joe Clark, Toronto Writer

Joe Clark's essays on typography. Typoblog: his old blog on type. Newest URL for his type blog. Author of the must-read book Building Accessible Websites (2002). At ATypI 2003 in Vancouver, he spoke about typography for online captioning. ATypI writes: Toronto journalist, author (Building accessible websites, New Riders, 2003), and accessibility consultant Joe Clark has followed typography as long as he.s followed accessibility for people with disabilities: over 20 years. He is director of the Open&Closed Project, a public-private-academic partnership in research and standardisation in captioning, audio description, subtitling, dubbing, and related fields in audiovisual accessibility. At ATypI 2007 in Brighton, he spoke about Type in the Toronto Subway. [Google] [More]  ⦿

Joel Spolsky
[Font smoothing, anti-aliasing, and sub-pixel rendering]

[More]  ⦿

Johannes Gorset
[FRKT]

[More]  ⦿

John Reeve
[Pelago (was: Reeve Jones Design)]

[More]  ⦿

Jon Tangerine
[Rendering Complex Type]

[More]  ⦿

jsMath
[Davide P. Cervone]

Download site for free TeX fonts for jsMath (an impressive free package by Davide P. Cervone for including math on web pages). These fonts can also be used elsewhere of course. Truetype and type fonts are available,m and instructions are provided. The list of fonts: from the American Mathematical Society, CMBX10, CMEX10, CMMI10, CMR10, CMSY10, CMTI10; home-made in 2005: jsMath-bbold10, jsMath-cmbx10, jsMath-cmex10, jsMath-cmmi10, jsMath-cmr10, jsMath-cmsy10, jsMath-cmti10, jsMath-cmmib10, jsMath-eufb10, jsMath-eufm10, jsMath-eurb10, jsMath-eurm10, jsMath-eusb10, jsMath-eusm10, jsMath-lasy10, jsMath-lasyb10, jsMath-msam10, jsMath-msbm10, jsMath-rsfs10, jsMath-stmary10, jsMath-wasy10, jsMath-wasyb10; by Basil K. Malyshev: Cmbx10, Cmex10, Cmmi10, Cmr10, Cmsy10, Cmti10. [Google] [More]  ⦿

Kernest
[Garrick Van Buren]

A site that offers to host fonts for use in @fontface tags on web pages. I do not quite understand the pricing---somewhere it says, for example, that Abia Wide by Tkachenko will cost 15 dollars per year and per web site. It is unclear who pays who in the triangle "web site (html page) maker", "font designer", "Kernest". I believe that some are free. Fontue is a free open-source, web font server built for Kernest.com. The list of designers participating in this effort is impressive.

The list of designers as of March 2010: A. Korolkova | Aj Paglia | Alec Julien | Alexander Fell | Alexander Kalachev | Alexey Kryukov | Alexey Maslov | Andrew Paglinawan | Andrey V. Panov | Andy Chung | Annie Olsen | Apostolos Syropoulos | Apostrophic Labs | Ascender Corporation | B. Jackowski | Barry Schwartz | Ben Weiner | Bernd Montag | Bitstream | Bo Linnemann | Brandon Schoech | Caius Chance | Cal Henderson | Caroline Hadilaksono | Chank Diesel | Charles Bigelow | Choz Cunningham | Chris Miller | Christian Ghirardi | Christophe Féray | Coji Morishita | Colin Willems | Daniel Johnson | Daniel Midgley | Darren Rigby | Dave Crossland | Derek Weathersbee | Diego Quintana | Dieter Steffmann | Dimitri Castrique | Dot Colon | Dustin Norlander | Eat Street Fontmaking Workshop | Ed Merritt | Edgar Tadeo | Eric Schiller | Fontsite | Fredrick Nader | Friedrich Althausen | Garrett Le Sage | Georg Seifert | George Triantafyllakos | Giovanniello | Graham Meade | Greyscale | Gurkan Sengun | Haley Fiege | Han The Thanh | Harold Lohner | Hiran Venugopalan | Hirwen Harendal | J.M. Nowacki | James Puckett | Jan Gerner | Jan Sonntag | Janusz M. Nowacki | Jason Kottke | Jeffrey Visser | Jeroen Klaver | Jess Latham | Johan Aakerlund | Johan Mattsson | John Stracke | Jon Hicks | Jovanny Lemonad | Juan Pablo De Gregorio | Justus Erich Walbaum | Kris Holmes | La Tipomatika | Libertine Open Fonts Project | Lithu K Kumar | Ludivine Loiseau | M+ Fonts | Manfred Klein | Marcelo Magalhaes | Mark Simonson | Marko Jovanovac | Markus Waeger | Matt Mc Inerney | Matthew Welch | Meredith Mandel | Michael Tension | MÃ¥rten Nettelbladt | Nadia Knechtle | Nick Curtis | O. Umpeleva | Orgdot Consortium | Oscar Marchal | Patrick Broderick | Paul Lloyd | Paulo Silva | Peter Hoffman | Peter Wiegel | Philipp H. Poll | Philippe Cochy | Ralph Oliver Du Carrois | Raph Levien | Richard A. Ware | Robby Woodard | Robert Norton | Rodrigo Fuenzalida | Rogier Van Dalen | Roman Yershov | Ryoichi Tsunekawa | Ryoichi Tsunekawa Bagel | Sil Nrsi Team | Sebastian Mechelk | Sergiy Tkachenko | Sparanoid | Steeve Gruson | Stephen C. Gilardi | Stephen G. Hartke | Steve Jordi | Steve Matteson | Thatcher Ulrich | Thomas Schraitle | Tino Meinert | Tom Murphy 7 | Tom Tor | Tup Wanders | Tyler Finck | V. Yefimov | Valek Filippov | Vic Fieger | Victor Gaultney | Wolf Bain X | Yann Le Coroller | Yeah Noah | Yusuke Kamiyamane | Zygfryd Gardzielewski | Afrojet | Catrina | Craig Kroeger | Ficod | Gluk | Inkboy | Laura Kristen. [Google] [More]  ⦿

Know your type
[Red Labor]

Red Labor on making web and screen representations. His recommendations are at a higher level. [Google] [More]  ⦿

Korhoen Typeviewer

Practical on-line tool for checking the types on your browser. [Google] [More]  ⦿

Krzysztof Szafranek
[Font Smoothing]

[More]  ⦿

Kyle Meyer
[Typesites]

[More]  ⦿

Lalit Patel
[Javascript--CSS Font Detector]

[More]  ⦿

Layering type with CSS z-index

A MyFonts webfonts feature article. The summary: Layering text adds depth and visual interest to headlines, mastheads and other large display type on your site. There are plenty of fonts that are specifically designed for this technique. Font families designed for this technique will typically have two or more versions of the font, such as a shadow, fill, outline or a texture. It is especially important that the fonts all have the same metric values, because making manual tweaks to spacing and kerning is hard enough in DTP applications; in CSS, it is virtually impossible. The faces below all work right out of the box. The basic principle of this technique is that it takes two identical lines of text, applies a different version of the font to each (such as an outline and a fill version) and then layers one above the other. [Google] [More]  ⦿

Legibilidad y comprensión en la Web

Argentinian tutorial on cascading style sheets, web typography, the main families of web fonts (included in the main operating systems), and legibility. [Google] [More]  ⦿

Lettering.js
[Dave Rupert]

Advice and examples of a jQuery plugin for making nice headlines on web pages. [Google] [More]  ⦿

Linotype web site

It is really not for me to complain about any web site, as mine is about as ugly as they come. But my gripes with the Linotype site over the years have been building up, and today, they have come to a boil. Here we go, for the benefit of Linotype:

  • The last straw is the addition of a password to access the regular site. You have to cancel two passwords before you can access the site now. Why? Does Linotype really want to sell fonts, or keep the buyers at bay?
  • Crashes: Netscape crashes on the Lino page. Mozilla, Safari and Firefox make it through.
  • Search engines cannot find your internal pages. This is a problem with most commercial web sites, but it seriously reduces your hit count and your sales. With the new URL structure at Linotype, this seems to have been fixed. MyFonts shows how to do it right. Openness to the web is a must.
  • Speed: it takes forever to load a Lino page. I am sure there is some heavy processing going on in there, but please, if Google can handle a world wide web query in less than a second, and Amazon can search its twenty million records in half a second, then Linotype should be able to handle a page load in less than ten seconds---thirty to fourty seconds is unacceptable.
  • Commercialism: Do not try to show your entire site in side bars on every page. Most visitors know what they want. Again, follow the MyFonts model.
  • The one that hits me personally is that internal Linotype URL's change all the time. They have changed three times in three years. Bookmarking certain things at Linotype is thus useless. For people like me, who would love to direct traffic to Linotype via link pages, a stable internal URL structure with lifespans measured in decades, not years, is essential. Adobe suffers from similar problems, while MyFonts has just introduced the first change in five years. Agfa, like Linotype, is hopeless. The role model here is Identifont (no change ever). Noteworthy too is that my own pages, as awful as they are, have never changed internal URL organization, and hopefully never will.
[Google] [More]  ⦿

Linux Web Fonts
[Andrew Daviel]

Andrew Daviel's survey and comparison of Linux fonts. [Google] [More]  ⦿

LiveGe'ez

Daniel Yacob's fantastic page with a near-complete listing of all available Ethiopic fonts, and with explanations about Ethiopic in HTML pages. [Google] [More]  ⦿

Logische Symbole mit HTML

symbol.ttf: a font with logical symbols. Explanations by Stefan R. Mueller on the use of such fonts in HTML documents. [Google] [More]  ⦿

Luxury Type

A list of standard faces found pre-installed on most systems for reading web pages. With discussion. By Jeff Croft at JeffCroft.com. [Google] [More]  ⦿

Mac OS X and Windows XP fonts

Useful listing of the Mac OS X and Windows Xfonts.

  • For Mac OS X 10.4: American Typewriter, Andale Mono, Arial, Arial Black, Arial Narrow, Arial Rounded MT Bold, Ayuthaya, Baskerville, BiauKai, Big Caslon, Brush Script MT, Chalkboard, Charcoal CY, Cochin, Comic Sans MS, Copperplate, Courier, Courier New, Didot, Euphemia UCAS, Futura, Geneva, Geneva CY, Georgia, Gill Sans, Hei, Helvetica, Helvetica CY, Helvetica Neue, Herculanum, Hoefler Text, Impact, InaiMathi, Kai, Krungthep, LiHei Pro (2003, Dynalab), LiSong Pro (2003, Dynalab), Lucida Grande, Marker Felt, Monaco, Optima, Osaka, Papyrus, Plantagenet Cherokee, Sathu, Silom, Skia, STFangsong, STHeiti, STKaiti, STSong, Thonburi, Times, Times New Roman, Trebuchet MS, Verdana, Zapfino, Hiragino Pro W3[Bold] Hiragino Pro W6[Bold] Hiragino Std W8[Bold] Hiragino Pro W4[Bold] Hiragino Mincho Pro W3, Hiragino Mincho Pro W6, #GungSeo, #HeadLineA, PCMyungjo, #PilGi, Apple Chancery, AppleGothic, Apple LiGothic, Apple LiSung, AppleMyungjo.
  • For Windows XP: Arial, Arial Black, Batang, BatangChe, Gungsuh, GungsuhChe, Comic Sans MS, Courier, Courier New, Estrangelo Edessa, Franklin Gothic Medium, Gautami, Georgia, Gulim, GulimChe, Dotum, DotumChe, Impact, Latha, Lucida Console, Lucida Sans, Mangal, Microsoft Sans Serif, MingLiU, PMingLiU, Modern, MS Gothic, MS P Gothic, MS UI Gothic, MS Mincho, MS P MIncho, MS Sans Serif, MS Serif, Mv Boli, Palatino Linotype, Raavi, Roman, Script, Shruti, SimHei, SimSun, NSimSun, Small Fonts, Tahoma, Times New Roman, Trebuchet MS, Tunga, Verdana.
[Google] [More]  ⦿

Magical journey to Greece

On reading Greek in web browsers. [Google] [More]  ⦿

Making Web Sites: Fonts and Typography

Scott Grannemann provides information and links for web site designers on fonts and typography. [Google] [More]  ⦿

Mandership

On Art Lebedev's site, articles (snippets, really) on graphic and industrial design, interface engineering, typography, semiotics, and visualization. Has been up since 1997. Translated from Russian. [Google] [More]  ⦿

Mark Boulton
[Five simple steps to better typography]

[More]  ⦿

Mark Wubben
[sIFR 3]

[More]  ⦿

Marko Dugonjic
[Typetester]

[More]  ⦿

Markupmarks

Great set of links related to type for web pages. [Google] [More]  ⦿

Martin Ström
[CopyPasteCharacter]

[More]  ⦿

Mike Davidson
[sIFR]

[More]  ⦿

Minimum font size

Thomas Baekdal gives tips about minimum font size specifications in style sheets for web pages. [Google] [More]  ⦿

Natascha Dell
[Fontfarm]

[More]  ⦿

Nathan Ford
[Better CSS Font Stacks]

[More]  ⦿

Nerdi

Link pages related to font choices, CSS, and web typography. [Google] [More]  ⦿

Nick Cowie

Nick Cowie explains web fonts. [Google] [More]  ⦿

Nico Brünjes
[Code Candies]

[More]  ⦿

Nimbupani Designs
[Divya Manian]

Divya Manian discusses in July 2009 about the font situation on the web. [Google] [More]  ⦿

No more GIF text!

Very readable essay by Taylor on the use of fonts in web pages. [Google] [More]  ⦿

Noura Yehia
[Smashing Magazine: 50 Useful Design Tools for Beautiful Web Typography]

[More]  ⦿

OFL: Alternatives for @font-face

The list of alternatives, as of the ummer of 2009:

[Google] [More]  ⦿

Ofont

A free font tool by Raphël Bastide (Paris) to list and organize fonts online. Published in 2014, it can be used to share references with co-workers or students, to make a foundry portfolio, or as a private tool. View Ofont in action. [Google] [More]  ⦿

Oliver Reichenstein
[Information Architects]

[More]  ⦿

Page ranking

Page ranking by google for the term "fonts" reveals that most big commercial font foundries are doing it all wrong by using convoluted tree structures and internal URLs that change at least once a year. The top 30 sites (April 2004) include mostly free font archives (1001freefonts (1), Fontsnthings (4), Acid Fonts (5), 1001fonts (6), Fontfreak (8), Fontalicious (10), Abstract Fonts (11), 007 fonts (13), Cool Archive (16), DaFONT (17), PCFonts (20), Cool Fonts (21), Fontastic (27), ABC Giant (28), Fontfile (29)), shareware/freeware foundries (Larabie (2), Divide by zero (14)), type info sites (SIL.org (12), yours truly (26), Yamada (30)), and the odd commercial foundry/vendor (Agfa (3), Microsoft (7), Chank (9), MyFonts (15), Linotype (18), PhilsFonts (19), Emigre (22), Adobe (24), Blambot (25)).

Checked again in May 2008, and the free font archives have moved up dramatically (Dafont (17 -> 1), 1001freefonts (1 -> 3), Urbanfonts (4), Abstract Fonts (11 -> 5), Smashing Magazine (6), Simplythebest Free Fonts (7), 1001fonts (6 -> 8), FontFreak (8 -> 10), Acid Fonts (5 -> 11), Highfonts (12), creamundo (13), Cooltext (16), Fontstock (17), Fontreactor (20), WebFXMall (21), PC Fonts (20 -> 23), Searchfreefonts (25), Actionfonts (27), Font Garden (29), Absolute Fonts Archive (30)). Shareware/freeware foundries basically vanished. International free font places kept up (SIL (12 -> 18), Yamada Language Center (30 -> 22)). Font and font software information sites crept up (w3.org (9), Wikipedia.org (14), Mozilla.org (15), w3schools.com (28)). Commercial vendors took a beating: only Fonts.Com/Monotype (2) and Larabiefonts (24) crack the top 30, but the link page Font Pool (26), which links to commercial foundries should be added to this category. Identifont is at 35, MyFonts at 37, Microsoft in position 38, Adobe at 43, Linotype at 50, Emigre at 82, FontStruct at 144, FontShop at 145, and Typographica at 191. [Google] [More]  ⦿

Paul Irish

Technical guy who offers CSS and javascript tips regarding fonts and @fontface in web pages. Plenty of technical discussions in blog format. His comments on the Google Webfont API in 2010, right about the time he joined Google Chrome. [Google] [More]  ⦿

PCDTR

PCDTR stands for PHP + CSS Dynamic Text Replacement. A free javascript replaces html text using any custom font (styles are defined in the CSS file). The Google code called pcdtr is free to download. [Google] [More]  ⦿

pdf2html

Free open source code by Twibright Labs for making HTML pages out of PDF files. Note: I struggled for 30 minutes, and failed to install it for FreeBSD Unix. [Google] [More]  ⦿

PDFC

A (free open source code) PDF/XML conversion program. The project is headed by Steve Dunn. [Google] [More]  ⦿

PDFConverter

On-line HTML tutoal. [Google] [More]  ⦿

pdftohtml

Gueorgui Ovtcharov and Rainer Dorsch at the University of Stuttgart developed free Open Source code for converting PDF files into HTML files. [Google] [More]  ⦿

Pelago (was: Reeve Jones Design)
[John Reeve]

The Sigmund typeface is designed for dynamic use in web pages. Go here for details. By John Reeve. Just by clicking, generate an HTML img tag that displays text dynamically in the Sigmund font, which is very readable at small screen sizes. See also here. [Google] [More]  ⦿

Penduka Senaka
[Typechart]

[More]  ⦿

philgate: la typographie sur le web

Help with fonts on the web (in French). [Google] [More]  ⦿

Philip Taylor
[Web Font Optimizer]

[More]  ⦿

PhotoFont

Fontlab's 2006 type format designed for web site use. Fonts are described in the human-readable XML language, and the glyphs are just bitmap pictures, typically in PNG format. The format is non-proprietary. Editing can be done in a standard editor, or via the (proprietary) BitFonter. Web pages using these fonts must have the photofont plug-in installed, but from there, with the appropriate tags, the screen fonts behave like standard fonts in text. Text is searchable, indexable, and so forth. Photofont Start is a free Adobe Photoshop, Corel Painter and Macromedia Fireworks plug-in released in 2005. In 2008, Photofont WebReady was released by the FontLab people---with the help of sIFR, text on web pages is replaced by embedded text-searchable Flash.

Old but dead link. [Google] [More]  ⦿

Piotr Fedorczyk

Information and user interface designer at Designr.it in Florence. His diary on the web is exquisitely typeset. He has tens of useful tips for web typography. [Google] [More]  ⦿

Polylogue

French type and web typography site, with commentary and tips. [Google] [More]  ⦿

Portable Font Resources (PFR)

PFRs are dynamically downloadable fonts that enable Netscape and Internet Explorer browsers to display character glyphs without relying on native system fonts. Netscape 4 and above have built-in support for PFRs, while Internet Explorer needs an ActiveX plug-in to display characters with PFRs. TrueDoc, the technology behind Portable Font Resources, was developed by BitStream. Alternate URL. Old URL. [Google] [More]  ⦿

Postable

On-line converter of text to HTML-ready format. [Google] [More]  ⦿

ps2html

Free PERL code for postscript to text to html. [Google] [More]  ⦿

ps2html

Nelson L. Chang's free program for converting postscript files into html files. Improved by Amr Haggag. Of limited use, as it requires many other things. [Google] [More]  ⦿

ps2html

Free UNIX program for making a PostScript program into an HTML file. By Alessandro Agostini, Daniele Andreuccetti and Stefano Cerreti at the Florence Research Area and Electromagnetic Research Institute of National Research Council in Florence, Italy. [Google] [More]  ⦿

ps2html

PostScript to HTML converter by Yannis Nikopoulos, developed in his bachelor thesis at the Computer Science Department at the University of Crete. Free source code. For UNIX only. [Google] [More]  ⦿

ps2html

PostScript to HTML converter by Bradley for certain journals at Johns Hopkins University Press. Not applicable for most documents. He also has a script that parses the ps2ascii output to produce a HTML document for general documents. Free. [Google] [More]  ⦿

Pxfon
[Shaun Inman]

Free software by Shaun Inman for creating Cufon-compatible pixel-based font.js files from specially prepared gifs. [Google] [More]  ⦿

Quiet Pleasures

Fantastic pages about typography by Gunnlauger Briem. Some wonderful advice for web page typography. [Google] [More]  ⦿

R. Jansen
[HTML: Character encoding]

[More]  ⦿

Red Labor
[Know your type]

[More]  ⦿

Remon Lammers
[TrueFont Family (or: TFF)]

[More]  ⦿

Rendering Complex Type
[Jon Tangerine]

Complex type examples by Jon Tangerine. [Google] [More]  ⦿

Rendering SVG font definitions using dojox.gfx
[Tom Trenka]

The Dojo Toolkit is software to help open up the web. Tom Trenka posts a discussion of web fonts, and proposes a Dojo-specific solution that uses rendering SVG font definbitions. [Google] [More]  ⦿

Richard Rutter
[Font Matrix]

[More]  ⦿

Richard Rutter
[Web typography sucks]

[More]  ⦿

Richard Rutter

Exemplary web page by Brighton-based Richard Rutter on web typography. He showcases the first few pages of Robert Bringhurst's book. [Google] [More]  ⦿

Russ Maschmeyer
[Type-a-file]

[More]  ⦿

Ryoichi Tsunekawa
[Better Font Stacks]

[More]  ⦿

Safe web fonts

A comparison of the pre-2005 web fonts everyone uses. [Google] [More]  ⦿

Schriftformatierung mit Schriftartendatei

Nice German page explaining about fonts in HTML. [Google] [More]  ⦿

Sean Hodge
[Smashing Magazine: 5 Principles and Ideas of Setting Type on the Web]

[More]  ⦿

Serif vs sans serif
[Faruk Ate]

Faruk Ate discusses this old dilemma. Serif is more legible in print, but less so on screen. Serif is better for dyslexics though, as there is less confusion. At small screen size, sans serif is recommended. He concludes: Personally, I still prefer sans-serif for large chunks of text with a lovely serif heading. [Google] [More]  ⦿

Severe Tire Damage

Masterful page by David Siegel about the dos, donts, wants and needs of web page design and fonts on them. [Google] [More]  ⦿

Shaun Inman
[Pxfon]

[More]  ⦿

sIFR
[Mike Davidson]

sIFR is a method to insert rich typography into web pages without sacrificing accessibility, search engine friendliness, or markup semantics. The method, dubbed sIFR (or Scalable Inman Flash Replacement), was developed in 2003 by Shaun Inman and later refined by Mike Davidson and Mark Wubben. It requires javascript, Flash, and some tags in the html code to designate text to be put in a font of one's choice. The on-the-fly replacement or overlay of text by a rectangle of Flash text is automatic, once sIFR is installed. The developer only needs to edit sifr.fla and export the font in .swf. Blog. [Google] [More]  ⦿

sIFR 3
[Mark Wubben]

Mark Wubben, its Dutch hacker/inventor, explains about sIFR 3: sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of JavaScript, CSS, and Flash, which renders the font. It degrades gracefully if Flash is not present. sIFR 3 is open source and licensed under the CC-GNU LGPL. [Google] [More]  ⦿

Simo Kinnunen
[Cufon]

[More]  ⦿

Smashing Magazine: 5 Principles and Ideas of Setting Type on the Web
[Sean Hodge]

A discussion of the best web type design principles, by Sean Hodge. [Google] [More]  ⦿

Smashing Magazine: 50 Useful Design Tools for Beautiful Web Typography
[Noura Yehia]

A discussion of the best web type design tools, by Noura yehia. [Google] [More]  ⦿

Socitype
[Christian-Heinrich Wunderlich]

Socitype is free software by Christian-Heinrich Wunderlich that allows one to place little single-letter gifs in HTML pages. Free complete gif collections of a "socialist" font are included. [Google] [More]  ⦿

Special Characters

Special characters and mathematical symbols in HTML. [Google] [More]  ⦿

stack.ru

An excellent Russian tutorial on fonts in web pages. [Google] [More]  ⦿

Startbloggingonline

HTML tutorial. [Google] [More]  ⦿

Stefan Nitzsche

Examples of the most frequently used screen fonts. In this test, Palatino Linotype, Georgia and verdana come out as winners. [Google] [More]  ⦿

Stephen Coles on Apple

We are in April 2010, and Apple has just launched its iPad. Stephen Coles is not happy with Apple in general, and summarizes Apple's typographic disasters. Some passages:

The string of odd missteps began with the release of Mac OS X. Amid a bunch bundled fonts not worth mentioning, the system came with Lucida Grande, an excellent screen font family based on Kris Holmes' Lucida Sans. The clean, readable face, contemporary but fairly neutral, was used throughout the OS X interface and embraced by web designers (along with its Windows equivalent Lucida Sans Unicode) as their go-to family for small text. Yet, to this day, there is no Lucida Grande italic. I can't explain why, and neither has anyone at Apple. This is the short and simple reason why sites like Facebook don't use italic. If you design with Lucida your options for emphasis and hierarchy are limited to size and weight. Meanwhile, Microsoft - the company that traditionally eats Apple's dust in design - worked with some of the world's best type designers to develop the ClearType fonts, six complete families designed specifically for the screen.

A lack of Lucida Italic could be considered a mild irritant, but Apple's typographic neglect in OS X ran deeper. The system came with a font manager that was, until recently, the least reliable software bundled with a Mac. Even now it has has a reputation that belies Apple's high customer satisfaction. The words "Font Book" are often accompanied with "sucks" and "hate".

Then came the iPhone, its fantastic display with a high pixel-density enabled legible type at small sizes. But Apple essentially erased that potential by choosing Helvetica as the iPhone's system font. Sure, Helvetica is a graphic designer's favorite, but its closed forms and tight spacing hinder reading, especially when small. It was a classic style-over-substance decision. The even more egregious spit in the face of readability was forcing Marker Felt users of the Notes app. More often than not, Apple's recent decisions about type either ignore its importance or value form over function.

The iPad represents a new opportunity to reverse this trend. A device designed for media consumption could validate Apple's dedication to design by emphasizing design's most basic element: typography. But so far, it flops. [And he goes on with details about the iPad's flaws in the typography department.] [Google] [More]  ⦿

Stuart Robinson
[Flipping Typical]

[More]  ⦿

Suxess

A nice discussion by Wolfgang Schimmel (from Vienna) on fonts and modern versions of HTML. [Google] [More]  ⦿

SVG

SVG, or Scalable Vector Graphics, allows for simple definitions of curves in editable text files. They can be used to define scalable fonts (without kerning and hinting or any other bells and whistles though). It is a a modularized language for describing two-dimensional vector and mixed vector/raster graphics in XML. [Google] [More]  ⦿

Tabela de acentos

HTML abbreviations for all accented letters. [Google] [More]  ⦿

Taviso
[ttf2eot]

[More]  ⦿

Team Tejat

A comparison between the main web page fonts based on percent installed. For monospaced fonts, Tejat reports these percentages: on Windows machines, 96% for Lucida Console. On Macs, Andale Mono wins with 85%. On Linux, Bitstream Vera Sans Mono grabs 80%. For sans faces, these the three winners are, respectively, Lucida Sans Unicode (93%), Lucida Grande (88%) and Bitstream Vera Sans (79%). [Google] [More]  ⦿

Testing fonts for web pages

A small web page by yours truly for testing what a given font name in the "font-family" field of a web page produces. The results depend upon one's operating system and browser! [Google] [More]  ⦿

TeX2HTML

WebPrimitives' commercial TEX to html converter that does not use gifs. Does most flavors of TEX. [Google] [More]  ⦿

The anatomy of web fonts
[Andy Hume]

Recommendations by Andy Hume on screen fonts. He discusses x-height (should be large), color (use white on dark becausec screens are additive color systems, mch brighter and more tiring than subtractive color systems, used, e.g., in print), width and letter spacing (be generous), punch width (or space within letters: should be generous), contrast (should be low: simple strokes with consistent thickness and weight). [Google] [More]  ⦿

The Grid System
[Antonio Carusone]

Great discussions of and links to the grid system, the basis of good typography. From the web site: Made popular by the International Typographic Style movement and pioneered by legends like Josef Müller-Brockmann and Wim Crouwel, the grid is the foundation of any solid design. The Grid System is an ever-growing resource where graphic designers can learn about grid systems, the golden ratio and baseline grids. Created by Antonio Carusone, graphic designer and author of the design and typography blog AisleOne. Special thanks to Duane King for his help and wisdom. [Google] [More]  ⦿

The Haven's Den

Really an HTML construction page, but some links to free fonts are provided here. [Google] [More]  ⦿

The Math Forum@Drexel

Mathematical typesetting forum and links at Drexel University. Subpage on math typesetting for the internet. [Google] [More]  ⦿

The Symbols Collection

A listing of symbols available in Arial. [Google] [More]  ⦿

The trouble with EM 'n EN

Alan Zeldman on spaces and quotes in web pages. [Google] [More]  ⦿

Tom Trenka
[Rendering SVG font definitions using dojox.gfx]

[More]  ⦿

Toni Kukurin

A great article by Toni Kukurin from 2010 entitled An Analysis of Typography on the Web explains the basic rules and tricks for designing solid and readable web pages. [Google] [More]  ⦿

TrueFont Family (or: TFF)
[Remon Lammers]

Remon Lammers from The Netherlands has a great little tool (in CSS and HTML) that permits one to use one's own fonts or fonts available on the internet on web pages. Dynamic text replacement based on images---no Flash or plugins. [Google] [More]  ⦿

ttf2eot
[Taviso]

Small free utility (by "Taviso") to convert truetype fonts to EOT (embedded OpenType). EOT is used by Internet Explorer to support css @font-face declarations. The developer is Taviso. A front end to this software was written by Casey Kirsle in 2009. [Google] [More]  ⦿

TTFTitles WordPress Plugin

Free software. I quote: This plugin lets you use images to replace the titles of your posts, thus circumventing the problem of guessing what fonts your end-users might have installed. This is primarily a reworking of the Image Headlines plugin by Brian "ColdForged" Dupuis, so that it would work in WordPress 2.3. Of course, that was a reworking of another plugin by Joel Bennett. Anyway, this plugin lets you replace text on your site (titles specifically, but you can actually replace just about anything) with atttractively rendered TrueType font images. [Google] [More]  ⦿

Type on the web

At Reservocation, an interesting discussion about aliasing and anti-aliasing type on the web, with contributions by Todd Dominey, Jeffrey Zeldman, Gabe Kean, Jim Coudal, and Craig Kroeger. [Google] [More]  ⦿

Type Topics (Adobe)

Intro to typefaces at Adobe. Tips for type on web pages. [Google] [More]  ⦿

Type-a-file
[Russ Maschmeyer]

Russ Maschmeyer's absolutely great HTML / CSS code for typesetting web pages. [Google] [More]  ⦿

Typechart
[Penduka Senaka]

On-line type testing and type previewing tool. The CSS code is generated on the fly and ready for use. Compare Windows Cleartype rendering with Apple font rendering. By Penduka Senaka. [Google] [More]  ⦿

Typeface.js
[David Chester]

David Chester's open source tool that allows one to embed fonts in html pages via some javascript code. An on-line truetype to "js" font converter is available, as well as a few already-converted fonts. This is work in progress (started in 2008). Here's what it takes to get going: load the typeface.js library and some typeface.js fonts, and proceed like this:

<script type="text/javascript" src="typeface-0.10.js"></script>
<script type="text/javascript" src="helvetiker_regular.typeface.js"></script>

<div class="myclass typeface-js" style="font-family: Helvetiker">
Text here in Helvetiker font...
</div>
[Google] [More]  ⦿

Typeselect

Javascript-selectable typefaces, based on David Chester's Typeface.js. [Google] [More]  ⦿

TypeShow
[Frank Rausch]

Software for testing typefaces and showing them on web sites. Developed by Frank Rausch at LucasFonts in Berlin. [Google] [More]  ⦿

Typesites
[Kyle Meyer]

Kyle Meyer's type blog concerned with web typography. Based in Minneapolis, MN. He also runs Astheria. [Google] [More]  ⦿

Typetester
[Marko Dugonjic]

On-line screen font tester, written by Marko Dugonjic (Croatia). [Google] [More]  ⦿

typo.com

Crystal Waters' guide to creating accessible Web sites. [Google] [More]  ⦿

typografie.dero.name
[Jaroslav „Dero“ Polakovic]

Screen typography advice by Jaroslav „Dero“ Polakovic. In Czech. [Google] [More]  ⦿

Typographie für Webautoren

A fantastic tutorial on typography for HTML and web pages (in German). It deals with selections of quotes and apostrophes in many languages, the minus sign, the hyphen and dash, spaceds, the colon, the dieresis, numbers, and scientific and financial units. [Google] [More]  ⦿

Typographie im Web

A gentle German introduction to web typography. Not many details though. [Google] [More]  ⦿

Typogrify
[Christian Metts]

Tools and filters to improve web typography, such as nice curly quotes, improved spacing between caps, beautified ampersands, and so forth. The original Typogrify is Python code by Christian Metts. Typogrify.module uses Hamish Macpherson's PHP port of that code, php-typogrify. Another URL. Jeff Croft's page on Typogrify. [Google] [More]  ⦿

Unicode icons

A discussion on the use of icons in text in html pages, making use of Unicode-compliant fonts. Some browser comparosons are included. [Google] [More]  ⦿

Unicode test pages

Alan Flavell's Unicode test pages. A great resource for font developers. Flavell works at Glasgow University. Unicode tables, fully listed. [Google] [More]  ⦿

Usable Type

Designed by Andrew Hume in 2004, this site is dedicated to web typogaphy. [Google] [More]  ⦿

Using background-image to replace test

For drop caps and fancy titles, some CSS tricks of the trade. [Google] [More]  ⦿

Using embedded fonts in HTML

A brief discussion of font embedding in HTML pages. [Google] [More]  ⦿

Val Casey

Val Casey, of Frog Design, provides "Notes on Web Design". This piece has some enormous blunders (italics and obliques are mixed up; kerning and tracking are ill-defined), so read it with care. [Google] [More]  ⦿

VisiBone Font Card

Vendor of a Font Card and a Font Chart, as well as a four-page laminated HTML reference card and color reference cards. [Google] [More]  ⦿

W3C

Fonts on the web. Intro, font types. [Google] [More]  ⦿

W3C, Style Sheets

W3C: discussion of style sheets for the web. [Google] [More]  ⦿

w3g.jp

A visual on-line comparison, side-by-side, of your system fonts. [Google] [More]  ⦿

Waller

A discussion of font selection in HTML pages. [Google] [More]  ⦿

Web AIM Fonts

Great pages explaining the dos and don'ts of typography on web pages. [Google] [MyFonts] [More]  ⦿

Web font linking with @font-face

Excellent tutorial for web font linking. Browsers currently supporting this are Safari, Firefox, and Opera. In the style sheets of an HTML page, one needs code like this:

@font-face {
         font-family: "Pur";
         src: 
        local('Pur'), url(http://openfontlibrary.org/member/benweiner/Pur.otf)    format("opentype");
         font-weight: 400;
         font-style: italic;
         font-variant: normal;
         font-stretch: normal;
         }
   [Google] 
 [More]  ⦿

Web Font Myths

Michael Jansson explains away some web font myths. [Google] [More]  ⦿

Web Font Optimizer

Free cod to subset truetype fonts before inclusion on web pages via Web Fonts. [Google] [More]  ⦿

Web Font Optimizer
[Philip Taylor]

Free font subsetting code for web pages. By Philip Taylor, 2009. [Google] [More]  ⦿

Web font stacks
[George Butler]

George Butler provides several useful font stacks for beginning web page designers. Examples include

  • Display serif font-family: Perpetua, Baskerville, "Big Caslon", "Palatino Linotype", Palatino, "URW Palladio L", "Nimbus Roman No9 L", serif;
  • Display geometric: font-family: "Century Gothic", "Tw Cen MT", Futura, "URW Gothic L", Arial, sans-serif;
  • Small sans: font-family: Corbel, "Lucida Sans Unicode", "Lucida Grade", "Bitstream Vera Sans", "Luxi Serif", Verdana, sans-serif;
  • Old style: font-family: "Calisto MT", "Bookman Old Style", Bookman, "Goudy Old Style", Garamond, "Hoefler Text", "Bitstream Charter", Georgia, serif;
  • Clear code: font-family: Consolas, "Bitstream Vera Sans Mono", "Andale Mono", Monaco, "DejaVu Sans Mono", "Lucida Console", monospace;
Please visit his site for more examples and discussion. [Google] [More]  ⦿

Web Typography for Georgian

Web type explained for Georgian. [Google] [More]  ⦿

Web typography still sucks

Article by Forrest L. Norvell on the poor state of web typography. He tells us how he constructs his style sheets (css files), and how he had to struggle with various font names and font choices. [Google] [More]  ⦿

Web typography sucks
[Richard Rutter]

Richard Rutter (Clearleft) and Mark Boulton on web typography. Very useful presentation. [Google] [More]  ⦿

Webfont Maker

Bitstream's 200USD product (free demo) for making .pfr fonts for use with trueDoc (dynamic fonts in Netscape). Comes with 200 truetype fonts. PC and Mac. [Google] [More]  ⦿

Webhead Fonts

Warren Steel has a great discussion and links on fonts in web pages. [Google] [More]  ⦿

WebKit (Safari)

Dave Hyatt talks about the WebKit feature of Safari, introduced in 2007: WebKit now supports CSS @font-face rules. With font face rules you can specify downloadable custom fonts on your Web pages or alias one font to another. This article on A List Apart describes the feature in detail. All of the examples linked to in that article work in WebKit now. Stephen Coles reacts: For the uninitiated, this means any TrueType font can be called by a style sheet and then downloaded by the web browser. This reopens the legal can of worms that falls off the shelf every time we talk about font embedding. Good fonts cost money. Like most software, each user or CPU must be licensed to use a commercial font. When you start talking about every visitor of a web page downloading the font well you enter very sticky territory indeed. John Gruber: The fonts youre allowed to embed legally aren't worth using; the fonts that are worth using aren't embeddable. [Google] [More]  ⦿

WebWork

Great tutorials on all of HTML, including fonts. [Google] [More]  ⦿

WEFT

Microsoft's free WEFT (Web Embedding Fonts Tool). The only tool out there that lets you convert fonts to Embedded OpenType format. PC only! "WEFT lets Web authors create 'font objects' that are linked to their Web pages so that when an Internet Explorer user views the pages they'll see them displayed in the font style contained within the linked font object. " Alternate URL. [Google] [More]  ⦿

Wendy Peck

Author of "Great Web Typography" (Wiley, 2003). [Google] [More]  ⦿

Whatfont Bookmarklet
[Chengyin Liu]

A small free tool, to be placed in the bookmark bar of a web browser. It permits one to see what font is being used in text that is visited by one's mouse. By Chengyin Liu. [Google] [More]  ⦿

Wordmark
[Fahri Özkaramanli]

An on-line tool to showcase the fonts installed on one's computer. Description: [...] Wordmark.it detects fonts installed on your system with a small Flash script written by Marko Dugonjic of Type Tester. It also uses Remy Sharp's font detection script. [...] I'm Fahri Özkaramanli (b. Nicosia, 1980), a freelance visual communication designer living in Istanbul. I received my BA in Visual Communication Design at Istanbul Bilgi University in 2005 where I am a candidate in VCDMFA and currently teaching Web Design and Interactive Web Projects courses as a part time instructor. [Google] [More]  ⦿

Worn type

CSS tutorial on how to simulate worn type. [Google] [More]  ⦿

Zarate

Nice concise help for the use of fonts in HTML. By Belinda Zarate. [Google] [More]  ⦿