Choosing Text Fonts for the Web
How to select fonts for extended body text on web pages
Choosing a text font for use on the web can be a tough task. While many typefaces can find a role on-screen at larger sizes, the reverse is certainly not the case. Selecting type and setting text for extended reading has many specific requirements, regardless of the medium. Reading on screen, and specifically in a web browser, brings additional considerations beyond those of legibility and readability, and it’s those considerations we’re going to tackle in this article.
What is a text font?
What makes a typeface good for setting text? Unlike typefaces that we would use for display purposes, in order to be useful as a text font certain criteria must be met first. Our monthly Rising Stars newsletter has a regular slot for text fonts. In order to qualify, a type family must fulfill these criteria:
Several weights and styles. A text font family should offer several weights and at least one italic, in order to be able to handle a complex hierarchy of information with a clear distinction in the text.
Small caps and oldstyle numerals. It should ideally include true small caps and both proportional (oldstyle/lowercase) and tabular numerals. True small caps are capitals designed to match the proportions of lowercase characters, rather than simply scaling full-size capitals down — the latter being a practice that results in thinner, spindlier strokes and too-wide characters. Proportional numerals are number characters that echo the appearance of lowercase letters: instead of sitting directly on the baseline, some have descenders that hang lower, such as the 3 or the 5. This makes a string of numbers less disruptive during immersive reading. Tabular numerals have a fixed width, and are intended for vertical as well as horizontal reading in financial documents. If your site includes a table of products with prices offered for comparison, tabular numbers will be important.
Multilingual. Coverage for multiple languages that use the Latin alphabet, with a complete set of diacritic characters. You may be writing in English, but can you confidently say that your readers will be reading in English? Automatic translation services may still not be perfect, but they are widely used. Comprehensive language support will ensure that the typography doesn’t get lost in translation, even if the language itself is a little rough.
Text fonts on the web
A type family that will be used to set extended body text on web pages has a specific set of requirements in addition to those of a text family used for print work, and independent of the particular requirements of the website’s design brief (we’ll get to those in another article).
Designed from the pixel up. The best fonts for the screen have been designed from the ground up for just that purpose — pixels should be in the font’s DNA. The two system fonts that all web designers and typographers are already familiar with, Matthew Carter’s Georgia and Verdana, used the pixel grid as their starting point. The curves were adjusted to the outlines as formed by the pixels, rather than the pixels being manipulated to fit within the shapes of the curves. Most text fonts are still designed for ink on paper first, and adapted for screen second. Designers creating text fonts within the last 10 to 15 years will more likely have been sensitive to the concept of the pixel grid, if not actually deliberately working within its constraints; therefore, restricting your search to recent releases will help you eliminate fonts developed solely for the printed page.
Proportion. The principle of a tall x-height applies as much to screen typography as it does to print. Additionally, slightly wider letters and looser spacing is often a good idea.
Contrast. A typeface design with significant contrast between the thick and thin strokes will struggle to render well at small sizes. Thin strokes simply have fewer pixels, and therefore less context for hinting should the stroke land off the grid.
Family members. When choosing a text font family for the web, the family should be comprised of at least two weights, with an italic or oblique for each weight, making four fonts altogether. This is especially important for web typographers; the bold or italic members of a font family should be used for <strong>, <em>, <b> or <i> tags, otherwise the browser will artificially embolden or slant the characters creating an ugly or blurred effect.
Special features in a separate font. For maximum browser compatibility, some of the features mentioned above should be available in a separate font. The CSS properties for invoking OpenType features are currently only supported in the most up-to-date browsers. If these typographic details are important, having small caps in a dedicated font will allow you to create a CSS class using the small caps font, which you could then apply to single words or blocks of type using the <span> tag.
There’s no substitution for thorough research and testing. Designers working in print have long considered a new text font an investment in both time and money, and will take time to make the right choice, depending on the types of jobs they typically take on and the typographic tasks they need to fulfill.
Research the designer and foundry, and pay attention to how the font is described, the development process and what they say about their own expertise and history. This will rarely be superficial marketing blurb, and an investment of time and labor in a font will usually be accompanied by a decent and thorough explanation of its qualities. If there’s not much information supplied, find out what others say about a font.
As already mentioned, MyFonts regularly highlights good text fonts in our Rising Stars newsletters, although these typically emphasize type for print. Our interviews with type designers, also published as newsletters, often feature designers whose entire practice is built around the finely crafted details of text fonts, and are another great resource for exploring the topic. Most recently, we talked to Hoftype’s Dieter Hofrichter who has, in the last year, just release several outstanding text fonts; but we have also interviewed the likes of Gerard Unger who was among the first type designers to create digital fonts, and TypeTogether (José Scaglione and Veronika Burian), whose Athelas typeface is one of Apple’s iBooks core fonts. We’ve put together this list of contemporary type designers working in text face design, this would be a good starting point for any research.
As more and more reading moves off the printed page and onto screens, this aspect of design is going to become much more important. Let’s do it right.Back...
Feature article, Technique
Posted 29 Jul, 2011 by anthony-noel
Filter articles by category:
Filter articles By tag:
- Autotranslate (1)
- CSS (3)
- Drop caps (1)
- Fashion (1)
- Font stacks (1)
- grunge effect (1)
- hand drawn (1)
- Hosting (1)
- Illustrative type (2)
- Licensing (1)
- Line height (3)
- Logotype (1)
- natural media (1)
- OpenType (1)
- Print design (1)
- Publishing (1)
- Sans serif (1)
- Site roundups (1)
- Subsetting (1)
- Web design (2)
- Z-index (1)
Layering Type with CSS Z-index
Create colorful standout text effects by using the CSS properties z-index and position to layer…
Webfonts for Print Designers
For the traditional graphic designer, there's no better time to start discovering the potential of…
Illustrative Type in Use
Recreating the look of hand-made type and lettering digitally is a great way to soften and…