Typography with CSS
practice with Gutenberg text of Don Quixote
Default typography
Since the <body> ... </body> tagset encloses all the displayed content on
your page, you can set default characteristics of all the tags in your document
by applying style rules to the body selector
body {
font-family: Georgia, "Times New Roman",Times,serif;
font-size: 0.8em; /* Sizes text to 80% of "default" size */
line-height: 1.5;
} |
|
Font size
The most useful ways of specifying font sizes are...
- CSS syntax: See that there is no space between the number and the unit
0.8em .
- Percentages or em units. These are relative to the CSS 'parent':
That is, if the body is set to 0.8em and a paragraph to 0.8em, the resulting
size will be 0.8*0.8=0.64= 64% of "normal" paragraph text size.
- px (pixels), when size of text relative to graphics is important.
- Try user-resizing with 'ctrl +' or 'ctrl -', and note that even pixel-sized text does not stay the same.
Other units of measure include the relative keywords small,medium, etc, ex units, even cm and inches!
Points pt may be usefully used in print stylesheets, but don't make as much sense on the screen
Font-size examples
| font-size: 50%
|
blah and more blah |
| font-size: 0.5em
|
blah and more blah |
| font-size: 0.8em
|
blah and more blah |
| font-size: 1.0em
|
blah and 'standard' size |
| font-size: 12pt
|
Use pts only for print styles |
| font-size: 11px
|
blah and more blah |
| font-size: 14px
|
blah and more blah |
|
Font family
| font-family: serif
|
Green pianos (usually times) |
| font-family: Georgia
|
Green pianos |
| font-family: sans-serif
|
Green pianos (often Arial) |
| font-family: Verdana
|
Green pianos |
| font-family: Arial
|
Green pianos
|
| font-family: Arial Narrow
|
Green pianos |
| font-family: Helvetica condensed
|
Green pianos |
| font-family: monospace
|
Green pianos |
|
Font availability
- A font that your web page specifies will not show if not installed on your visitor's computer.
- The Core fonts for the Web, though not universal, still tend to be available on more systems than other fonts.
- Safest serifed fonts: Times New Roman (PC), Times (Mac)
- Safest sans-serif fonts: Arial (PC) and Helvetica (Mac)
Fallback fonts
font-family: Arial Narrow, Arial, Helvetica, sans-serif
- Specify a list of fonts rather than
just one.
- Your visitor's browser will try each one starting with the first one (can be something exotic).
- Finish your list with one of the generic font names, serif, sans-serif.
Link anchors and underlining
a { text-decoration: none }
a:link { color: green }
a:visited { color: blue }
a:hover { color:orange; background-color: #9999FF }
a:active{color:red; background-color:black}
|
| A link to the Mennonite
Quarterly Review.
|
|
You can turn off link underlining by setting the text-decoration property
of link anchors to 'none'.
Leading, spacing, first-line indent
h2 { letter-spacing: 2em }
p { line-height: 2.0em; text-indent: 2.0em }
|
Wow man!
Sentences which go on just for the sake of
displaying leading effects are ones such as this one. Sentences
which go on just for the sake of displaying leading effects are
ones such as this one. Sentences which go on just for the sake
of displaying leading effects are ones such as this one.
|
|
Fonts inside tables