5 Rules For Choosing The Perfect Web Typeface
A project’s typeface selection is a defining moment. Occasionally, you’ll want to add personality to a design, but this is typically best accomplished with display type. The majority of the time, the objective for body text is legibility. Legibility refers to the simplicity with which letters are recognised, whereas readability refers to the intelligibility of individual words, sentences, and paragraphs. Frequently, the former provides the latter. Every undertaking has its own specifications, and no single typeface will ever be able to meet them all. In the case of web body text, however, there are certain characteristics that you should seek out.
1. Large, accessible counters
Counters are the vacant spaces within letters such as ‘o’ and “c.” Large counters improve legibility by forming distinct shapes within thein the numerous vertical strokes that comprise Latin lowercase. Typefaces with large counters tend to have a larger x height (the height of the lowercase “x”) than ascenders and descenders (the extended strokes on letters like “b” and “p”). The increased x height permits sufficient whitespace in letters such as the l”e.” “e.” In addition to large counters, legible typefaces typically feature open counters with wide apertures, such as in the letters “c” and “s.” numerous vertical strokes that comprise Latin lowercase. Typefaces with large counters tend to have a larger x height (the height of the lowercase ‘x’) than ascenders and descenders (the extended strokes on letters like ‘b’ and ‘p’). The increased x height permits sufficient whitespace in letters such as the letter ‘e’.
In addition to large counters, legible typefaces typically feature open counters with wide apertures, such as in the letters ‘c’ and’s’. Lato, by Ukasz Dziedzic, is a typeface that excels in this regard. Lato’s generous x-height is sustained by expansive, open counters. In addition to large counters, watch for sharp angles at the junctions of letters such as “d, ‘p’, and “n.” Due to the nature of pixels, the angle increases the whitespace, which makes the counters appear larger. This effect is also visible in semi-counters, such as the whitespace under the shoulder of the letter “r.”
2. Even strokes
Designers frequently debate whether serif or sans-serif typefaces are more legible. Some contend that serifs increase the unity of a word’s shape, while others contend that serifs confound shapes at small sizes, and still others contend that it’s simply a matter of familiarity. Regardless of your viewpoint, there are extensive studies that both support and refute it. The truth is that sans-serif fonts are marginally more readable than serif fonts, not because of the serifs but because of other characteristics of the style. In particular, serifs are derived from a calligraphic tradition and therefore tend to feature increased contrast between strokes.
Thinner strokes tend to vanish at smaller scales, so typefaces with built-in thin strokes tend to be illegible on screen. The majority of typefaces will have some stroke contrast in order to be optically balanced (horizontal strokes will appear optically broader than vertical strokes of equal thickness), but a lower contrast improves readability. There are numerous modern serifs that perform remarkably well on screen, however. FF Tisa is an extremely legible font. In addition to its large counters, the contrast between its strokes is minimal. FF Tisa has a sans-serif counterpart, FF Tisa Sans. When comparing the two, it is evident that it is not the presence or absence of serifs that contributes to legibility, but rather the large x height, substantial counters, and minimal stroke contrast. If you examine closely, you will notice that FF Tisa has slightly more contrast between strokes than FF Tisa Sans. You will also notice that in some characters, such as the letter “s, the serifs slightly close the apertures. This should imply that Tisa Sans is marginally more legible than Tisa, but serifs provide an additional advantage.
3. Unique letterforms
Try out the text “1 Illinois” when testing a typeface designed for screen use prior to testing your name, domain name, or anything leaping over anything else. In the end, you’ll want to test out a variety of configurations, but “1 Illinois” is the only phrase you need to narrow down your typeface options. Not only does it contain open and closed counters and an arch to evaluate stroke contrast, but it also contains some of the most problematic characters in a typeface, including the number 1, uppercase I, lowercase l, and, to a lesser extent, lowercase i. Consider the classic case of Gill Sans. It is a gorgeously designed typeface, but it does not function properly on screen. In Gill Sans, the letters of “1 Illinois” are indistinguishable regardless of size. Here, serif typefaces, which lose a small amount of legibility due to increased outline contrast and smaller apertures, regain parity with sans serifs. Merriweather is significantly more legible than Gill Sans, despite Gill Sans’ significantly simpler letterforms, due to the distinct characters that are easier to accomplish with the addition of serifs. Serifs are not the only fonts capable of distinct letterforms.
Fira excels at distinguishing between characters with differing heights and tails on the lowercase letter “l.” Ideally, you will discover a typeface with a diverse character set. Typically, typefaces with double-story ‘a’ and ‘g’ are more legible than geometric sans fonts such as Futura. Ideal Sans is one of my particular favourite fonts. It distinguishes uppercase ‘I’ and lowercase ‘l’ only slightly, but if you look attentively, you’ll notice that virtually every stroke is distinct. At normal text sizes, the asymmetry and variation between normally mirrored characters generate a highly readable typeface.
4. Consistent cadence
Because we process text in saccades — brief jumps along the line — which are simpler to process if the spacing is consistent, rhythm is one of the most essential characteristics of a typeface. It is possible to adjust tracking for text, tightening it for display text and loosening it for body text, but this does not affect the built-in rhythm of the strokes. In addition to its narrow apertures, one of Helvetica’s weaknesses is its subpar cadence. Compare the cadence to that of Dalton Maag’s Effra or Ukasz Dziedzic’s More Pro. Do not seek a typeface with a mathematically precise vertical cadence; to accomplish this, a type designer would typically have to distort the letters to the point where they lose legibility in other ways. Instead, search for a typeface that tends towards a regular rhythm.
5. Covert armament
When selecting type for the Web, there is a secret weapon that is obvious but frequently neglected. All of the most legible typefaces I’ve recommended thus far in this article — Lato (2010), FF Tisa (2008–2010), FF Tisa Sans (2011), Merriweather (2013), Fira Sans (2013), Effra (2008), and More Pro (2010)—were created within the last six years by type designers who were specifically designing for screen use. Helvetica is a terrible choice for the Web, but how could it be otherwise given that it was created nearly sixty years ago? When in doubt, verify the typeface’s design date. If it was published within the last few years, with a few exceptions, it most likely anticipates Web use.
Conclusion
Every endeavour has unique requirements that will influence your decisions. Because most body text is lowercase, I’ve focused on lowercase examples; however, if you’re designing a dashboard, you’ll likely need to pay special attention to numerals, and if you’re designing for an international brand, you’ll likely need an extended character set. The beauty of typography is that each project has unique use cases, meaning that no single typeface is always the optimal choice. Examine the lettering for ample counters, even strokes, distinct letterforms, and a consistent vertical cadence. Concentrate your search on fonts created in the Web era. Since the introduction of web type, we’ve begun to develop a distinct typographic style that takes into account the limitations of the medium, and the typefaces that are most successful online are those that were created to do so.
Leave a Reply