Journalists' Toolkit

Icon

A training site for multimedia and online journalists

Typography for the Web

In your CSS, you can specify typefaces (font families) to be used for the headings, paragraphs, etc., in your HTML.

However, what you see on your computer is not always going to be the same thing your audience sees. Why? Because different people have different fonts installed on their individual computers, phones, and other devices. If they do not have the font you specified, their device will automatically substitute … some other font.

It could be ugly. Very ugly.

There are two ways to ensure that the typeface you see on your pages will be seen by everyone else. The first and simplest way is to use Google Web Fonts. Just click that link, and you’ll be on your way.

The other way is more complicated to set up, initially, and you’ll have to upload the fonts to your own Web host. (That is not necessary if you use the Google fonts.) If you want to try it, go to Font Squirrel.

You should also read this helpful article from Six RevisionsCSS Typography: Techniques and Best Practices.

The article explains the techniques used for fonts in present-day Web design.

Comparison of Google Web fonts and @font-face

I chose three different fonts from the Google Web fonts collection. I made a simple page that uses all three fonts (view that page).

Then I uploaded those same three fonts to Font Squirrel’s generator page and used it to create the complete package of files that one needs to upload to the server (when using @font-face instead of the the Google Web fonts). I used the same simple page and its original CSS in combination with the @font-face CSS to make a comparison. If you view that page side-by-side with the other, you can check for differences in different Web browsers.

The two pages should look the same, but understand that the coding is different on each one. For the Google Web fonts version, there’s just one line in the HEAD of my HTML page. For the @font-face version, there is a separate additional stylesheet and also 590 KB of files on my Web server to make the fonts work.

Category: HTML and CSS

Tagged: , , , , ,

Leave a Reply