October 9, 2011

Grooming Web Type with CSS

There are lots of CSS resources online, like w3schools.com, with in-depth and hands-on guidance on styling type for the web. But if you're a typophile who already has a general understanding of CSS, here is a CSS typography cheatsheet I compiled for reference, divided into properties that affect a single character, and properties that affect the paragraph as a whole.

Wayne Thiebaud, Lunch Table, 1964, oil on canvas.

Character
Property Sample Values
font-family p {font-family:"Times New Roman", Times, serif;} Serif
h3 {font-family:"Trebuchet MS", Helvetica, sans-serif;} Sans-serif
p {font-family:"Courier New", Courier, monospace;} Monospace
font-size h1 {font-size:250%;}
p {font-size:10px;}
p {font-size:1.3em;}
font-weight p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
div {font-weight:600;} Defines character weight from thin to thick. 400 is the same as normal, 700 is the same as bold.
text-transform
controls capitalization of text, e.g. all caps, lowercase
h1 {text-transform:uppercase;}
p {text-transform:lowercase;}
h2 {text-transform:capitalize;} Capitalizes first letter of each word.
font-variant
smallcaps
p.small {font-variant:small-caps;}
color body {color:blue;} Color name
h1 {color:#00ff00;} HEX value (3- or 6-digit)
h2 {color:rgb(255,0,0);} RGB value
body {background-color:rgba(255, 0, 0, 0.5);} Alpha, the 4th value, refers to opacity. Varies from 0.0 (transparent) to 1.0 (opaque).
text-decoration a {text-decoration:none;}
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;} Don't use - looks like a link.
h4 {text-decoration:blink;} Don't use - annoying!
Drop Cap example
combine declarations to make a drop cap using 'first-letter' pseudo-element selector
.post-body:first-letter {
    float:left;
    padding: 0px 3px;
    font-size: 400%;
    line-height: 0.70;
}

Paragraph
Property Sample Values
text-align
alignment & justification
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
line-height
e.g. leading
p.small {line-height:70%;}
p.big {line-height:200%;}
Default line height in most browsers is 110% to 120%.
letter-spacing
e.g. tracking
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
word-spacing
space between words
body {word-spacing:10px;} Default word spacing in most browsers is 0px.
direction
e.g. left-to-right
p.rtl {direction:rtl;}
p.ltr {direction:ltr;}
text-indent
indents first line
p {text-indent:50px;} Can use other units of length, like pt, cm, em, etc.
p {text-indent:10%;} Percentage of total text width.

1 comment: