Contents
[ hide ]
Fonts and Typography in CSS
Web design is also about anticipating what the site visitor will see. This is definitely true for fonts as not every computer or screen will render fonts the same way.
There are a few basics which are good to know when building your style-sheet and dealing with fonts.
1. Define Font Families
As web designers we cannot know the exact setup of each visitors computer but we know that not all our visitors are set up the same way. When defining fonts we therefore define font families, rather than defining just one single font.
Type
Under the font-family call in CSS we can then list typefaces according to our priority, for example
font-family: Verdana, Arial, Tahoma, Helvetica, sans-serif;
This call means: show Verdana, if not available, show Tahoma, and if that’s not available, show Helvetica, and if even this is not available use the default sans-serif font of your installation. Your preferred font is the first one on the list.
Always define your font family before thinking about defining typeface, font size, spaces, line height or other type options.
2. Some Sample Style Listings
Serif for titles:
title { font-family : "Times New Roman", Times, serif; }
Sans-serif for body
body { font-family: Verdana, Geneva, Arial, sans-serif: }
Monospace for code
code { font-family: "Courier New", Courier, monospace: }
Script for Signatures
signature {font-family: Corsiva, "Lucida Handwriting", script: }
Fantasy for initial paragraph lettering
p:first-letter {"Comic Sans", sans-serif;}
If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription.
Author: Yorgo Nestoridis, Media Marketing & Publishing, Founder of YORGOO Publishing, YORGOO Press and Semiomantics.
3 Comments
Another good shot …:-)
excuse me bill gates, i did not find this very helpful for my coursework. bye
One Trackback
[...] Original post: Fonts and Typography in CSS | Web Design [...]