-
A good sense of how the typography will work in tandem with your design is essential when designing any web page or graphic with text. The primary considerations are whether a font is easily readable, whether or not it is available to all your visitors (web-safe), and the impression it will convey about your business or organization (formal or casual).
Once a font style is defined, the font renders so long as your visitor has it installed on their computer; if the font is not installed the default font "Times New Roman" is used. For web pages we typically recommend Sans-Serif fonts for readability.
small headline
Larger Headline
Headline Example
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.
The following Serif and Sans-Serif font-families are presented in their type-face for assessment of how each would look in a web page.
.
Serif font-family
- Times New Roman, Times, serif
- Palatino Linotype, Book Antiqua, Palatino, serif
- MS Serif, New York, serif
- Georgia, Times New Roman, Times, serif
Monospaced font-family
- Courier New, Courier, monospace
- Lucida Console, Monaco, monospace
Sans-Serif font-family
- Arial, Helvetica, sans-serif
- Lucida Sans Unicode, Lucida Grande, sans-serif
- Arial Black, Gadget, sans-serif
- Tahoma, Geneva, sans-serif
- Trebuchet MS, Arial, Helvetica, sans-serif
- Verdana, Geneva, sans-serif
Cursive font-family
- Comic Sans MS, cursive
In addition to Font-Face, commonly employed CSS styling options include:
- Font-style: Normal, Italic, Oblique
- Font-variant: Normal, Small-Caps
- Font-weight: Normal, Bold, Bolder, Lighter, 100-900
- Font-size: 9 to 36px (typically); em often used (browser defined relational sizing)
- Color: Set by HTML color name or hexadecimal value
- Text-transform: Capitalize, Uppercase, Lowercase, None
- Line-height: Sets the height of each line from the next (px or em)
- Letter-spacing: Sets the space between each letter of text (px or em)
