← Typography: Rules and Common Mistakes (3/4)TOCUsability Principles for Modern Websites →
With literally more than a hundred thousand typefaces to choose from, finding the right one for a specific purpose may seem like a daunting task. The common mistake is to choose a beautiful typeface, one that looks attractive, thus favoring form over function. This is putting the cart before the horse. However strange this sounds, the “look” of the typeface should be your least concern. But if looks are not so important, what do we base our decision on? The most important criterion is the context in which the typeface will be used and the purpose it will serve.
Before getting into the nitty-gritty of choosing a typeface and layout, always read the text first if possible. This may seem obvious, but the typeface and its presentation should be determined by the meaning of the text itself. There’s an obvious problem, though. In the era of the Web, we often deal with two very different kinds of narratives:
Enacted narratives: the ones we know and love. The meaning and substance of the text is known by the designer beforehand. The audience starts at the beginning and reads to the end, becoming enlightened along the way.
Emergent narratives: this is content that will be generated after our design is complete. Think of social networks, in which everyone contributes text, or websites with a CMS or blog engine in which new copy is constantly generated. The audience might skim this content, jumping around the page and website in leaps and bounds, gathering nuggets of meaning along the way, pausing only when something grabs their attention.
For enacted narratives, we can read the text beforehand, understand its meaning, tone and nuances, and we can choose the type accordingly. But what do we do for emergent narratives? Well, we do the best we can. Look at the brand and environment. Imagine the context in which the text will be read. Choose a type that enriches the meaning of the text but fades into the background rather than clamors for attention.
Marko Dugonjic’s Typetester is a popular Web application that allows you to test different typefaces, leading and measure on the screen and choose the best one.
Virtually every designer of typefaces creates a font with well-defined criteria and for specific functions. It is up to the website designer to recognize that function before choosing the typeface. At one end of the spectrum are the workhorse typefaces designed to perform well in small sizes and unfavorable conditions (the hiking boots), and at the other end are the display typefaces (the dancing shoes).
Although they may look similar, text and display typefaces reveal many differences when scaled up.
Workhorse typefaces have sturdy features: conventional and easily recognizable letterforms, generous letter spacing, solid serifs, clear open counters, a tall x-height and ink traps (cut-out areas that prevent corners from clogging up from spreading ink). Ink spread is a non-issue on the Web, but the other factors apply. Display typefaces are much more delicate and have considerably more leeway in their shapes. There is a world between these two extremes, and many of the typefaces at either end were designed for very specific applications. In the middle are the very important day-to-day typefaces that are fit for normal text but suitable also for headlines.
Workhorse typefaces are more flexible than display typefaces. To some extent, one can wear hiking boots to a posh reception. If you combine them with casual jeans and a stylish shirt and jacket, you might get away with it, just as workhorse typefaces might look acceptable in headlines if you adapt their spacing and use them in combination with the right design elements. But you wouldn’t climb a mountain in dancing shoes. Sure, you could, but don’t come crying after. Likewise, never use display typefaces for body text.
Of course, a lot of the above has to do with type size. With the advent of scalable digital type, any font can be used at any size, and the time-honored mastering process is abandoned. As a result, many designs suffer in this age of convenience: many display fonts are too ornate or fragile to be displayed at a small size, and text fonts are clunky and dull when set large.
Optical size mastering isn’t important only for print. When designing for the screen, similar problems arise. The stroke thickness to pixel size ratio is crucial. Delicate shapes break up and hairline serifs disappear when type is so small that fine lines shrink to less than a pixel wide. Fonts with a short x-height become hard to read if the body of the type is not rendered with enough pixels, as do unconventional or intricate shapes, closed counters and tightly spaced letters.
Today, digital typefaces are available in three different font formats: OpenType, PostScript Type 1 and TrueType. This can sometimes be a little confusing. Knowing if the file format of your font is compatible with the software you are going to use it in is very important.
In general, if you are using a modern image editing application, you will experience hardly any problems with the OpenType format. The two main benefits are its cross-platform compatibility – you can work with the same font file on the Mac, Windows and other computer systems – and its ability to support extended character sets and layout features. They provide rich linguistic support and advanced typographic control. Currently, all Adobe applications (InDesign, Illustrator, Photoshop etc.) provide advanced OpenType feature support, such as automatic substitution of alternate glyphs, automatic ligatures, small capitals, swashes and old-style figures.
Note that OpenType fonts can be installed and used alongside PostScript Type 1 and TrueType fonts. Because those fonts rely on OpenType-specific tables, non-compatible applications running on systems prior to Mac OS X and MS Windows 2000 are not able to use them without system services such as ATM. And even on the newest computers and latest operating systems some programs are still lagging behind.
A PostScript Type 1 font can hold up to 256 glyphs; an OpenType font file up to 2562 or 65,536.
A typeface is more than what you see on the keyboard. In addition to the alphabet, numbers and assorted punctuation, the average font also includes a series of “hidden” characters. They can be accessed via the shift and/or option key or through special menus. The approximately 250 glyphs found in standard typefaces are sufficient for display and basic text use. However, just as you can’t get away with serving a burger and fries at a fine restaurant, good typography requires quite a bit more. If you are considering a certain typeface for professional typesetting, make sure the following extra features are available.
For instance, small capitals (also called small caps) are a little taller than the x-height. They can be used for acronyms or to avoid putting words in all capitals, which stands out too much in running text. They can also be used for emphasis or for the first words or line of a chapter or paragraph. Petite caps are even smaller: exactly as high as the x-height. Some designers use them for typographic experiments like mixed-case setting (of lowercase and uppercase forms), also called unicase setting.
Professional typesetting requires the presence of small caps, several sets of numerals, extended ligature sets, assorted expert glyphs, and it never hurts to have alternates and swash characters available. On the image: Capsa expert characters.
Standard typefaces mostly come with only one set of numerals, yet different styles are needed for professional typesetting. Proportional hanging figures blend in perfectly with running text; proportional lining figures match text in all caps; tabular figures are needed for setting tables and number crunching; and superscript and subscript figures are for setting fractions and scientific text. This last type of text requires not only superscript and subscript characters but special mathematical characters and several types of brackets as well.
When choosing an appropriate typeface, make sure to check that the font family is complete and includes all glyphs you may need in your design. For instance, some cheap font families may not include German umlauts (ä, ö, ü) or Eszett (ß).
In fact, ligatures are needed when an overhanging part of a character bumps into the next character. Most digital fonts used to include only a limited number of “f” ligatures, which was insufficient. An extended ligature set guarantees that any unusual letter combination will have an aesthetically pleasing glyph. Some designs include quite unusual ligatures, often to add some swoosh to the type. Swoosh can also be added with swash characters, be they initial capitals or initial and end characters.
Take a careful look at a typeface before purchasing it. To analyze a type family, carefully consider how the glyphs look at a big font size (100 to 150 points). Also look at how various members of the family will look in the size you will typically use them in. Are the italics readable? Are the small-caps clear enough? How do the bold and italics work together? Is it easy to read a word like “rococo”? Can you distinguish between the 0 (zero) and o (small o) in the word “lol0”? What about ligatures in the words “floria” and “Eigenschaft”?
The ongoing debate about serif versus sans serif on the Web has to do with legibility. Vociferous advocates are on both sides of the argument. As screen sizes increase and resolutions or pixel density increase, the argument that less fussy sans serif forms aid legibility loses some merit. As Jost Hochuli demonstrates in Detail in typography, serif fonts may be easier to read, but many people’s familiarity with and attachment to commonly used fonts on the Web may make these typefaces more legible anyway. However, even typefaces designed specifically for the screen can appear very different across platforms. What is highly legible on one screen may not be on another.
Here are some key factors in choosing typefaces for legibility on the screen:
Familiar letterforms. Choose a face with customary shapes. Avoid “quirky” typefaces that break convention. Never set body copy in all capitals or all small-caps, and be careful with italics and obliques and other variations of the normal shape. For example, ascenders and descenders are important for legibility; choose a font whose ascenders for letters such as “b” and “d” rise above the x-height, and vice-versa for “p” and “q”.
Choose fonts that were designed for the screen. Most were not, either not being designed for the screen or not even optimized for it by the foundry. If a font is not hinted properly, screen performance will suffer. For example, the bar in the capital “A” can disappear at small sizes, as do serifs and other delicate glyph components.
True fonts, not synthetics. Consider the available fonts of the typeface you wish to use. Many common typefaces have only regular, bold, italic and bold italic fonts available. Whatever stylistic variants are available will have been specifically designed.
Browsers are able to synthesize fonts. A common example is synthetic italics or, more properly, obliques (regular type set at an angle without changing the letterform, to mimic a true oblique). The ubiquitous typeface of Apple, Lucida Grande by Charles Bigelow and Kris Holmes has no italic or oblique font. That doesn’t stop people from instantiating one with CSS, though; the browser synthesizes it, and to our eyes it looks awful. Small caps is another example; none of the core Web fonts have a small-caps version. However, we use synthetic small-caps sometimes. The trick is to avoid synthetic fonts, but use your discretion and know when to do it and why.
Generous x-height. Again, this is the distance between the baseline and (typically) the top of a lowercase “x” (hence the name) compared to the overall body height. A generous x-height is critical for legibility, especially on the screen. Georgia and Verdana both were designed specifically for the screen; both have a generous x-height.
Comfortable letter spacing. It is possible to adjust letter spacing with CSS using the letter-spacing property; a font that already has good letter spacing is a great starting point.
Comfortable word spacing. This is the gap between words. It can also be adjusted with CSS but should be easy on the eye without adjustment.
When all other requirements have been met, you can finally pick the typeface whose “looks” you like the most, the one you find most beautiful. But as you now know, this is actually the last step in the selection process. Understanding the importance of the preceding steps is vital. A typeface that truly serves its purpose will get you farther than one that is merely beautiful. Unless the font performs well on your operating system, comes in all the required languages, has a complete character set, is part of a suitably large family and has a design that evokes the right atmosphere and cultural connotations, your message could be misunderstood.
Combining fonts is an art. Unless there’s a very good reason to use more, fewer is always better. Many designers use the same typefaces time after time, relying on the styles within each font for variety. Even more rely on just a handful, no matter how many they download, because those few are tried and trusted friends. So it is with the Web.
We may have hundreds of thousands of typefaces at our disposal in the years to come, but with a few well-loved and well-understood families, most designers can never go wrong.
Combining serif and sans serif is a well-worn path that can work wonders. When combining them for body text, be sure to match the x-height.
Georgia and Verdana by Matthew Carter at the same size. Verdana seems larger.
Georgia with Verdana at a smaller size. The x-height matches. They seem comparable in size.
Just as opposite colors on the color wheel are complements, so it is with type. However, tread carefully. The contrast between certain fonts can be just as harsh as the contrast between blue and yellow.
Keep in mind that computer displays have much greater black/white contrast than the typical printed page. Therefore, many designers prefer off-black to pure black on white backgrounds 1. Likewise, it is usually more elegant to use very light gray instead of pure white on black backgrounds. To achieve quality typography with CSS, aim for the smallest effective difference and “make all visual distinctions as subtle as possible, but still clear and effective 2”.
Try alternate styles of the same face as a starting point. Use a bold as a display face for headings, small caps or caps for sub-headings, an italic for further sub-headings and a regular for body copy. Experiment with style to find the right hierarchy of elements on the page.
If you do get a little experimental with your font stacks, beware of baseline variations between fonts on different platforms. You may think Helvetica Neue and Arial would have similar baselines but they don’t. The differences in viewing a page in Windows with Arial and on OS X with Helvetica can nudge the grid alignment askew.
Now that we’ve considered key typographic concepts, terms, best practices and practical recommendations, let’s look at typography from a different perspective. To achieve beautiful, well-rounded and effective typography, one needs to create properly formatted and carefully written copy. That is, if you want to leave a great impression, you need to polish your writing and pay close attention to the smallest typographic details.
A widow is a short line or single word at the end of a paragraph. An orphan is a word or short line at the beginning or end of a column that is separated from the rest of the paragraph. Widows and orphans create awkward rags, interrupt the reader’s flow and impair readability. They can be avoided by adjusting the type size, leading, measure, word spacing and letter spacing or by entering manual line breaks.
Unfortunately, there is no easy way to prevent widows and orphans with CSS. You can use a jQuery plug-in called jQWidon’t or the Typogrify WordPress plug-in which places a non-breaking space ( ) between the last two words of a text block 3.
Be sure to keep the rag (the uneven side) balanced, without any sudden “holes” or awkward shapes.
When setting a block of text that is not justified, be sure to keep the rag (the uneven side) balanced without any sudden “holes” or awkward shapes. A bad rag can be unsettling to the eye and distract the reader. A good rag has a “soft” unevenness, with no lines that are too long or too short. There is no way to control this with CSS, so to get a good rag you must make manual adjustments to the block of text.
Another solution would be automatic hyphenation and justification. At the moment, though, modern browsers have a very simple hyphenation mechanism that doesn’t allow for the kind of sophisticated justification we know from print design. Many variables in display environments make it impractical to hyphenate manually [for instance, using the soft hyphen (­)].
On the Web, justified text is usually more difficult to read and scan than left-aligned text. Some server-side and client-side auto-hyphenation solutions are phpHyphenator 4and Hyphenator5. Keep in mind that justified text usually doesn’t work as well with sans serif typefaces as with serif typefaces and it works best with a narrower measure.
An example of good and bad quote presentation. Hang the quotation marks outside of the margin of the body text so that the visual rhythm is not broken.
Emphasizing words without interrupting the reader is important. Italics are widely considered to be the best form of emphasis. Other common forms of emphasis are bold, caps, small caps, type size, color and different typeface. No matter which you choose, try to limit yourself to one. Combining, say, caps, bold and italics would be disruptive and look clumsy.
Here are some different ways to emphasize with CSS (keep in mind that the font-variant style only works if the font supports the small-caps variant):
span {
font-style: italic;
}
h1 {
font-weight: bold;
}
h2 {
text-transform: uppercase;
}
Good typographic practice is to put pull quotes, bullets and numbers outside the flow of text. Indenting bullets can disrupt the flow of text. With hanging punctuation, text and quotes are highlighted and appear more sophisticated and legible. In your CSS, make sure to hang the punctuation outside of the margin of the body text. For pull quotes, give the CSS text-indent property a negative value (which will depend, of course, on the font size).
blockquote {
text-indent: -0.8em;
font-size: 12px;
}
For the same effect with ordered (ol) or unordered (ul) lists, use the list-style-position property to push bullets outside the left rung. This technique is supported in all major browsers:
ul, ol {
list-style-position: outside;
}
Indented lists can also serve as calls to action as people skim the page. If you do use an indent, make sure you do it deliberately, for a specific purpose.
The ampersand is essentially a series of curves and demonstrates nice variation from font to font. With CSS, you may want to choose a special font for it. The Simplebits article “Use the Best Available Ampersand 6” offers an interesting and effective approach to choosing the best ampersand by setting up your font family of choice.
(X)HTML:
<p>pixels <span class="amp">&</span> text</p>
CSS:
span {
font-family: Baskerville, Palatino, "Book Antiqua", serif;
font-style: italic;
}
Simplebits has a beautiful and elegant ampersand in its slogan.
If you need to interrupt yourself, do it with an em dash (—) instead of a pair of hyphens (–). This is a top pet peeve of countless editors.
Quote “this way” (with quotation marks that look like 66 and 99) and not "this way". Open and closed quotes are not the same. Please notice that the choice of quotes varies depending on the language in which it is used. For American English, quotes are normally surrounded by double quotation marks, while nested quotes use single quotation marks. For British English, it can be either way: doubles then singles, or singles then doubles.
In CSS, you can style the appearance of quotes using the :lang pseudo-class:
:lang(en-us)>q {
quotes: "\201c" "\201d" "\2018" "\2019";
}
:lang(en-gb)>q {
quotes: "\2018" "\2019" "\201c" "\201d";
}
Modern browsers support this method of styling, so it is highly recommendable to consider regional differences when using7 smart quotes, and avoid the so-called “dumb” quotes. For instance, in Arabic, Dutch and German language „this way“ (99 and 66) is correct and in Russia, France and Italy guillemets – «this way» – are more common.
The antiquated practice of double-spacing between sentences seemed finally to be laid to rest thanks to Web typography. Just a few years ago, committing this font faux pas required manually inserting a blank ASCII space. Now, some content management systems will actually format the double-spacing for you if you let them. Don’t give them the chance! Only use single spaces between sentences.
Although accent characters can be difficult to type in or copy in HTML, paying attention to these non-standard characters is an important courtesy and sign of respect. Many tables listing character entities, including the one on Wikipedia8, are available for your convenience.
Word choice in interfaces is extremely important and can make or break the functionality of a website. The presentation of those words is equally important. Unstyled letterforms give no indication as to what users should interact with.
The image above compares text as content and text as user interface. On the left is unformatted text, and on the right the text functions as a user interface. Notice the different colors and weights of the text, the ample spacing between paragraphs and lines and the links that stand out and are easy to identify.9
If you want your content to convey a function as well as a meaning and to help your users understand how they are supposed to achieve their goal with your text, you’ll have to include subtle visual cues like these.
In his presentation entitled “Nine skills that separate good from great designers”, Cameron Moll discusses the importance of treating text as user interface26.
Quotes highlight excerpted text. They are always used for testimonials and sometimes for blog comments, but most importantly they are used in paragraphs of text. Not all quotes are the same, though. Pull quotes are short excerpts of text taken straight from the page itself. They pull a bit of text out of the flow of content and repeat it in a prominent location on the page to grab user’s attention.
Like pull quotes, block quotes (or, more precisely, block quotations) are set off from the main text as distinct paragraphs or blocks. Unlike pull quotes, they contain a passage from an external source that does not appear elsewhere on the page. Block quotations are usually set within the main flow of text. “Normal” quotes cite content from other sources and are incorporated in the main flow of content rather than set apart.
A vivid block quote element on Idsgn.org.
According to HTML specifications, three elements are available to semantically mark up quotations: <blockquote>, <q> and <cite>. While all mark up quotes, each is meant for a different use.
<blockquote>, is used for relatively long quotations; it is a large section of text set apart from the main body. This text usually comes from an external source, but can also refer to your previous article.<q> is used for short inline quotations:<p>Andrew answered <q>fonts</q>, but Steven said <q>typefaces</q></p><q> element using CSS. This is helpful because languages have different quotation marks (see the section “Do not use dumb quotes” above).<cite> defines an in-line citation or reference to another source:<p>But then <cite>Andrew</cite>said <q>No, I think these fonts work better</q>.</p>Quotes, braces, lines, indentation, quote visuals, dialogue boxes, balloons – there are a number of paths a designer can take to create a beautiful and memorable quote. Design solutions vary in colors, forms and sizes. Different techniques produce different results; however, it is important that it is clear to the visitors that the quote is actually a quote, otherwise it becomes hard to keep track on the content. Also, use quotes sparingly; they should play a secondary role, supporting the main content, not the other way around. They should be a pleasant diversion, not a central design feature.
As pretty as they are, pull quotes have inherent problems in the way they are placed in the middle of HTML content. To people viewing the page in CSS-enabled browsers, all may be hunky-dory. But for those who have disabled CSS or are using screen readers, pull quotes appear slap bang in the middle of the main content. A quote suddenly appearing between two paragraphs but not connected to them will most certainly break the flow and confuse readers.
If your content has pull quotes, providing a little extra information for users who stumble on them is probably wise. In (X)HTML, you could include a message, hidden from view with CSS, that says “Start of pull quote” before the quote and “end quote” after it. You could even have something like the “Skip navigation” link that lets users skip the pull quote and continue with the main content.
Finally, here we cover some of the most common typographic symbols, their uses and good practice when dealing with advanced typography and special kinds of text.
The hyphen ( – ) is one of the most used typographic symbols. This punctuation mark divides and joins words. The hyphen is not a minus sign ( – ) or a dash ( –, —, — ). The soft hyphen (­) appears at the end of a line of text to indicate that a word continues on the next line. “Soft” refers to the fact that the hyphen should disappear if the entire word ends up being written on one line. The hard hyphen wraps text and joins words. “Hard” refers to the fact that the hyphen must always appear, even when the hyphenated term appears on one line (self-respect). Unfortunately, at the moment, hyphens have to be inserted manually in HTML.
En dash and em dash: the former is longer than a hyphen and half an em dash. It indicates a range, such as for dates, numbers, game scores and pages (2:00–3:00 p.m.), or groups compound adjectives (Meyer–Stevenson Lexicon). The HTML entity for the en dash is &8211;.
The hyphen, en dash and em dash.
An em dash is 1em wide. It indicates an interruption in speech (I was debugging the style sheet – wait a second; what was he saying about IE6?). The HTML entity is &8212;. Note that some dashes benefit from having spaces around them; for instance, the em dash can be surrounded by a thin ( ) or hair ( ) space 10.
Curly single and double opening quotes are not the correct symbols for feet and inches. A single prime should be used to represent feet and minutes (′ – not supported in HTML 4.01), and a double prime for inches or seconds (″ – not supported in HTML 4.01).
To indicate missing words in a quotation or a thought that trails off, use an ellipsis (…) instead of three consequent periods. Three periods are not an ellipsis. This is a very common mistake because they look so alike, but semantically they are different.
To recap, here is a reference table of the most common typographic symbols. Using the numeric Unicode references is good practice because non-numericals may not be parsed properly11 (for example, named entities are bound to a DTD and do not always translate, so an RSS parser may have problems with them).
& Ampersand (&): used in many different ways in regular written text, programming languages, etc.
© Copyright sign (©)
® Registered trademark (®)
§ Section sign (§): when used twice, §§ means ’sections’.
’ Apostrophe (')
‘’ “” Quotation marks ( ‘ ’ “ ”)
* Multiplication sign (×)
° Degree sign (°)
W One-quarter fraction (¼)
V One-half fraction (½)
X Three-quarters fraction (¾)
‰ Per mille sign (‰)
€ Euro sign (€)
… Ellipsis (
)
– En dash (–)
— Em dash (—): used to indicate a sudden break in thought.
— Horizontal bar (―): long dash introducing quoted text.
White space: This is not a symbol. It is nothing but empty space. But the way you exploit it does make a difference, especially with typography.
In its essence, typography is a powerful medium that allows for precise, effective communication. On the Web, typography can be used to enhance content, turning lifeless chunks of data into vivid, elegant conversations.
But one has to thoroughly consider numerous typographic details, not only typeface and the context in which it will appear, but also measure, leading, tracking, contrast and font size. Composition aids such as grids and vertical rhythm provide a powerful framework for creating harmonious layouts in which typography can breathe and serve its purpose.
Proper paragraph formatting, judicious use of white space and typographic hierarchy and scale can improve the structure of text, making it easier to scan and read. Besides, close attention to the quality of body copy, including punctuation marks, empty spaces and special characters, contributes to a better reading experience and has a major impact on the usability of the overall design. Because Web typography is all about communication with users, you better make sure that your conversation is rich and meaningful: your readers will appreciate it.
—
← Typography: Rules and Common Mistakes (3/4)TOCUsability Principles for Modern Websites →
The Smashing Team loves high-quality content and cares about little details. Through our online articles, books and ebooks and Smashing Conferences, we are committed to stimulating creativity and strengthening the Web design community’s creative forces.
Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!
Company Description hetras is the first company to build a fully cloud-based application for hotels and global chains of all sizes with offices in Zell am…
Company Description hetras is the first company to build a fully cloud-based application for hotels and global chains of all sizes with offices in Zell am…
The Smashing Book #4
You can now pre-order the Smashing Book #4 in PDF, ePub and Kindle formats. Learn more...
The Smashing Library
Get access to all digital formats of published Smashing eBooks and printed books. Learn more...
The Smashing Workshops
Andy Clarke will be hosting a workshop in Freiburg on the 25th of June. Learn more...
With a commitment to quality content for the design community.
Smashing Media Made in Germany. 2006-2013. Contact Us Impressum
No comments have been posted yet. Please feel free to comment first!
Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!