When it comes to declaring font size we know we have a variety of methods in order to achieve it. Few of them are as below;
1. px – the size in number of pixels
2. em – the size relative to the parent element
3. in – the size in inches
4. cm – the size in centi-meters
And a few others are there as well. On top of these there are a few keywords available to define text size such as;
1. xx-small
2. x-small
3. small
4. medium
5. large
6. x-large
7. xx-large
In general I have seen many people using px(pixel) definition to markup your text size. Of course this works well out of the box but one caveat it brings along with it is a small scalability issue that I am going to touch upon this article.
To start off lets vamp up a test html plus a css file to go along with it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" id="vista"> <head> <title>Test my font size</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> </head> <body> <h1>My Awesome Article</h1> <p> Though i started the heading as my awesome article i do not actually know what to write about that simply could be awesome. </p> </body> </html>
body{
font-size:15px;
font-family:"Times New Roman",Georgia,Serif;
}
h1{
font-size:20px;
}
p{
font-size:18px;
}
Nothing special as you can see. It’s just a simple definition of a header and a paragraph element. And within our style sheet we have defined a font-size attribute specifying it to by 15px which will be the default size on which elements will base on. Now let’s run this and see how this looks like;
Ok looks fine to me. How about you guys? So what is the problem you might ask? You probably must be thinking I’m nuts to assume something was going to be wrong. Though there is nothing wrong implicitly in this markup it fails in one area where if for an instance a person with bad eye sight wants to increase the default text size through the browser by going to View->Text size in Internet explorer and selecting a text size, the text in our site won’t budge. It will always stay on the default 15px size we defined.
Not what you want for your site right? A website should be accessible, readable no matter if you have a disability or not. So in this instance how are we going to fix this problem with our sites text? We want it to scale according to the user preference.
In order to do that we first need to specify the size in any one of the keywords I mentioned earlier. Afterwards any subsequent element you want to increase/decrease the size, we use percentages to define the size based on the base keyword size we defined. Ok enough words; let’s put this into action shall we?
body{
font-size:small;
font-family:"Times New Roman",Georgia,Serif;
}
h1{
font-size:180%;
}
p{
font-size:90%;
}
So now if we try to resize again we will see this time our text within the page will scale according to the user’s need. Following is a screen shot of the same;
One thing before i forget, for this to work in IE 5 you need to apply something called the Box model hack which was developed by Tantek Celik. . You need this hack because in IE 5 it displays the text one step larger than the font size keyword we define.This is the short version of the same hack defined in the site;
* html body{
font-size:x-small;/* for IE5*/
f\ont-size:small;/* for all other IE versions*/
}
That’s it guys. Most of you might already know this. So for you guys this is just a revision, for all others I hope this helped you in anyway. Comments are as usual always welcome.
God Bless
IE 5 ? Who the hell is still using IE 5 ?!?!
ReplyDelete@MaxiWheat : haha i mentioned that just so to make the design work in all possibilities. i hv no idea if there is a user base for IE 5. But hey you never know :)
ReplyDelete