Skip to content Skip to tags Skip to twitter news Skip to blog roll Skip to categories Skip to archives Skip to recent posts

November 27, 2007

3 Comments

Using EM for Font Size: learning on the go

by in css on November 27, 2007 @ 2:00 pm

With my current design and layout I am trying to use EM for my font size so that it will expand correctly when an end user resizes their font. The problem is, I am not using it correctly; I thought I knew, but I am sadly mistake. As you can tell by some crazy looking fonts here and there that I am not fully grasping how to truly implement EM. So to fix that issue I figured that I might as well do some research and fix the issue.

I started out by doing a search for “css em;” yes, it was that simple to get started. The results varied from good to bad and the way I weeded out the bad was the way probably most users weed out a bad site, The Design. After that, if I did not understand what the person was saying after the second paragraph, I moved on to the next site. What I end up with was a few that really made it clear to me what and how to use the EM in css. I am just going to post some quotes that I thought made things clear to me with a link to the site for you to get the full scope of the article.

The first site I came across what Monday By Noon, they themselves point to a few articles that were pretty good. The first ten paragraphs were about why not use PX, %, or EX. Although they were good, I was only interested in learning how to properly use EM so I only skimmed them. The “Putting em to Use” was the most informative to me with regards to the article.

…using em units for font-size is dependent on the font size of parent elements. This is the most important concept to grasp when using em to scale text, and most often confusing to early adopters.

Those two sentences made the most sense and really put things into perspective.

In order to keep from being confused, it is often a good idea to keep font-size declarations to a minimum. Once the font-size is defined in the body, you should only continue to define where needed due to the fact that em font-sizes are relative to parent elements.

As you can tell from my current site, I am not following that advice. When dealing with PX, I found myself giving everything a size and when moving to EM I was doing the same thing and really started frustrating me because some lines would be huge where others are the way I wanted.

The comments were where I really started to get some good information. The best comment and most informative was:

…em scaling is inherited from its containers, in the case you mentioned, its like saying set all the body text to .81em, then set the table cell to .75em of this, so it is the correct and logical behaviour. What you want is text 6% smaller that the body text so set the td text to .94 em.

I would suggest that you do have a read of the comments, very very informative. That site again is mondaybynoon.com.

Site number 2 that was very usefull is Jon Tangerine; this one may be information overload, so take it piece by piece. He goes over how to convert your PX size to Em size while taking into account the size of the parent element. He also take using EM to the next level by using it with the complete layout of the site; margins, paddings, line height, and images are all using EM to keep their size relative when the end user resizes their text.

Margin, line height, padding etc. in ems are all relative to the font size of the element they belong to.

Ems allow only three decimal places. More is fine in calculations but before writing CSS, round it up to three

He really explains the EM thing real well, have a read at it at http://jontangerine.com/

Last but now least, here is a site you should bookmark, http://riddle.pl/emcalc/; it will save you time when needing to figure out what 23px equates to in em.

I personally will be using the information found and putting it to good use, so look for some layout changes to this site as I experiment.

back to beginning of this post back to skip to links
Tags: , ,

If you liked this article why don't you share it:

Stumble it delicious Digg it Reddit it DZone it Bump it Mixx it! Buzz up! E-mail

3 Responses to “Using EM for Font Size: learning on the go”

A List Apart had a great article recently on using em for font-size, especially when it comes to some differences in browsers. You may also find that a reset stylesheet like Eric Meyer’s is helpful.

http://www.alistapart.com/arti.....textincss/
http://meyerweb.com/eric/thoug.....-reloaded/

I actually just wrote a post in response to yours (link above). As I say there: While I can see how pixel conversion seems useful when you first make the switch from px to em, I think the whole point of using ems instead of pixels is to embrace the concept that, on the web, sizes are relative, not absolute.

@rdmey: First off, read your post and it was very well written. Can’t wait to get to that point myself :D

After putting up this new design and trying to do the px to em conversion your point because more truer (?). I am not a visual person, so the whole typography part is very hard for me.

I appreciate the links and the info provided in your post.

Trackbacks

  1. Using ems for font sizing in css | rdmey

Learn from my mistakes, I got burnt by the flame, you don't have to.


RSS Feed Link My Hosting of Choice

66 queries. 0.314 seconds. Powered by WordPress visitor stats