Quick Tip 3 – EM Font Sizes
Font sizes can be tricky, especially when your working with ems. For all of you who are unsure what ems actually are and why you should use them instead of pixels continue to read below.
Ideally everyone would work with pixels however unfortunately some browsers (ie: Internet Explorer) will not re-size text based in pixels as it is a fixed measurement whereas ems is not and almost percentage based.
Trying to work out what 12px is equal to in ems can be a hassle. A quick fix I use on a regular basis helps convert ems to an equal size of pixels when coding and makes life so much easier. So here it is –
body { font-size: 62.5%; }
With this snippet applied to your body tag it will force ems and pixels to near equals. Example :
- 1em is equal to 10px
- 1.1em is equal to 11px
- 1.2em is equal to 12px
- 1.3em is equal to 13px
- 1.4em is equal to 14px
- so on…
I hope you find this useful as I know it saves me a lot of time.
Related posts:
- Cufón Font Replacement
- Quick Tip 15 – WP More Tag
- Quick Tip 5 – Compact CSS
- Quick Tip 6 – CSS Shorthand
- Quick Tip 9 – CSS min height
Posted By: Martyn
Hi, I'm Martyn, the Lead Designer for Web Design GM and really hope you find my existing and upcoming articles useful. Please leave comments below and I will try to respond to any questions as soon as possible.
