< Styling Tables | Mini Banner tutorial for Microsoft Paint >
Fonts
22 Nov 2006 > 0 Comments
Creating a <div> based Template using CSS (Part: 7)
There are basically two types of font/typeface: Serif and Sans Serif.
Serif
The letter strokes on Serif fonts are capped with decorative lines.
Although serif fonts look beautiful in print, they do not render too well on the computer, especially at small sizes.
Usually serif fonts are reserved for headings, while the main text is displayed as Sans Serif.
Sans-Serif
Sans is a French word, meaning ‘without’; therefore Sans Serif fonts are typefaces without the decorative features that typify serif fonts.
Most websites use Sans Serif fonts, because they render much better at smaller sizes than Serif fonts.
A popular Sans Serif font is Verdana, originally developed for Microsoft, and highly readible at small sizes.
Font-Family
The font is defined in the stylesheet using the property, font-family:.
I’m using the Sans Serif font Verdana for my template, but it is also good to add some additional fonts in case the visitor doesn’t have that particular font installed on their computer.
Also, it is recommended that you use the generic family name sans-serif. If a font name contains whitespace place it in quote marks (eg: “Trebuchet MS”).
CSS
body {font-family: verdana, helvetica, arial, sans-serif;}Font-size
Fonts can be measured in various ways, including the use of percentages (%), Pixels (px), and ems (em).
The problem with Pixels is that they do not resize in Internet Explorer, whereas percentages and ems are fully scalable in all browsers.
IE7 has remedied this problem somewhat by including a new feature that allows the user to magnify web pages.
For my tut, I’m going to use the em. The default em size is 1em. The value is changed by using the font-size: property.
CSS
body {font-family: verdana, helvetica, arial, sans-serif;
font-size: 0.8em;}I also want to define the size of the headings, providing me with an opportunity of explaining how the em unit works.
The value of an em unit depends upon the value of it’s relative element. In this case the font-size in my Heading tag, depends upon the font-size of the Body element. by setting the value of <h1> at 1.1em;, it will be 1.1 times larger than the <body> set at 0.8em.
If I were to set #c2, #c3, and #c4 with a font-size of 2em, then the text would be twice the size of the font-size body value, and <h1> would then be 1.1em larger than the value of the content div’s rather than the em value in the body. I hope that makes sense 
Anyway, I’m just going to define the font-size for <h1>. For some reason you need to add the font-size value directly to heading tags, otherwise they remain at their default settings.
CSS
h1 {font-size: 1.1em;} Here’s how the template looks now that the font properties have been defined.
< Back to everything
Keep going… >
Related Posts
No Comments (Have your say)
Menu
- Paint Shop Pro Tutorials: Tutorials and downloads for PSP (versions, 8, 9, X, XI, X2) users
- ProBoards Templates: Downloadable Version Four ProBoard skins
- HTML and CSS: The stuff that Websites are made of
- Microsoft Paint Tutorials: Make nifty graphics using Microsoft Paint
- Wordpress Themes: Wordpress designs, pre-made templates and tutorials
- Downloads: Icons and other gifties
- ProBoards Tutorials: Customize your ProBoards forum
- Portfolio: My Web design and digital Art stuff
- Digital art: Messing around with my image editor
- Journal: Typical blog stuff really
- Various Stuff: Stuff that doesn't fit anywhere else
Recently Commented on...
September 4, 2010
August 24, 2010
July 14, 2010
May 3, 2010
April 24, 2010
Mahud Version 5 © 2006-2008 > powered by Mr Whippy Wordpress