Zac Fukuda
004

Study of Web Safe Fonts, Sans Serif

    Following my previous article Study of Web Safe Fonts, Serif, in this series of articles I explore web-safe fonts and try to figure out how to use them in best way. The second is on sans-serifs.

    Helvetica

    Helvetica, probably the most popular typeface, is developed in 1957 by Swiss typeface designer Max Miedinger for the Haas Type Foundry in Switzerland. It was originally called "Neue Haas Grotesk" because its design is influenced by the famous 19th century typeface Akzidenz-Grotesk. It is 1960 when the name was changed to “Helvetica”, which was a close approximation of “Helvetia,” the Latin name for Switzerland.

    Over the years, the Helvetica family was expanded to encompass an extensive selection of weights and proportions. Today, the original Helvetica family consists of 34 different font weights. 20 weights are available in Central European versions, supporting the languages of Central and Eastern Europe. 20 weights are also available in Cyrillic versions, and four are available in Greek versions.

    Helvetica is widely used for a choice of logos, including those of Toyota, Panasonic, Microsoft, The North Face, American Airline, and BMW.

    Impact

    Impact is designed by Geoffrey Lee in 1965 and released by the Stephenson Blake foundry of Sheffield, England. It has been distributed with Microsoft Windows since Windows 98. As its name suggests, ultra-thick strokes, compressed letterspacing, and minimal interior counterform are specifically aimed. Impact has only 1 style.

    Helvetica Neue

    In 1983, D. Stempel AG redesigned the famous Helvetica typeface for the digital age. The official name is "Neue Helvetica.” This revision has a more structurally unified set of heights and widths, improved appearance, legibility and usefulness.

    Until the release of OS X Yosemite, Mac used Lucida Grande as a system font, but switched to Helvetica Neue. It seems that Helvetica was replaced with San Francisco in iOS 9 and OS X El Capitan.

    Weights of Helvetica Neue

    UltraLight
    Thin
    Light
    Regular
    Medium
    Bold
    Black

    Arial

    Arial was designed in 1982 by a 10-person team, led by Robin Nicholas and Patricia Saunders, for Monotype. It is packaged with all versions of Microsoft Windows, some other Microsoft software applications, Apple Mac OS X.

    It was created to be metrically identical to the popular typeface Helvetica, with all character widths identical. Monotype executive Allan Haley observed "Arial was drawn more rounded than Helvetica, the curves softer and fuller and the counters more open."

    Of course, Arial Black is also available on the web. Here is the example of Arial, bold Arial, and Arial Black.

    Arial
    Arial Bold
    Arial Black

    Geneva

    Geneva is designed in 1983 by Susan Kare for Apple Computer. It is one of the oldest fonts shipped with the Macintosh operating system.

    Lucida Sans Unicode

    The design studio of Bigelow & Holmes designed Lucida Sans Unicode to support the most commonly used characters defined in version 1.0 of the Unicode standard. It is the first Unicode encoded font to include non-Latin scripts (Greek, Cyrillic, Hebrew). It was designed by Kris Holmes and Charles Bigelow in 1993.

    Unfortunately, Lucida Sans Unicode doesn’t support bold and italic.

    Tahoma

    Tahoma is designed by Matthew Carter, also designer of Georgia and Verdana, for Microsoft Corporation in 1994. Microsoft first distributed it in Windows 95. While similar to Verdana, Tahoma has a narrower body, smaller counters, much tighter letter spacing, and a more complete Unicode character set.

    Tahoma was created to address the challenges of low-resolutions display at small sizes in dialog boxes and menus. The original Tahoma Family consists of only two fonts, regular and bold, however Ascender Corporation added italics.

    Tahoma is ideal for use in User Interface scenarios and other situations requiring the presentation of information on the screen.

    Charcoal

    Charcoal is designed by David Berlow of Font Bureau during the period 1994–1997. Charcoal was the default menu font in Apple Computer's Mac OS 8 and 9. In Mac OS X, it was replaced with Lucida Grande as the system typeface. Charcoal is designed for high legibility, even at smaller point sizes, displayed on computer monitors.

    Trebuchet MS

    Trebuchet MS was designed by Vincent Connare for Microsoft in 1996. It was created for use on the screen. The typeface has been released with Internet Explorer since version 4.0 and Microsoft Word since Word 2000. It is also included with Mac OS X, iOS and Chrome OS.

    Its letterforms, loosely based on sans serif typeface designs of the 1920s and 1930s, carry a large x-height and clean lines designed to promote legibility, even at small sizes.

    Trebuchet is well-suited to use for extended texts, User Interface scenarios and spreadsheet design, given the font's narrow letterforms. Trebuchet works brilliantly on the screen and has quickly become a classic choice for Web page design.

    Verdana

    Verdana was designed by Matthew Carter, hand-hinted by Tom Rickner for Microsoft Corporation. It was designed to be readable at small sizes on the low-resolution screen. The generous width and spacing of Verdana's characters is key to the legibility.

    Despite the quality of the Verdana font family at small sizes it is at higher resolutions that the fonts are best appreciated. Some of the subtleties of the letterforms, such as the slightly modulated stroke weight only become truly apparent at larger sizes.

    Delta Airlines changed their official logo typeface from Times New Roman to Verdana. IKEA caused furor in the graphic design world in 2009 when it changed the typeface used in its catalog from Futura to Verdana, expressing a desire to unify its branding between print and web media.

    Lucida Grande

    Lucida Grande, a member of Lucida family, is designed by Charles Bigelow and Kris Holmes in 1999. It has been used throughout Mac OS X user interface from 1999 to 2014. Like Sans Unicode, Grande supports the most commonly used characters defined in version 2.0 of the Unicode standard.

    Apart from Mac OS X, many websites and blogs use Lucida Grande as the default typeface for body text, for example Facebook. Since Windows and Linux doesn’t have Lucida Grande, the style sheets of the web site that use it include Tahoma, Verdana, or Arial.

    Difference

    hopivamt Helvetica
    hopivamt Impact
    hopivamt Helvetica Neue
    hopivamt Arial
    hopivamt Arial Black
    hopivamt Lucida Sans Unicode
    hopivamt Tahoma
    hopivamt Charcoal
    hopivamt Trebuchet MS
    hopivamt Verdana
    hopivamt Lucida Grande

    Except Impact and Arial, the deferences are uneasy to be perceived. However, if you look closely they could be fallen into two categories: the one that is narrower, and the other that is not. Helvetica, Impact, Tahoma, and Trebuchet MS fall into the former case. Helvetica Neue, Arial, Lucida Sans Unicode, Charcoal, Verdana, and Lucida Grande fall into the latter case.

    hopivamt Helvetica
    hopivamt Impact
    hopivamt Helvetica Neue
    hopivamt Arial
    hopivamt Arial Black
    hopivamt Lucida Sans Unicode
    hopivamt Tahoma
    hopivamt Charcoal
    hopivamt Trebuchet MS
    hopivamt Verdana
    hopivamt Lucida Grande

    At the small size, the defferences are less apparent, but you might still find a clear diefference in width. Verdana has a slightly wider letterspacing than others.

    My Opinion

    In the aritcle of fonts.com, Allan Haley, Director of Words & Letters at Monotype Imaging says that for legibility the most important element is "Transparency". By transparency he means that typefaces should never call the attention to themselves.

    This is very good when you decide which font to use for massive texts. But when you design fon web, it is very crucial to make texts have their own importance by distinguishing their attractiveness.

    At the same time, we want to use as much less typefaces as possible, idealy one or two, in order not to mess up our design principles. So here is my suggestions to construct one website with less typefaces.

    Helvetica Neue

    Helvetica Neue has various weight options available by default and most of devices have them in its system, although some devices lack the black style. This is a really web-safe way to have your texts very distinct with only one typeface.

    Arial & Arial Black

    I haven't seen websites which set Arial for its font-family, however, this is also really web-safe. For instance, you can set the regular for body texts, th Bold for inside body texts, and the Black for heagings.

    Tahoma & Verdana

    Just set Verdana for body texts and Tahoma for headings and menus. Since these two typefaces are designed for use on the screen, they will remain readability even when poeple see your site on the low-resolution one.

    Resources

      ← Back to Index
      Cookies

      We use cookies and other tracking technologies to offer you a better browsing experience and to analyze web traffic. Find out more on our Cookie Policy.