A Smart Way To Handle Relative Font Sizing In CSS

Gut Reactions

July 09, 2009 by Keith Norman

This technique was contributed by one of our campers at Camp Firebelly, Sarah Keane. Here's how it works:

Apply a font-size of 62.5% to the body tag:

	
	body {
		font-size: 62.5%;
	}

This sets the base font size to 10px, which makes it super easy to figure out how many em's to set for your other font sizes. They will just be taken from a base 10. So 1em is 10px and so forth. For instance, if you wanted to set p tags to 12px:

	
	p {
		font-size: 1.2em;
	}

Or set your h2 tags to 16px:

	
	h2 {
		font-size: 1.6em;
	}

Thanks Sarah for the awesome tip!

Also, just an aside for the non-believers that set their font sizes in pixels because it's easier: you are doing a disservice to any of your IE users who want to increase or decrease their browser font size settings. IE does not increase/decrease font sizes that aren't set with a relative sizing (either % or em). This is a major accessibility issue that you should really take the time to fix. Think about it.

Comments

image placeholder

authors

twitter

The Daily Do-Gooder is out! http://t.co/eGyENLlr ▸ Top stories today via @govoluntr @bstatements @ndinm @sabinevatel @nynjgoodwill

+ 2 days ago

Photo: **** pleasant house is perfect. Mushroom & kale pot pie. http://t.co/0lQxmLkm

+ 6 days ago

We're hiring! Experienced web/ux designer... we want you! - http://t.co/lKSyrwZe

+ 9 days ago

Firebelly Design

Arts + Entertainment

Community Development

Education

Energy + Conservation

Financial

Health + Wellness

Industrial + Manufacturing

Professional Services

Real Estate

Retail + Consumer

Social Justice

Gut Reactions