Posts tagged “@font-face”

To test your CSS font stacks. Seriously.

So maybe you use @font-face or maybe you link to an external font like this:

<!-- Linking to Source Sans Pro hosted at Google Fonts -->
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic,700italic' rel='stylesheet' type='text/css'>

And your CSS has code like this:

body {
  font-family: "Source Sans Pro", SourceSansPro-Regular, Helvetica, Arial, 'Liberation Sans', sans-serif;
}

Did you type that font name correctly? Are you sure? Why not test it like this:

body {
  font-family: "Source Sans Pro", SourceSansPro-Regular, "Comic Sans MS", Helvetica, Arial, 'Liberation Sans', sans-serif;
}

Did you catch that? I added “Comic Sans MS” to the font stack. So if your intended font doesn’t show up, the visually distinct Comic Sans MS will alerting you to the problem.

Just remember to remove it from your production code. You wouldn’t want to be embarrassed, would you?

Or, you know, you could just type it into your website inspector of choice to double-check the font stack works. Just saying…

We’ve heard it before: Sans-serif fonts are more legible on screens blah blah blah.

I always got excited anytime a new free Sans-serif typeface was released that contained what I consider the required four variations: Regular/Roman, Bold, Italics and Bold Italics. And thanks to @font-face allowing font embeds on websites, collection sites such as Font Squirrel and hosting solutions including Google Fonts, the web designer is more spoiled for choice than ever before.

I present below four Sans-serif fonts provided by four different sources that, erm, kinda look the same. All contain my required four variants and they all even have thin versions of themselves. Best of all, they are free for use on websites.

Open Sans

Open Sans

Source Sans Pro

Source Sans Pro

Fira Sans

Fira Sans

Clear Sans

Clear Sans

Serif VS Sans-serif: no longer a question of legibility?

Interestingly, with the advent of monitors possessing higher pixel densities, usability proponent and aficionado Jakob Nielsen has revisited and somewhat overturned the common wisdom that Sans-serif fonts are more legible. Truth is they were back when monitors weren’t so capable. On moderns screens, when it comes to choosing between Sans-serif and Serif fonts for legibility:

there’s no strong usability guideline in favor of using one or the other, so you can make the choice based on other considerations — such as branding or the mood communicated by a particular typographical style.

Well if that don’t just beat all.