Your Sans Serif Might Be A Bad Typeface

Before we begin though, please let me get one thing out of the way right away: I’m not a pro at typographic design and typefaces and I rather have this love and hate relationship. I will for sure use the wrong terms to describe what I mean. Even though I’ve learned this a dozen times. So if you’re a pro in terms of typographic design: This article is not meant for you (but feel free to read it anyway ).

On that note: How do you create a sans serif? Well, you shoot the serif…

The problem that a lot of typefaces - no matter how expensive or professionally designed (whatever that means) - suffer from is that some letters are rather indistinguishable from one another; especially the l (which is the small letter L) and the I (which is the big letter i).

Now some of you, my dear readers, might argue that you can always guess from context which letter is meant. But you're missing the point. Reading should never be guess work. And you would rather want to care about this issue. Because your readers might have some type of low vision, a certain type of dyslexia or might be non native to the language your articles are written.

Any of these arguments alone would be reason enough to change for a better typeface. But now you might worry that you would have to spend insane amounts of money on your new typeface. But no worries here. Google Fonts has some sans serifs that might be suitable for your purposes. I've collected a few of them for you below.

Fira Sans

Let us begin with a typeface that comes with a rather complete set of font-weights, rangig from 100 all the way up to 900 - Fira Sans. It was originally designed for Mozillas FirefoxOS and aims to cover legibility needs. I've personally used Fira Sans for a lot of projects in the past and it's still one of a few typefaces that I would recommend for web design projects. Best of all: There are also some variations of the typeface available like Fira Sans Condensed, Fira Sans Extra Condensed, Fira Code and Fira Mono.

Public Sans

Public Sans is a neutral typeface designed for interfaces, text and headings. Public Sans is part of the United States Web Design System - yes that is a thing. Considering that this is typeface is developed for government purposes chances are high that this typeface would suite most needs in terms of accessiblity regarding typography. As long as you don't mess it up with bad color contrast, sizing and so on. The font-weights range from 100 to 900.

Work Sans

Again a rather complete typeface with font-weights ranging from 100 to 900.

The Regular weight and others in the middle of the family are optimised for on-screen text usage at medium-sizes (14px-48px) and can also be used in print design. As you already might know, it's best if your text ranges between 300 and 700, with an ideal weight for most of the text around 400 and bold text around 700 - but that depends largely on the typeface. The rest is rather for display usage, say headlines etc.

This typeface is also available as a variable font.

Exo 2

Exo 2 is a sans serif typeface with a rather modern, technological feel to it so it might not be suitable for every project. Exo 2 is a redesign of the original Exo typeface. Font-weights range from 100 to 900, true italics are available.

Exo 2 is also available as a variable font.

I've used Exo and Exo 2 here on Elevenfour in past designs as displays fonts for the headlines. An early iteration of Elevenfour's current design (Version 4, Titan) was completely set in Exo 2. If you're interested in other variations of Exo there are also Exo 2 Condensed (free), Exo 2 Expanded (free), Exo Slab (paid) and Exo Soft (paid) available from ndiscover.

Inter

If you'd like to use Inter as your typeface of choice than I'd like to encourage you to only use the variable font and turn on disambiguation - set ss02 would be the one you would want to activate. In your CSS this could look something like this

@supports (font-variation-settings: normal) {
    body {
        font-family: Inter, sans-serif; 
        font-feature-settings: 'kern' 1, 'ss02' 1;
        -webkit-font-feature-settings: 'kern' 1, 'ss02' 1;
        -ms-font-feature-settings: 'kern' 1, 'ss02' 1;
        -moz-font-feature-settings: 'kern' 1, 'ss02' 1;
    }
}

If you don't use the variable font with disambiguation activated than you'll run straight into the l/I problem.

Inter is a typeface that's crafted & designed for computer screens and supports font weights from 100 to 900. If you'd like to know more about Inter and its Open Type features please visit https://rsms.me/inter/.

IBM Plex Sans

IBM Plex™ is an international typeface family. Its font weights range from 100 - 700. It's designed to capture IBM's spirit and works well for texts in print, web and on mobile devices. You can also get other flavours of IBM Plex™ like IBM Plex Condensed, IBM Plex Serif and IBM Plex Mono.

Nunito and Nunito Sans

Nunito (Sans) supports font-weights from 200-400 and 600-900.

Nunito is a well balanced typeface family of two variations - Nunito, which is the originally created rounded terminal sans serif for display typography and Nunito Sans which is the non-rounded version.

Ubuntu

As the name suggests this typeface was designed for the Linux distribution Ubuntu. It supports the following font weights: 300, 400, 500, 700. There are also other versions, like Ubuntu Condensed and Ubuntu Mono. Ubuntu works well for interfaces, headlines and text.

Choosing the typeface for your design is an important step since typography makes or breaks the design - after all most of our websites are made of text accompanied by images, sounds and videos. So be careful and really try different settings before you settle on a new typeface.

Got some other suggestions? Please let me know in the comments. And if you have been: Thank you for reading.