em unit and CSS
October 2, 2008
Till now, i was using pixel as a type measurement unit for WebPages. Recently I gone through some web typography articles and now I am planning to move on to “em”. Just trying to explore it more and do conformations with this post.
EM is a relative unit rather than absolute, hence it can’t be defined for a specific typeface, its same for all fonts at a given point size. So, if user is using 12 point for running text as its default browser font-size, 1em is equal to 12 pt, 2em (may be for headlines) will be 24 and so on.
We can do this is by directly defining point sizes also but there will be some users who like to keep their browser default font as 24pt (for instance), so if we have used 2em for headlines instead of making it 24pt, It will automatically scale itself to 48pt and the overall hierarchy will be maintained.
Well, this is what “em” means to me accordingly to its usage, go google it – you will land up at various other interesting definitions and perceptions.
Further Readings and Resources
Em Calculator
http://riddle.pl/emcalc
About emdpi
http://www.emdpi.com/index.html
Typophile wiki
http://typophile.com/node/13761
October 2, 2008 at 10:17 am
Nice and informative…
October 2, 2008 at 11:43 am
I still need to explore how it helps in print design.
October 9, 2008 at 5:15 pm
I have always been using pixels. I have heard that using em’s is a better practice, but it sounds too unpredictable to me. With pixels I can be sure that the text is going to be as big everywhere as I see it on my screen so I dont have to worry about different browsers, users etc.
But I will give em a try nonetheless…
October 9, 2008 at 9:21 pm
@ Juhi
Thats what the difference is, in pixels u predict that everything is fine because it looks like that on your screen, you never know what kind of strange hardwares and applications the end user is using.
Then the screen-size, resolution, browser defaults, monitor dpi comes into consideration.
The other advantage is for the sight-impaired users who like to keep their browser default font size larger than normal. That time pixel will fail to adopt accordingly to his/her screen…but em will still work.
October 11, 2008 at 9:14 pm
Nitin, do you mean em would be usefule mainly for keeping the size consistency? And how do I take it into my normal web practise? Please correct me if I am wrong, I meant how do I implement it?
October 11, 2008 at 10:16 pm
Yes, it does maintain size consistency for various browsers and hardware platforms.
While designing the layout in PSD ( or any other app ) you can use pixels, but in development stage, type-sizes should be defined in ems for better flexibility.
For eg. if you have used 12px for your running text and 18px for your headlines, then, in CSS it should be defined as 1em ( considering 12 as browser default) for body text and 1.5em for headlines. So in case when browser default changes your headlines will automatically adapt accordingly to 1.5 times of running text size, that will maintain the hierarchical structure.
So as a designer, you should inform the developers about the browser defaults and provide them all em measurements for various type elements of layout.