A Guide to Using Illustrative Type on the Web
Fonts designed to look as if they were drawn, written or printed by hand — as if, in fact, they were not digital at all — offer a whole range of possibilities for making websites feel less, well, webby! An illustrative, photo-realist or hand-crafted aesthetic is a common way of adding personality to web pages that might otherwise come across as too dry or impersonal, but there’s more to getting that casual appearance right than simply selecting a skinny, wobbly, all-caps font for your headings — so here’s our guide to getting your digits metaphorically dirty…
In this article we will be discussing any typeface designed to replicate, imitate, mimic or make reference to non-digital techniques for creating lettering. That’s a very broad range of styles, and includes everything from fine calligraphic and advertising scripts to manual techniques such as letterpress, woodtype and linocuts, to hand-drawn and -written fonts, grunge and distortion fonts and even historical revivals that attempt to look as if they’ve been printed using antique lead type.
The common feature in these typefaces is that they all include detail on top of the letter shape itself and in addition to their typographic function. In other words, they include decorative or illustrative detail intended to create a certain effect or impression. It might be a swash, or a woodgrain texture, a rough outline or a wobbly, irregular stroke.
Successful use of these fonts on the web is harder than their often playful character implies, and a bit of caution is advised, as well as a willingness to put in some extra CSS coding work. Designers used to working in print will find that on the web fine-grained typographic layout control and predictable, consistent output are often next to impossible.
The limits of OpenType control
Script and handwriting fonts in particular, but also many fonts that replicate a manual technique like screen printing, use OpenType programming to select alternate characters to create smooth connections or an appropriately random appearance.
Accepting that some features of OpenType fonts may not work reliably on the web is part of the required mindset; researching and testing workarounds is another. For example, instead of achieving a random effect through OpenType programming, designers creating all-cap display typefaces sometimes put alternate characters into lowercase glyph slots. By mixing upper and lower case, you can create a pseudo-random effect.
For scripts and calligraphic fonts, we’ve written before about mixing regular and swash weights from one typeface family to create more ornamental calligraphic effects. It’s often possible to research these features before purchasing a font; the question a web typographer should always ask is “what will this font look like without any OpenType features turned on?”
- Choose script and handwriting fonts that connect well without the use of alternate characters or discretionary ligatures — often, normal ligatures aren’t even consistently supported. MyFonts’ preview options include the possibility to turn on and off all OpenType features; this will let you assess how well connecting scripts may function on the web.
- Look for typeface families that offer swashes and ornaments in separate font files.
- All-cap display fonts that offer alternate glyphs in the lowercase positions will allow for some variation in a line of text.
Detail is King
It’s very important to take into consideration the level of detail in these fonts when planning your design and user experience. More detail means more vector points, larger files, slower downloads and slower rendering. Detail will render badly or not at all at small sizes. For example, too much grain texture on a wood-effect typeface could result in the font looking transparent as the detail ends up creating big holes in letters.
Most of these fonts work better when used at large sizes. The more detail, the bigger they should be. Limit their use to those top-level headlines and callouts on your homepage, where the effect will be most powerful. Additionally, these types of key message will rarely be dynamic; this means you can hard-code them in place, create a specific CSS ID and subset the font to use only the necessary characters — saving on download times and rendering speeds.
When shopping for and choosing fonts, check if there are versions that are less detailed; these will be better suited for smaller sizes. Laura Worthington’s Azalea is available in Rough and Smooth versions, for example, while Yellow Design Studio’s Veneer comes in three weights with increasing levels of degradation in the texture effect.
Always display; never text
These are always display fonts — even those based on mediaeval or renaissance letterpress text typefaces. Those fonts might sometimes work for extended text setting in print, but even there the designer will have selected the typeface for its historical aesthetic, and not its functional legibility. On the web it will almost always be better to choose a text font specifically designed for setting immersive text. If aesthetic consistency is important, then do your research and choose a face with its roots in a particular typographic tradition, but don’t allow yourself to be seduced by the historical authenticity on offer in a scratchy quill effect.
Rethink your scales
For our purposes, a typographic scale is a series of increasing point sizes starting with the body copy and progressing through the six standard heading classifications (h1, h2 etc). While there are various theories about how to establish that scale, and nothing is set in stone, the defaults used by the major browsers are based roughly on the proportions of the standard system fonts we’re all familiar with. The defaults are generally okay as long as we stick with fairly conventional fonts.
The illustrative fonts we’re discussing here however, are usually anything but conventional in their proportions. To take two examples:
- calligraphic fonts will typically have a much smaller x-height in relation to the font’s point size and will need to be set larger to achieve the same optical size when compared to a conventional font;
- narrow, hand-drawn typefaces (such as LiebeErika and Populaire) will have a much larger x-height, but their narrow width also means they need to be set larger in order to have an optical appearance comparable to a regular font.
So, at the risk of repeating ourselves: bigger is almost always better!
A fine line
Speaking of skinny fonts, another reason to err on the side of caution and go big is that any font drawn with thin lines risks rendering at less than a pixel wide if set too small. So we’ll say it again: go big!
Consider your design strategy
Typography is, of course, an integral part — often the integral part — of any design concept, but we’ve noticed that when it comes to these sorts of fonts, the most successful solutions have carefully matched the typography to other visual elements.
There’s a whole other article to be written on this topic, so we won’t go into too much depth here. It might sound obvious, but chalk fonts work well in white on a dusty gray/black background, sketch fonts look good alongside pencil drawings and grunge fonts sit well on photo-realistic textured backgrounds.
If this comes across as conservative and unadventurous, then think of it like choosing a color palette. Sometimes a design concept calls for a harmonious color scheme. A design based on natural-looking, real-world or (dare we say) skeumorphic aesthetics will be best served by elements that complement each other.
The take-away from this is that type on the web — especially illustrative display type — is just one of the components of an integrated graphic composition, much like the photography or illustration.
Be restrained and keep your use of these fonts to a minimum; their effect will be amplified by their occasional use. And we can’t say it often enough: Most of the pitfalls we’ve described can be avoided by simply increasing the font size!
What to do next?Back...
Posted 26 Nov, 2012 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…
Defining a CSS font family
In this article we're going to be digging into the composition of the CSS Font Family and how…
A CSS Webfont Logotype
A pure text logotype, wordmark or masthead is now very achievable using HTML and CSS in combination…