How long might we go in a day before seeing a designed typeface? The seconds in bed before we turn off our alarm and seeing the face of the digital clock? Or perhaps a little bit longer before we read the label of a toothpaste bottle. How aware are we of the typefaces that we consume day to day? Typefaces are some of the most critical design elements in our visual world, and yet they’re often taken for granted.
Even as designers we under appreciate typefaces, and form our type decisions on loosely based opinion, rather than objective understanding. How much do we know about the original industrial contexts for which our typefaces were designed? What do these contexts, and histories mean for determining the legibility, appropriate character, and use of our typefaces. No matter what design discipline we fit in, whether it’s UX, or traditional print design, our typefaces are essential elements of our work.
How can we inform our design work with a better understanding of our typefaces?
In this article, I will provide an overview of some of the most influential typefaces that many designers use today, and why you should consider other types instead. Each of the typefaces in this article is decades, if not centuries old, and were all designed for different technological contexts. Thus, there have been many alternatives or updates designed since they were introduced. Even the fonts that were originally designed for the screen have become outdated as displays, and printers become higher in quality.
Serif Typefaces
Understanding the difference between the serif and sans – serif is one of the most fundamental rules of type. For many this may be obvious, but the serif is the stroke given to the end of main horizontal and vertical lines of a character. There are many subclasses within serifs, such as hairline, wedge, and slab serifs, which all describe the qualities of the serif. Generally, serifs have a longer history than san serifs, as they were the first typefaces used to print the novels following the invention of the Gutenberg Press. Essentially, serifs allow for more comfortable reading at length as the serifs guide the eye smoothly from character to character, making the serif ideal for the novel. The rules still apply now as generally serifs are preferable for long bodies of text, but this isn’t necessarily an absolute rule, as each typeface has its own specific qualities and appropriate contexts.
Baskerville
Baskerville is one of the classic serifs that has stood the test of time to still be in use today. Baskerville was designed in a transitional period between the first typeset faces, and the 19th and 20th-century modern fonts to come. Baskerville has succeeded due to its legibly high contrast forms. The designer John Baskerville was an intense perfectionist and thus created a font with beautiful detail, which could only be printed on his own machines to ensure that the forms be transferred to the page. This is significant to understand as the typeface is now reappropriated to all of the mediums that we work in today. Thus, Baskerville should not be used in any low-resolution mediums, whether it’s low-resolution displays or bad printers. That being said, when Baskerville is given the opportunity to express its quality, it’s an excellent san-serif. A good example of Baskerville being redesigned for a digital interface is the typeface that Amazon has commissioned for the Kindle, Bookerly. Thus, if you’re looking for an on-screen alternative to Baskerville that maintains its 200-year-old richness,Bookerly could be a good solution.
Times New Roman
Times New Roman, similar to another classic Helvetica, is a polarizing typeface that is loved by many but loathed as well. Often, what people either love/hate about the typeface is the same, its apathetic neutrality. Matthew Butterick writes “Times New Roman is not a font choice so much as the absence of a font choice, like the blackness of deep space, is not a color. To look at Times New Roman is to gaze into the void.” Times New Roman feels so plain largely due to its overwhelming ubiquity as a result of its exposure from the paper it was designed for, The Times. Times New Roman was designed for the commercial interests of the newspaper, which was to maintain legibility while cramming as many words into a line, and therefore page as possible. The designers were very public about the font’s use with newspapers, as it is narrower and more legible in thin columns, but not ideal for widespread books. This efficiency was achieved by increasing the x-height, and significantly reduced the tracking, or space between characters. Due to the success of the typeface with The Times, Times New Roman became adopted soon after by most American newspapers, thus making it the most ubiquitous typeface. So, some designers advise against using Times New Roman is because of its ubiquity, it provides connotations of apathy or cheapness. Some other editorial style fonts you might consider are Arnhem, Le Monde Journal, or Plantin.
Garamond
Garamond Antiqua is a purist old style face designed by the iconic Parisian punchcutter, Claude Garamond. Garamond was one of the first faces designed for the type set, which means that it was ideal for the long body texts of the new phenomena of the age: novels. As an inherent quality of the era in which it was designed, Garamond frames text with a sense of the classic old world. Yet, its rounded serifs keep the text informal. Garamond has remained a prolific font by virtue of its clear forms, allowing users to read at length without tiring. The characters’ large bodies and x – heights create a lot of space around each letter, making the words perceptively bigger and thus more legible. However, although many designers would argue for Garamond’s timelessness, its forms simply are not ideal for the web. Garamond’s virtues are its soft curves that blend from character to character, making for easy long term reading. However, these curves become blurry at smaller sizes on screen and impede its legibility. Thus, despite its numerous recreations you may find online, most designers for the screen believe that Garamond has now passed its relevance. This being said, the designers of EB Garamond still think otherwise, and are trying to revitalize the classic in the open source community.
Often, the typefaces that were originally designed for print are not ideal for the screen, and vice versa.
Georgia
Perhaps in response to typefaces like Garamond’s failure on screen, Georgia was designed in the 90s by Matthew Carter, who Microsoft commissioned, precisely for on-screen legibility. Many believe that Georgia lacks the neutral quality of other mass produced serifs, such as Times, and it gives the text a friendly and charming quality. Thus, Carter’s impressive design feat is that he managed to solve the issue of on-screen legibility while maintaining the attractive character of print faces. The story is that Carter designed Georgia while working on a new version of the 19th-century font Scotch Roman, thus, Georgia maintains many of its predecessor’s qualities. However, in order to craft Georgia for the screen, Carter made some essential changes: such as increasing the x – height, rounding out the numerals, and creating slight mis-alignments in order to maintain a sense of character. Although Georgia is now established as a classic, its widespread use can make a body of text feel a bit outdated. So, try out Miller, also designed by the master Carter, but it’s less overused than its sibling Georgia.
Sans Serif Typefaces
Although some may argue that san serif typefaces first occurred in ancient times, they weren’t officially incorporated into widespread use and modern society until the 19th century. As advertising, newspaper and media boomed, there was a need for typefaces that could be read as clear headings from a distance, as well as be representative of a new era of industry.
Verdana
Verdana shares a similar story to its cousin, Georgia, as they were both designed by Matthew Carter for Microsoft in the 90s. Thus, Verdana is a san serif designed specifically for the screen. Similar to many fonts striving for clarity, Verdana has a large x-height to increase legibility. Verdana is referred to as a humanist sans serif, which means that it maintains some of the qualities and design logic of serif typefaces. However, Matthew Carter was aware of the potentially constraining spaces that some text may get crammed into on screen, so Verdana’s character sizes are balanced just enough to avoid cramming in apps or in platforms without stable leading. Considering that Verdana was designed for use in the 90s, it is especially effective still on low-resolution devices. If using Verdana in print, its wide set spacing gives it the quality of a monospaced typewriter font. Yet, as screens become higher in quality, Verdana’s strengths are lost, and it does not perform quite as well as it once did. Thus, these qualities also make Verdana a poor choice for large bodies of text in print or offset printing. An alternative that you might consider now instead is Colfax. The designers of Colfax take into account the lack of mechanical constraints on type design today and have crafted a font that’s more appropriate for high-resolution display and inkjet printing.
Din
Most of the famous fonts are known for the new contexts in which they introduced legibility. The first issue of DIN was designed for German railway signage. It was later adopted for all roadway use and license plates and remained in use until 2000. Thus, the font is ideal for use in very short bodies of text, such as headings or labels, as it is idealized for the quick reading during travel. However, be careful when choosing your DIN as there are two critically different types: DIN 1451 Mittelschrift, and DIN 1451 Engschrift. The latter is the condensed version and should only be used when there is not enough room for the former. Although, DIN was redesigned in the 90s as FF DIN, a more appropriate typeface for magazines or the web. As a result of the font’s ubiquity in all German design, it inherently connotates Germanness, so be wary of this when implementing it into your own work. Many alternatives have since been designed as well, but nothing really with the classic quality of the originals.
Futura
Futura is a direct descendent of the first ever geometric san serif (as opposed to humanist sanserif). The ancestor of Futura, Erbar Grotesk, was designed at the hugely influential Bauhaus with the intent of communicating everything that the school felt to be modern at the turn of the 20th century. This meant that geometric logic did away with any hint of ornamentation, and aimed for pure logic. The font is generated from the circle in order to form most of the characters. Thus, Futura was designed slightly later and further the love for geometry by implementing triangles and squares into the characters where circles did not apply. The geometric form consequently communicates efficiency and cleanliness. Futura has since experienced a lot of fame over the course of the 20th century, as the Apollo 11 astronauts left a plaque on the moon in Futura, Volkswagen, and many other brands adopted it, and several filmmakers such as Stanley Kubrick and Wes Anderson have reappropriated it. If you appreciate the modern quality of Futura, but find it a little bit overused, considering trying FF Super Grotesk, HK Grotesk (open source), or Neuzeit.
Gill Sans
Monotype, the same typeface foundry that brought us Times New Roman, commissioned the polymath Eric Gill (a sculptor/typesetter/graphic artist) to produce a font for London’s modern signage. Gill Sans, contrary to Futura, is a humanist font with a less regimented style than its German contemporaries. The ‘R’ is slightly flared and the ‘eyeglass’ lowercase g is near iconic. The naturally bold quality works well for displays and headings, yet the lighter weights released later are well suited for body text. Its history in the London Underground, the BBC and The Church of England, plus its modern, yet human quality, make the typeface quintessentially British. Although the font is classic in proportion, it has some artistic flares which make it more cheerful than the austere DIN. However, many of these artistic flares have made Gill Sans undesirable by some graphic designers. Specifically, the lower case ‘a’ is often criticized for being unbalanced and throwing off the legibility.
Helvetica
Helvetica is the only typeface to have inspired its own film (2007). It’s arguably the most famous/ubiquitous font today. The font was born out of a widespread competition in the 50s for new versions of the widely popular Grotesk fonts. The Grotesk fonts had evolved gradually to increase and increase legibility. However, not all of the typefaces worked well with both handset linotypes, as well as mechanical ones. The linotype machine required both regular and italic characters to be set with the same width, thus forcing italics to appear too wide, and regulars to appear too narrow. Helvetica was designed specifically with acute character adjustments to maintain the modern beauty and legibility of Grotesk typefaces while allowing designers the benefits of mass production. First released at the ‘Graphic 57’ trade show, the font became ubiquitous throughout Swiss design.
Monospaced Typefaces
Monospaced typefaces are the types designed for the typewriter. The main quality to understand about this category of typeface is that the typewriter required each character to be typed out with equal spacing. Thus, every character is placed within a single organizing matrix in a body of text. Whereas, often other fonts vary in spacing in order to manage legibility. Ultimately, outside of the context of the typewriter, it doesn’t really make a lot of sense to use monospaced typefaces. The equal spacing means that they are less efficient, and generally less legible as well. Some examples of these are Courier, Consolas, Letter Gothic, or Source Code Pro (free). However, some designers just can’t deny the nostalgic aesthetic, thus, they remain to be popular.
System Typefaces
System typefaces are the ones that come with your device or program. There are different system typefaces for Mac, Windows, and even Adobe products. Generally, designers should avoid these typefaces for their products to appear professional. This is largely just a result of the widespread use of system fonts. If viewers have unconsciously seen system fonts in every average document that they’ve come across, the will associate that mediocrity with even professionally designed products using the same commonplace typeface. As well, many of the system fonts, similar to Georgia or Verdana discussed before, may be idealized for the screen, but are not reproduced as well in print.
If you are going to invest in a proffesional typeface design, consider something that is versatile between mediums.
Choosing a Good Typeface for Design Work
If you’re looking to invest in a professional font, but one of these above isn’t really what you’re looking for, how can you choose a font that will last your design career? What goes into choosing a good font as a designer? First, to ensure that a typeface you purchase can go a long way, considering going for one that has a big family. This means that the typeface will have a series of weights, widths, and potentially even both sans-serifs and serifs. The deep family can be paired with itself easily, and carry a variety of personalities. If you’re looking for a typeface to pair with your existing type library, focus on choosing fonts with similar characteristics. This means considering all of the qualities of the caps and lower cases, x-heights, and formal geometry.
The original article is from Toptal. You may find more resources here.
The post A Typeface Overview For Print And Web Design appeared first on NENASAL.