
So if the user doesn’t have Verdana installed and Arial is shown instead, the type will often seem way too small. As body text, Verdana appears significantly bigger than Arial due to the shape of its letters (Verdana has a large x-height). X-height describes the relationship between the height of a lower case x and a capital X and affects how big the font looks to the reader.Ī typical mistake is specifying Verdana and Arial in the same font stack. So let’s add these faces to our font stack most people will still see Arial, however some will get one of our primary choices: font-family: Frutiger, Univers, Arial, Helvetica, sans-serifĬare needs to be taken that we only specify related typefaces, particularly in their readable dimensions such as x-height. Further, Univers’s designer, Adrian Frutiger, went on to design another variation simply called Frutiger. However, Univers was also derived from Helvetica and is one of the most widely sans-serifs in graphic design. In our previous example, we’ve specified two related typefaces: Arial and its inspiration Helvetica. Why not make the list longer and get a bit more adventurous with type choices? If users haven’t got your first, second, or even third choice, they’ll end up with what you would have given them anyway. There is no limit to the number of typefaces we can specify in the font-family cascade (often referred to as the font stack) yet so often designers stick to the same old choices just because they are on everyone’s system.

If that is not on the system either, the browser will use a default sans-serif font specified in its preferences. If Arial is not available, it will look for Helvetica. In this example the browser will look to use Arial. For example: font-family: Arial, Helvetica, sans-serif As a browser can only use fonts that are installed on the user’s system, font-family lets us specify a list of typefaces in order of preference, followed by a generic face. Typefaces are set in CSS using the font-family property.


Those of you who read clagnut on the web site (as opposed to the RSS feed) may have noticed the appearance of a Switch Typeface widget.
