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.