Web typographers: embrace technical constraints!

There is a lot of talk about how web typographers must adapt to the contemporary demands of dynamic content and fluid designs. What is often not said is how primitive and laborious the techniques we have at our disposal still are. There are some interesting parallels with metal type, photo typesetting and the early days of desktop publishing – and the skills learned to overcome the challenges of those technologies are still relevant for today’s modern web and screen based typographers.

Advertisement

The return of optical sizes

Optical sizing means that a font has been optimised for a specific size, and was a common practice in the days of metal type. If you could take a tiny piece of 12 point lead type, somehow magically enlarge it to 96 points, then compare it with an actual piece of 96 point type, it would be obvious that the characters actually have very different outlines.

Apart from the fact that scaling metal type up or down from a single master shape was impossible in those days, the typecutters understood that smaller type needed to be a different beast compared to its larger siblings. The possibility to scale letters from a single master came with the transition from metal type into photo typesetting, and thence into digital type. At some point, the insight that lettershapes needed to be subtly distinct for different optical sizes was forgotten, and it’s only been in the last few years as more type designers have delved into the history of typography, that fonts optimised for larger or smaller sizes have really started to appear again.

There’s lots going on beneath the surface of optically sized fonts to make them better suited for larger or smaller setting. Letterspacing will typically be tighter in a headline setting; characters might be slightly narrower, with a fractionally shorter x-height; headlines look better with less interline spacing. For text sizes, the characters tend to be more robust, the letterspacing should be a bit wider. While these are often details that the web typographer can control, the designer of the typeface will usually have incorporated their preferences into the design.

Designers working with optical sizing often offer their fonts in either display or text varieties, sometimes even designing for a particular recommended point size. The Acta family by DSType is a good example of the former. Acta Display has a noticeably greater contrast between the thick and thin parts of the stroke, which makes for exquisite headlines, but try using the display version for sizes below, say, 18 pixels and that contrast will start to break down and legibility will be a real concern. Compare this with the standard version of Acta, and it can be seen that the contrast is less dramatic and that there are no thin parts to the stroke.

Sometimes a type designer will release versions of the font designed for a specific pixel size. Grumpy from the Finnish foundry Suomi is a family of six fonts, each designed and named for its optimal size, starting at 24 and going up to 99. As the sizes get larger, the contrast gets more extreme. It’s intriguing to think that a web typographer could use a different font for each <h> tag.

Lián Type’s Reina does something similar, but with a version designed for 12px settings, it must the designer’s intention that this font can be used for longer settings – maybe for call outs or paragraph titles; we wouldn’t recommend it for extended, immersive reading.

Optical distortion

The introduction of photo typesetting brought with it more than the possibility to scale a character to any size; by shifting the plane of the negative in relation to the photographic plate, it was suddenly possible to create ‘italic’ forms from the regular upright – although in actual fact, this was simply an oblique version, with none of the specific characteristics of a proper cursive letterform.

The lesson for web typographers? Photography isn’t involved anymore, but when a browser is told to apply an italic to a certain bit of text and no proper italic font is available, it applies a geometric transformation to the upright character; a far from ideal outcome for the typographically rigorous designer. The same is true for some of the other stylistic instructions a browser might interpret: to make a character bold, the browser will add extra pixels to the outline, bearing no relation to the designer’s intended bold.

To counter this, the web designer must compile their font family declaration so that it includes the correct bold, italic and bold italic versions of a font. Remember that standard HTML tags for headings will apply bold, so either reset that or use the correct font weight for those headings.

At MyFonts, our webfont kit builder has a handy style linking tool, which enables you to specify which font to associate with <em> and <strong> tags.

To style link your @font-face declaration yourself; include the font-weight and font-style properties for each font. The browser will then use the correct font whenever an italic or bold is called for.

A font for every typographic function

Before the days of OpenType, font files had a much smaller limit to how many glyph characters they could contain. It was common for an extended font family to include separate fonts for small caps, lining/tabular numerals, Cyrillic and Greek scripts, specialist maths symbols, alternate glyphs, ornamental swashes and discretionary ligatures ... all the stuff that users of OpenType fonts now very much take for granted and expect to be included within one font file. But browser support for all of this OpenType goodness is still far from universal, which means that if web typographers want to set a typographically rich page of HTML text, they need to access many of these features in separate fonts – just like the first users of Pagemaker and Postscript fonts had to.

While it’s not quite as bad as all that – our kit builder can create subsets for specific language groups from OpenType files for example – until browsers (and users) are all supporting the latest CSS standards, web typographers have to use workarounds and hacks to make sure their readers get the best possible screen reading experience.

If you’re shopping around for a feature-rich text font, make sure its small caps can be found in a separate font, specify it in the font-family CSS property and apply it to the first few words of a paragraph using a <span> tag.

One of our favourite tricks is to utilise the fallbacks in a font stack to substitute characters from one font for another. Take a calligraphic typeface such as Carolyna or Belluccia. In both cases, the designer has thoughtfully included Swash and Alternate versions in separate font files. Setting a whole headline in a Swash font is a no-go because all those flourishing swirls clash with each other in a very ugly way. However, a swashed capital at the start of each word can create a lovely, eye-catching effect, but doing this manually by using a special CSS class and <span> tags is laborious and not very dynamic. Instead, we can use the power of the font stack.

Step One: Create a subsetted version of the Swash font containing only the capitals. This subsetted font file will be missing all of its lowercase characters. The MyFonts kit builder enables you to include or exclude a string of characters.

Step Two: Download your kit and, in the @font-face declaration, rename the Swash font to something else, like 'BellucciaSwashes_sub'. Leave the Regular version as it is.

Step Three: Create a CSS class with a font-family font stack, and place the subsetted Swash font first in the list, with a full version of the standard font second.

Step Four: Assign the font-family to your classes. When the browser comes to render the page, it will use the capitals from the first font and the lowercase from the second. Voilà! Swashed initial caps, in almost any of the major browsers, not just the most recent Firefox or IE10.

Wrapping up

Typography has always been a skilled craft, and typesetters through the ages were well used to working within very tight, technical limitations – whether they were the tools used to compose lines of metal type, the materials they were printing on or even the distribution networks for getting their publications out there. Do today’s web typographers, wrestling with different screen resolutions, browser and operating system platforms, license costs and pay and distribution models, really have it any better? Or does a typographer’s real talent lie in overcoming technical constraints?