Font Sizing

S.M.B.

I am currently in the process of building a mobile platform for our web sites which may one day grow into a fully responsive framework for all our sites.

I'm looking at what's the best way to handle font sizes in general now that I get to start form scratch and build upon it.

How does everyone else approach it?

A font size of 62.5% on the body and easily calculated ems?

A base font size of 14px or 16px and more complex mathmatical calulations from there on in?

Full pixel based font size?

For every argument I see for one method I find a counter argument 30 minutes later.

I'm considering a combination of 62.5% on the html tag and rems at the moment as seen here.

http://snook.ca/archives/html_and_css/font-size-with-rem

And here's the counter argument:

http://csswizardry.com/2011/05/font-sizing-with-rem-could-be-avoided/

smash

This is the rule I follow:

If you were to just set your base at 12px in the first place (body{ font-size:0.75em; }) then:

You don’t need to define every element individually; you style the exceptions rather than rewriting the rule.
You don’t get crazy-annoying inheritance issues.

S.M.B.

Thanks smash. I'm considering rolling back to a font size of 100% on the body and going from there.

But looking at the use of fonts within all our current sites I just know it's going to be a massive headache in the long run. There's going to be a lot of target/context calculations going on although I'm incorporating LESS as a way of minimising the effort needed for this.

The use of rems is very tempting though along with the clarity it privides within the CSS itself.

Another good article but with no real conclusion.

http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/

Giblet

Use 100% and then use relative to 1em after that. It isn't *that* hard to work out what happens to 1em inside a 2em container. rem is great and all, but doesn't work in enough places, you'll be duplicating css. I'd start first of all by removing ALL reset and font sizing from the css and work from there.

S.M.B.

Here's the solution I've gone with then.

A font-size of 100% on the body giving a base font size of 16px.

Options to increase font size resulting in a font-size of 112.5% and 125% being applied to the body.

All font-sizes, line-heights and vertical margins and padding applied in ems. Usually font sizes of 12px, 14px and 24px.

Leads to quite a few calculations unfortunately but no need for the pixel based fallback required for rems.

desaparecidos

I don't get the question in this thread? Am I missing something?

You can't count on the default text size of any given browser.

100% / 1em on the body tag is just equals the default font size of the browser, but you can't be sure that will always be 16px?

Either use 100% or use em's, don't mix and match and give yourself a headache.

p

Read this:

http://www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/

S.M.B.

desaparecidos wrote: »

I don't get the question in this thread? Am I missing something?

You can't count on the default text size of any given browser.

100% / 1em on the body tag is just equals the default font size of the browser, but you can't be sure that will always be 16px?

Either use 100% or use em's, don't mix and match and give yourself a headache.

True, I guess I am assuming the default size will be 16px and by using ems within your CSS I am catering for the possibility that it could be any size.

The whole mixing of percentages and ems is a valid point. It could easily be 1em, 1.125em and 1.25em used on the body tag depending on the font size users select.

Giblet

desaparecidos wrote: »

I don't get the question in this thread? Am I missing something?

You can't count on the default text size of any given browser.

100% / 1em on the body tag is just equals the default font size of the browser, but you can't be sure that will always be 16px?

Either use 100% or use em's, don't mix and match and give yourself a headache.

You don't care that its 16px or not, you design relative to that size. If someone is using 24px, the entire site will scale up to match (like zooming it, or having a really large iPhone if you can imagine that). If you've taken precautions and used good practices, you probably won't have much go wrong. In responsive web designs, you have to use less granularity in sizes and use less sizing rules in general and just let the flow of the document adjust itself according to the media.