Clever Geek Handbook

Weird but well-defined fonts when using ems

I noticed that sites using ems for fonts tend to have weird but clearly specific numbers, for example: in the popular reset css - normalize.css I found that h3 is set to 1.17em, h4 is 1.33em and h5 is set to 1.67em. Why is this? Is there a calculator or something I should use to calculate each font size?

I have adjusted the font size in ems for headings, p, titles, etc., but without a calculator or whatever, I just make it bigger or smaller until I think it looks good. In other words, my site has a font size of 0.7em, 0.9em, 1em, 1.1em, etc., even 4em (I like the big h1).

This is bad? Did I ignore an important fact when using ems for font size?

+3


source to share


2 answers


As you know, em

font size units allow dimensioned text elements to maintain their proportions relative to other text elements.

There is a scalable text method in which the "base" font size is set in an HTML or BODY element. I usually set this "base" font size to 10 pixels because it's a nice round number and makes it easier to calculate ems

throughout the site. Say the header is 15px in my design. I would set this header to 1.5em (1.5 x 10px = 15px). Due to these calculations, you may notice seemingly strange values.



"Fractional" values ​​can also seem unusual. For example, "1.33em" is essentially "1 ⅓ em" and "1.67em" is essentially "1 ⅔ em". They run at a font size one third and two thirds larger than the base font, respectively.

If you are developing on the fly (no comp design) you are probably a good fit until you look right. It's always a good idea to test things out by changing your browser settings and / or default font size to see how your pages are responding.

+4


source


Showdev does a good job of doing what ems does, however, to answer your question as to why you see this to be the case.

This article is well written for information on how to achieve consistent text size across all browsers. This jist is that 14px in IE7 is not the same as 14px in Firefox. Ems gives a more consistent result. http://alistapart.com/article/howtosizetextincss



Also, just to give an extended explanation. Ems refers to the font size of the parent element. Therefore, if I have:

body {
  font-size: 14px;
}
p {
  font-size: 1em;  /* 14px */
}
h2 {
  font-size: 1.5em; /* 21px */
}
#myDiv {
  font-size: 16px;
}
#myDiv h1 {
  font-size: 2em; /* 32px */
}
+1


source






More articles:


All Articles