tutorial: css font properties and the font: shortcut

[terra]

So yesterday I wrote some code out because I despise the font tag, and today comes a more in-depth look at font properties in CSS.

The example

.demo {
font-style: italic;
font-weight: bold;
font-size: 16px;
font-family: 'Playfair Display', Georgia, serif;
color: #b53a4c;
}

Or, when written as an inline style:

<span style="font-style: italic; font-weight: bold; font-size: 16px; font-family: 'Playfair Display', Georgia, serif;"></span>

This is what the text looks like.

Let's look at each property with a bit more depth.

---

font-style:

This is basically used to make your text italic, or not italic. Some possible values are:

font-style: italic;
font-style: oblique;
font-style: normal;

It's a pretty boring property!

---

font-weight:

This controls the weight of the text, and makes things bold, superbold, or it makes text unbold. There are a couple ways it can describe this— either with numbers (100, 300, 400, 700) or with words (lighter, bold, bolder). I'll give you some examples.

font-weight: bold;
font-weight: bolder;
font-weight: 700;
font-weight: lighter;
font-weight: normal;

But wait, some of those don't look any different!

Well, yeah. Some fonts don't have a lighter variation, or a bolder setting. So when you tell the browser to display them, they just show up like normal. (And bolder shows up like regular bold.) Most fonts do have a bold setting, though, and let's be honest, bold is what this property is used for 95% of the time.

---

font-size:

This is the embiggenator property, and there are a lot of ways to express font size.

font-size: 14px;
font-size: 1em;
font-size: 1.6em;
font-size: .8em;
font-size: 200%;
font-size: xx-small;
font-size: larger;

Font-size is usually expressed, though, in terms of px or em. The former is an absolute size: you set the font-size to 14px and it will make your text exactly 14px tall. (Or 24px, or 10px, or 8px, please don't make things smaller it gets hard to read.) The "em" unit is a relative unit, which means it sizes font relative to the text around it. Absolute font sizing tells fonts exactly how big they ought to be, while relative font sizing tells fonts how much bigger or smaller they ought to be.

The advantage with relative sizing is mostly accessibility. 24px height is not so large on a computer screen, but it's huge on someone's cellphone. People with vision impairments often set their browsers to make the font a lot bigger— if you tell the text to be 8px high, it will override those settings, and they probably won't be able to read it. (Whereas, if you just choose .8em, it will be smaller, but maybe not small.)

So that's the advantage to using relative sizing, and why DW uses relative units in all its system layouts.

How ems work

I explained that they are a relative unit, which makes them kind of like a math problem. The value is actually something you are multiplying the current font-size by. For example, the browser default for text is usually 16px. .75em of that would give you 12px text, 2em would make 32px text, and 1em keeps it to 16px. But that's only if you start out with 16px text!

---

font-family:

This lets you change the font! It is therefore, the niftiest. It's also one of the more complicated tags. Here are some examples:

font-family: 'Playfair Display', Georgia, serif;;
font-family: 'Courier New', Courier, monospace;
font-family: Arial;
font-family: cursive;

The way the font-family tag works is this: the browser sees the first font and checks to see if it is installed on the computer. If it is, then the browser uses that font to display the text. If it isn't, it goes onto the next font, and tries that. Take the first bit of example text: Playfair Display is a really cool open-source font, but chances are you do not have it installed on your computer. But I specified alternative as my next preference, Georgia, which most people do have installed on their computer. The last alternative, "serif", is a generic family: the browser will just go looking for any fonts on the computer that have serifs. It's a nice way to cover all the bases, so to speak.

Some generic families include serif, sans-serif, monospace (these are fonts where each letter takes up the same amount of space), cursive, and fantasy.

Oh, and about quotation marks: You might notice I put some fonts in 'quotation marks' and leave some fonts fancy free. I put quotation marks around fonts with more than one word in their name, so, 'Times New Roman' but not 'Helvetica'. You can put quotation marks around 'Helvetica' if you want, though, it's just a preference.

Putting it all together

So one thing about this is we've written an awful lot of code to do a very small amount of formatting. It would sure be neat if there was some way to combine this all into one tag, and, SUDDENT TWIST, there is. You can collapse all the font properties into a single glorious font tag.

font: italic bold 16px 'Playfair Display', Georgia, serif;
font: 1em Verdana, sans-serif;
font: 12px 'Times New Roman';

Here are the tricky bits.

It only incorporates certain properties. Basically, the font: shortcut tag only works for CSS properties that deal with font. You can tell which ones they are because they begin with the word font. So, font: 12px Georgia black; doesn't work, but font: 12px Georgia; will.

Order is important. The code will break if you type it out of sequence. The order goes: font-style font-weight font-size font-family. So font: Georgia 12px bold; bad, font: bold 12px Georgia good!

You have to specify a size and a family. The bold and italic stuff is optional, but you have to include at least a size and a family. So font: italic bold Georgia; is no good, and neither is font: bold 2em;. If you want to change the font but don't want to change the font-size, you can use 1em, so font: 1em Georgia; works.

To return to my beginning example, we could write those five lines original coding as just two.

.demo
font: italic bold 16px 'Playfair Display', Georgia, serif;
color: #b53a4c;

Or, expressed as an inline style:

<span style="font: italic bold 16px 'Playfair Display', Georgia, serif; color: #b53a4c;">This is what the text looks like.</span>