Font Face: Non-technical Aspects

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more

There are two things to be cautious about if you are a web font newbie:

  1. Copyright (license). Not all fonts and typefaces can be used on a website free of charge.
  2. Font rendering in older systems. You have to check whether the font you are using is rendered nicely and in the given size in Windows XP (mainly for alternative browsers) and in older versions of Android. To learn more about this problem, go to blog.typekit.com/2010/10/15/type-rendering-operating-systems/

Learn Typography

When choosing fonts for your websites, do not forget about non-technical aspects. Typography is a serious discipline and not every font is suitable for every website. Moreover, not all font pairs work together.

If you are looking for study resources, I recommend these:

  • webtypography.net – an older website, but still a valid guide to type, typesetting and font composition on a website, written by Robert Bringhurst.
  • On Web Typography - an impeccable book by Jason Santa Maria, especially if you want to understand this topic in the broader context. See more at abookapart.com/products/on-web-typography

Where To Look For Fonts?

Ideal Choices: Typekit.com, Fonts.com, Font Foundries

Typekit.com, Fonts.com and other companies employ top-notch typographers and technicians and offer their own licensing of great and well-known fonts. Sure, they will charge you for their services, but you will avoid a lot of problems.

Visiting typographers’ websites directly is not a bad idea either. Even here, in the Czech Republic, we have several good typographers. For example, Tomas Brousil (suitcasetype.com) and Frantisek Storm (stormtype.com).

Good Alternatives: Google Fonts, Fontsquirrel, etc.

Google Fonts is a good service offering a large number of font families for free. However, not all of them are good and not all of the support languages with special characters. For more information go to google.com/fonts

Fontsquirrel not only has its own database of fonts with similar advantages and disadvantages as Google does, but it also has a well-known font generator that will make a web font out of your OTF format and any other non-web formats.

Beware of Free Fonts

There are literally hundreds of free fonts scattered around the internet. However, there are very few good ones. A high quality font should have some essential technical (e.g. file size), typographical (e.g. optimized web font rendering and readability) and aesthetic parameters.

If you do not have a technician or a typographer at your disposal (or your own knowledge is limited for that matter), you can spoil your website. Therefore, there is no shame in using system fonts.


Content

Introduction

Introduction

On today’s frontend UI development

UI development transformations

Tools, technologies and workflows

Fallback strategies

CSS3 reference guide

Introduction

Text properties

Background properties

Border properties

Box properties

Media Queries

CSS transforms

CSS animations

CSS3 Layout

Another CSS3 Properties

Non-standard properties

End

End

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more