css 101

Fonts and Text

You can independently set the font face (font-family), the font size, font style (such as italic) and the font weight (such as bold):

Font sizes can be set in pixels, points, ems, or relative values.

You can control how widely your letters and lines are spaced, set text color, align text left or right, and even change the case of text, all from within CSS.

Setting text color and letter spacing:

Letter spacing can be set in points, pixels, or ems. "Em" is a typesetter's term, referring to the width of one character. We recommend using ems when setting text sizes and widths, because it flexes automatically with the user's current screen resolution and magnification.

Line spacing is not set in ems - it's a simple decimal value representing a factor of the current line height. In the example below, "1.8" means "spacing between lines should be 1.8 times whatever the current height of a line of text is."

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Making text uppercase:

Amazingly, you can even control the case of letters. This is very handy if, for example, your staff has always entered headlines with Initial Caps, but you later decide that headlines on your site should be all uppercase. Rather than go into your CMS and change every headline in the system, just set the display case in CSS. Here's the exact same paragraph above but with the text-transform property set:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Of course, you can also use "lowercase" rather than "uppercase" if you need it, or "capitalize" to have the first letter of every word automatically capitalized.

Alignment

It's easy to cause text to align left, right, or center with:

text-align: center|left|right;

Here's a centered headline

Here's a right-aligned headline

Here's a left-aligned headline

Similarly, you can use text-align:justify; to remove the ragged right edge of text and justify both sides (we've also set left and right margins for illustration purposes here):

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

More info on fonts
More info on text