To make font stacks quicker to edit across the board and to enable the Typeface Switcher, I’ve isolated the font-family specifications into a separate stylesheet. I’ve have shown Arial and Times New Roman on the type sheet to illustrate why I’ve not included them in the font stack – they appear far too small relative to the other faces. These three families are similar in their proportions, as you can see from this type sheet. I back these up with Microsoft’s Web fonts (Georgia, Verdana, Andale Mono) and more recently with Bitstream’s new Vera family (Vera Serif, Vera Sans, Vera Sans Mono) which is propagating through Linux systems. Primarily, I specify Bigelow & Holmes’s Lucida family (Lucida Bright, Lucida Grande/Lucida Sans, Lucida Console). When specifying fonts on Clagnut, I’ve stuck to related groups of typefaces.
#Lucida sans vs lucida sans unicode code
Far better to suggest a more fitting alternative such as Tahoma (from which Verdana was developed) and leave out Arial altogether: font-family: Verdana, Tahoma, sans-serifĬlagnut uses three variations of typeface – serif for body copy, page title and supplementary titles (sidebars and forms) sans-serif for all sub-titles and supplementary text and fixed-width for code samples.
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.