Just a quick update to the previous post.
In the body section of the CSS I wrote ‘font-size: 100%;’
If you set this to 62.5% instead you will have a 10px base for you em fonts.
The way this works is that 100% is the equivalent of 16px.
This means that 1em = 16px.
When you set the body font-size to 62.5% you actually set the base font to 10px (0.625*16=10) which will give you 1em = 10px.
In the ends this means that 1.2em = 1.2*10px = 12px. It just makes your life so much easier when setting the default font-size for your elements since most graphic design is measured in pixels.
2008/09/26 17:13 | CSS - Web Development | Trackback | No Comments »
After my recent play-around with the typography on the site I decided to stay on the topic and this will hopefully be the first real post about it in a series of posts.
For this first one I’ve only been playing with fonts, font-sizes and line-heights.
It’s nothing special really but what is interesting is that it scales with the browsers increase/decrease font functionality which, for example, the ‘px’ measurement will not properly do.
From the example it is also evident that you have to adjust the font size depending on which font you use. Also line-height is very underestimated, and frequently forgotten. All browsers will give you a default value, just like with font-size, and that value will most likely make the text on your site readable. What you have to ask your self is if you want it readable or do you want your users to enjoy reading the text?
I’ve provided a couple of examples with different fonts. I’m not saying they are perfect in any way but hopefully they will illustrate how you quickly can change the way you present your texts.
View the examples here.
The CSS that made the examples:
body
{
background-color: #EEE;
color: #000;
font-size: 100%;
}
h2
{
font-weight: normal;
font-variant: small-caps;
margin:0;
}
div.times-new-roman h2
{
font-family: times new roman;
font-size: 1.5em;
line-height: 1.6em;
}
div.times-new-roman p
{
font-family: times new roman;
line-height: 1.2em;
font-size: 0.875em;
}
div.verdana h2
{
font-family: verdana;
font-size: 1.3em;
line-height: 1.35em;
}
div.verdana p
{
font-family: verdana;
line-height: 1.3em;
font-size: 0.75em;
}
div.sans-serif h2
{
font-family: sans-serif;
font-size: 1.3em;
line-height: 1.3em;
}
div.sans-serif p
{
font-family: sans-serif;
line-height: 1.35em;
font-size: 0.75em;
}
div.tahoma h2
{
font-family: tahoma;
font-size: 1.4em;
line-height: 1.4em;
}
div.tahoma p
{
font-family: tahoma;
line-height: 1.3em;
font-size: 0.8em;
}
div.helvetica h2
{
font-family: helvetica;
font-size: 1.4em;
line-height: 1.4em;
}
div.helvetica p
{
font-family: helvetica;
line-height: 1.3em;
font-size: 0.8em;
}
2008/09/22 22:57 | CSS - Programming - Web Development | Trackback | 1 Comment »
