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 

About emdpi

Typophile wiki


6 Responses to “em unit and CSS”

  1. Prax Says:

    Nice and informative…

  2. Nitin Garg Says:

    I still need to explore how it helps in print design.

  3. Juhi Says:

    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…

  4. Nitin Garg Says:

    @ 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.

  5. Nihal Says:

    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?

  6. Nitin Garg Says:

    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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: