In the last 2 years one of the biggest changes in web design is how and what fonts are being used. Long-gone are the days where the only choices were Arial, Times New Roman or Comic Sans.

With the arrival of the ‘@font-face’ HTML rule, and with big name players such as Google launching services to make applying new fonts easier, the web has truly benefited.

In the most basic form, there are two types of font: those which are used to be unique, grab attention and show off the company image and those used for legibility and easy clear reading.

Fonts to Grab Attention

With average users only giving their attention for 15 seconds your website needs to stand out from the crowd.

With current web trends focusing on large images, and more whitespace, the headings on your website need to aid users, and work with the graphics.

Below is a small collection of some of my personal favourite fonts:

Bazar Font

Bank Gothic Font

Caviar Dreams Fonts

Fonts for Easy Reading

Although reliable fonts such as Arial are heavily used for text content, there is now a wider range of alternatives.

A font used for content needs to be clear and easy to read, as they are often smaller in size and in larger blocks than headings.

One of my favourites is Open Sans, which has a slightly more modern twist to it. Open Sans is becoming highly popular, with 12+ billion views on Google Fonts in the last week alone.

Open Sans

Responsive Typography

It’s no good having a load of really cool fonts on your website for them to not display correctly when users view on mobile devices. This is where responsive typography comes in.

In CSS3 there are new values for sizing text, relative to the current viewport, these are: ‘vw’, ‘vh’ and ‘vmin’. Experts recommend between 50-80 characters on a line, no matter what sized screen. These units allow you to achieve that with scaleable text sizing.

These new values do take a little playing around with, yet isn’t this what you do at the moment anyway?

Below shows what the new values represent:

1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger

Great Resources

There are numerous places where you can go to download or include fonts – available for use straight on the web.

Google Fonts is one of the best – you simply find a font you want to use, include a link to the file (hosted by Google) and start using it.

A second great resource is Font Squirrel’s Webfont Generator where you can upload a local file and it will be converted for use on the web, including an example of how to use.

For assistance on how to start including new fonts, which are not supported by browsers by default see the W3C page.


This blog post was originally published on the Rapid Web Blog