Posts Tagged ‘letter-spacing’

CSS Typography - the basics

Monday, November 3rd, 2008

Typography is great, it can really make or break a project. Unfortunately, with websites you lose the ability to use a lot of font that can have a lot of impact. Only you can decide what works and what doesn’t for your project, but here are a few suggestions

Line-height

Line height in CSS is the equivalent to leading in desktop publishing or graphics programs like InDesign or Illustrator. My personal preference is having a line-height equal to 1 and a half times the height of the font. I used to do it the hard way, set my height to something like 12px or 1.2em and then set my line-height to 18px or 1.8em. But if you change the font-size you have to change the line-height too. So, instead, set the line-height to a percentage. For most paragraph text, I set the line-height to 150%.

p {font-size: 12px; line-height: 150%; font-family: Tahoma, Verdana, Arial, Sans-Serif;}

Letter Spacing

Letter Spacing can be a pretty easy way to make your headlines a little better looking. Letter spacing is like the equivalent to kerning.

It’s my experience that using a letter-spacing of -1 looks really good for Verdana headlines of 14px or more.

h1 {font-size: 16px; font-color: #f00; font-family: Verdana, Arial, Sans-Serif; letter-spacing: -1px;}

Letter spacing can also be used to increase the distance between letters for typographical elements, instead of using a negative number, use a positive one.

Font Choices

There are a pretty good number of font choices that are considered safe, of course Vista came out and introduced a bunch of fonts like Cambria and crap I don’t know about because I haven’t used Vista. But font-families help provide something for everyone. You declare your fonts in the order of preference. You probably already know how this works. Unfortunately I haven’t compiled a list of substitute fonts yet, but once I get a naked install of Vista (one without any type of creative suite that would add fonts) I want to create a list.

All I can really tell you is reading on a monitor isn’t like reading on a sheet of paper. On paper, serif fonts work because letters take up equal space, but on a screen, it’s easier to read sans-serif fonts because the little tails can cause eye strain. Basically, for print you hear sans-serif for headlines, serif for body. On the web, you’ll hear sans-serif for body, serif for headline. Of course these are suggestions, nothing is written in stone (you’ll see verdana - with -1px letter-spacing for my headlines here). I also think serif body fonts work well on grungy style web-sites. Sans-serif fonts look too clean sometimes for grunge.

More

Of course there is more, line font-weight, font-style, etc. Maybe I’ll come back and append this post when I get some more time.

Tags: , , ,
Posted in CSS | No Comments »