I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

CSS Typography

css / typography

Estimated reading time: 2 minutes, 15 seconds

The design and arrangement of type on a web page is a subtle art. While all of the properties that follow can be applied to any block-level text element (and most can be applied to all), I will make suggestions as to where they are most commonly or best used. Examples of typical settings are also shown. Do not be concerned if you don’t yet understand the units used in the examples (em, ex, etc) – a discussion of those will come shortly.

CSS Properties for Typography, CSS Levels 1 and 2
Property ExplanationExample
colorcolor of text. Can use any color values. p { color: #993; }
text-alignalignment of text to the containing block: left, center, right, or justify. justify is normally used for paragraphs when there is a great deal of content on the page (such as this document). Be careful with center and right alignment: web pages on wide monitors with a mixture of center, left, or right justification can induce a “ping pong” effect in the viewer.h1 { text-align: center; }
line-heightThe vertical space between lines of text, referred to as “leading” in most other typographical contexts. Usually measured as a floating point number.p { line-height: 1.6; }
letter-spacingThe space between letters. Usually applied to heading elements. h1 { letter-spacing: 0.8em; }
word-spacing The space between words. Usually applied to heading elements.h2 { word-spacing: 2em; }
text-indentAmount of horizontal indentation of the first line of text. Commonly applied to paragraphs (especially the first paragraph in a block of text). h2 + p { text-indent: 2em; }
text-decorationCan take values of underline, overline, line-through, none, and blink. Never use blink. You will make me angry. You wouldn’t like me when I’m angry.
Be especially careful with underline: using it can confuse users into thinking that underlined text is a link. Conversely, text-decoration: none set on an a selector will remove underlining on links, which also has to be approached with care. line-through is sometimes used to indicate redacted text, although that should be marked up with del
h3 { text-decoration: underline; }
font-styleFormats text to italic or re-formats it to normal. A value of oblique is also possible to force a font without an italicized face into pseudo-italics. h4 { font-style: italic; }
font-weightSets the weight (boldness or lightness of a font). Can be specified in numbers (100 to 900, in increments of 100; 400 is normal, 700 is bold; 100 is light), or by keyword: bold, bolder, or lighter. Note that the effect of this should be tested, as not all fonts have generated light or bold variants.
Avoid font-weight: bold on headings, as it rarely makes any difference. (h1 - h4 are bold by default. Do not use font-weight as a substitute for markup: headings should still be marked up as headings.
h1 { font-weight: 100; }
text-transformTakes values of uppercase, lowercase and capitalize. Especially useful on headings and links, where it can be used to ensure consistency of text appearance without worrying about always leaving the capslock key on (or off) while creating content. h1 { text-transform: uppercase; }
font-variantSets the text content of the selected element to Latin-style small-caps. Useful for headings and the first lines of opening paragraphs. h1 { font-variant: small-caps; }
comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.