I am sanguine. Almost all the things we got accustomed to in everyday (printed) typography are now also possible on the web and more if you only know and care enough about them. I don’t mourn poorly produced paperbacks when I can read a casual story onscreen (and then delete it), nor do I miss huge-format newspapers that piled up in my wastepaper and were always too large to read on trains anyway.
Of course, not everything we see and read on screens is fine typography, but that’s how it was in the early days of DTP, too—people using a medium and software who aren’t yet experts in the field—and still is for the majority of “offscreen” typography. Think sales fliers, cereal packaging or patient information. What we gained with modern web technology is the ability to have the layout (and even fonts) automatically react to outside conditions like format, device capabilities, user preferences or even reading distance. Design is no longer about tailoring invariable content to one specific embodiment; the web forces us to think about typography in terms of parameters, and get clear about content versus form.
Typography hits us on two different levels: by the look of it, telling us if this is something we may like or should interest us, and by the necessity to read it. If we have to read this timetable, contract or assembly instructions, we will do so regardless. We may find it more or less comfortable to read, but our brains are incredibly capable of deciphering the most cryptic glyphs in context. If you want to attract designers or improve everyone’s reading experience, there are a few things to keep in mind, in any medium:
• Make sure the rendering of the typeface you choose is excellent in the size you choose, well-spaced and of even color. Set font-smoothing options to “subpixel-antialiased” or “auto” for small text on light background for better legibility; “font-smoothing: antialiased” (full-pixel greyscale antialiasing) looks good in sizes above 60px.
• If you don’t have good control over hyphenation, don’t justify text, especially in narrow columns. Hyphenation on the web is still tricky, and algorithms for anything but English are poor. JavaScript hyphenation is an option.
• Make use of the font’s built-in kerning. Switch on kerning (and other features like ligatures) via “font-feature settings” or “optimize-legibility.”
• Beware of faux-bold and faux-italic. Don’t use the styling functions/tags if you don’t have the respective font available on the site, either in a merged family or as individuals.
• Text doesn’t have to be large to be readable—dare to use sizes smaller than 24px, but check the rendering across all browsers and platforms if smaller than 16px. Keep the apparent size (large or small x-height) of the font in mind.
• Line length (and other measures) should scale with your screen size, but set a max-width. You can use media queries, also, to switch font styles relative to line length, or landscape and portrait screen orientation. Short lines look best in an economic typeface, longer lines in a wider font.
• Adjust line height and margins in relation to line length. Text on small screens in short lines need only a little bit of leading and padding and is more comfortable to read when set quite compact (less scrolling).
• Size is relative. The closer we hold a text to our face, the smaller the nominal font size, line height and margins can be. (Check universal measures like arc minutes—size in relation to reading distance.)
• Try size-specific variants of a type series for different font sizes, e.g., text styles for body, display styles or narrow variants for headlines. Multiple widths of a family can be used to accommodate longer and shorter headlines, for instance.
• And lastly, mind ortho-typography sandtraps like “” –, especially in large headlines and pull quotes. Potentially easy to fix and more the result of slacking editorial processes, these kind of things stand out saliently and contribute to the skepticism about typography on the web.
*
This article originally appeared in the February 2015 issue of Print.
Indra Kupferschmid (@kupfers) is a German typographer and professor at HBKsaar, University of Arts Saarbrücken. Fueled by specimen books, she is occupied with type around the clock in all its incarnations—webfonts, bitmap fonts, other fonts, type history, DIN committees, writing, designing and any combination of these. She is co-author of Helvetica Forever (Lars Müller Publishers) and other typographic reference books.