Typography on the web
Choosing a font for my website was far easier than deciding on a font for a print publication. The selection for the web is limited by the fonts available on the viewer’s machines. I can’t select a font and then some can’t view it — as it was intended — because it’s not available on their machine.
I already talked about — in a previous post — 10 fonts that are most commonly available on both the PC and MAC platforms. I choose these.
Does the typeface really matter?
You may think: “Who cares if they don’t have a font? It will be replaced by a default font from their machine.”
I never think that way. I want to see how the viewer will see the page: well, as much as possible anyway. It’s impossible to ever be sure what they are seeing as monitors and resolutions and such make a huge difference in how they view it (I’ll save that for another blog posting). But I do try as much as possible see what they see (aided by checking the site on various computers). I do this to see how paragraphs look, how words and lines break, and if I’m getting a little long.
Type considerations and tips
The general rule for choosing a typeface for anything viewed on the monitor (from emails, presentations and websites) is the exact opposite of printed pieces.
In printed pieces, serif fonts are best for body copy while sans work best for headlines and subheads. On the monitor, sans serifs are better for body copy and serifs for headlines and subheads. I instead use sans serifs for both — I prefer it. What I do is work on contrast by font weight and size.
I love making my job easier and having much of it automated (it virtually guarantees consistency). I don’t know what I did before CSS! CSS stands for “cascading style sheets”. It allows me to set up a file with all my styles already set up. I can choose margins, colors, line spacing, etc… It’s very convenient as I used to “hard code” everything. Now, it works with the click of a button.
Step-by-Step to font selection:
Before beginning my website, I establish what I want the text to look like. I can always add more styles later: nothing is set in stone.
- Font styles: Headline, subheads, body copy, highlight, bullets, …
- Typeface selection: Some considerations are whether I like a wider font or one that is narrower with a bigger x-height. I chose a wider one for myself (verdana). I find it infinitely more readable for online viewing
- Type size: I use the same principles here as I do for print layouts. I use contrast to create my visual hierarchy.
- Paragraph styles: Line spacing, margins, alignment
- Font characteristics: Color, bold, underline, italics, etc…
- Test with dummy text: Include headlines, subheads, and at least 3 paragraphs of body text
- Make adjustments as needed
C O N C L U S I O N
To spice up the page, I use graphics to replace some text. For instance, quotes and testimonials can be done as graphics and then you are not limited in your font palette. Navigation can also be done as graphics files. And if you really wanted to: headlines. Just remember to include “ALT” tags and type a description so that search engines can “see” what’s there.
I’ve also seen entire websites as a graphic file. I strongly, strongly, strongly discourage this practice. Graphics are not good for search engine optimization and Google does not like them. You are in fact shooting yourself in the foot!
Related posts:
