I’m pretty content. 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 it. I don’t mourn poorly produced paperbacks when I can read a casual story on screen (and then delete it), nor do I miss huge format newspapers that pile 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 experts in the field yet — and how it still is for the majority of “offscreen” typography. Think sales flyers, 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 screen 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 to 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 be interested in, and by the necessity to read it. If we have to read this time table, contract or assembling instruction we will do so regardless of its looks. 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 designer or improve everyone’s reading experience in general, here are a few things to keep in mind, in any medium:
☞ Make sure the rendering of the typeface you chose is excellent in the size you chose, 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 texts, especially not in narrow columns. Hyphenation on the web is still tricky and algorithms for anything but English poor. Java Script 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” (read up on the quirks of the latter option).
☞ 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. Check how you call the fonts in your font-loading CSS, either as a merged family (via “bold” or “italic”) or individually by its full name.
☞ 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 the type is 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 an appropriate max-width. You can use media queries to switch font styles relative to line-length, or landscape vs. portrait screen orientation. Short lines look and read well in a narrower, 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 are more comfortable to read when set quite compact (= less scrolling). Longer lines need larger line-height (120% of the font-size and more).
☞ 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 text types and sizes, e.g. a family’s text styles for body copy and 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 „“ ’ — and –, especially in large headlines and pull-quotes. Correct quotes and dashes are easy to use on the web (make sure you spec UTF-8 encoding). These kind of things stand out saliently and contribute to the still prevailing skepticism whether good typography on the web is possible at all. It is.