Web Design & Development

[ Web Design & Development Topics ]

Font & Typography

Typography

The arrangement and appearance of printed matter.

Fonts on the Web

Print (Word, Illustrator, and the like) let you choose from a multitude of fonts. However, the Web only has eight fonts that are universal and work on all browsers (corrections welcome).

Web-Safe fonts include:

Other fonts that work on a majority of browsers include:
Microsoft Internet Explorer (now about 75% of the market) also accepts:
The default font on the Web is Times New Roman, so if it can't interpret the font(s) you want, it will display as Times New Roman. However, pages in the LCMS are set to default to Arial.

So why is this important to us? Well, if we are going to use anything other than the above fonts on any Web document (print conversion or otherwise) we need to know what the costs are.

When we specify a font on the Web we can establish a prioritized list of font-family names.  If the browser on the end users side can't understand the first one on the list it goes to the second one. So we would say something like:

style="font-family: cursive,'lucida console', sans-serif"

If it can't understand cursive it will go with lucida console, and if it can't do that one it will go with sans-serif (which is on the above list so it works for all users).

Thus, we have a few alternatives:

  1. Make our fancy special fonts into images so the look stays exactly the same on all browsers (caveat: makes text not searchable as it is no longer text; takes longer to load; is less accessibility compliant; is harder to maintain)
  2. When we make something that will go on the Web choose a font that is Web-safe so it works on all machines without issue.
  3. Create a prioritized list for Web fonts knowing that it will look different on different people's machines.

Hoping the above gives you a clearer idea of how fonts work on the Web, whichever one you go with. 

Universal?

Font Family

Demo
'sans-serif': normal fonts without serifs
Yes

Arial

 And here is what I would look like
No

Arial Black

 And here is what I would look like
No Arial Narrow And here is what I would look like
No Helvetica And here is what I would look like
No Gill Sans And here is what I would look like
No Lucida And here is what I would look like
Yes sans-serif And here is what I would look like
No Trebuchet And here is what I would look like
Yes

Verdana

 And here is what I would look like
'serif': normal fonts with serifs
No Times And here is what I would look like
Yes Times New Roman And here is what I would look like
No Palatino And here is what I would look like
No Bookman And here is what I would look like
No New Century Schoolbook And here is what I would look like
'monospace': fixed-width fonts
No Andale Mono And here is what I would look like
Yes Courier New And here is what I would look like
Yes Courier And here is what I would look like
No Lucidatypewriter And here is what I would look like
No Georgia And here is what I would look like
Yes monospace And here is what I would look like
'cursive': fonts that emulate handwriting
Yes Comic Sans MS And here is what I would look like
No Zapf Chancery And here is what I would look like
No Coronetscript And here is what I would look like
No Florence And here is what I would look like
No Parkavenue And here is what I would look like
No cursive And here is what I would look like
'fantasy': decorative fonts
Yes Impact And here is what I would look like
No Arnoldboecklin And here is what I would look like
No Oldtown And here is what I would look like
No Blippo And here is what I would look like
No Brushstroke And here is what I would look like
No fantasy And here is what I would look like

References:

Formatting Fonts and Typography

You can do other things to fonts such as alter the spacing, line height, or even color. These are all done using CSS.

Line Height

Sets the distance between lines. Can be written as:

line-height: 1.4
line-height: 14pt
line-height: 140%

Sample:

<style type="text/css">
p.increase {line-height: 1cm}
</style>

Or lets say you want to do it inline, then it would be like this:

<div style="line-height:150%">
blah blah blah blah<p/>
blah blah blah blah<p/>
blah blah blah blah<p/>
</div>

Like this:
blah blah blah blah

blah blah blah blah

blah blah blah blah
Letter Spacing

Sample:

<div style="letter-spacing:5px">
blah blah blah blah<p/>
blah blah blah blah<p/>
blah blah blah blah<p/>
</div>

Like this:
blah blah blah blah

blah blah blah blah

blah blah blah blah
Word Spacing

Sample:

<div style="word-spacing:5px">
blah blah blah blah<p/>
blah blah blah blah<p/>
blah blah blah blah<p/>
</div>

Like this:
blah blah blah blah

blah blah blah blah

blah blah blah blah