Playing With Typography, Part 1 – Font Size
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.
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;
}
