Boards.ie uses cookies. By continuing to browse this site you are agreeing to our use of cookies. Click here to find out more x
Post Reply  
 
Thread Tools Search this Thread
14-02-2012, 09:37   #1
S.M.B.
Registered User
 
Join Date: Jul 2006
Posts: 3,297
Font Sizing

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_cs...-size-with-rem

And here's the counter argument:

http://csswizardry.com/2011/05/font-...ld-be-avoided/
S.M.B. is offline  
Advertisement
14-02-2012, 09:47   #2
smash
Registered User
 
smash's Avatar
 
Join Date: Jan 2006
Posts: 24,373
This is the rule I follow:

Quote:
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.
smash is offline  
Thanks from:
14-02-2012, 10:31   #3
S.M.B.
Registered User
 
Join Date: Jul 2006
Posts: 3,297
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/t...egible-letter/
S.M.B. is offline  
14-02-2012, 11:23   #4
Giblet
Registered User
 
Giblet's Avatar
 
Join Date: Oct 2001
Location: Dublin
Posts: 10,743
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.

Last edited by Giblet; 14-02-2012 at 11:29.
Giblet is offline  
Thanks from:
15-02-2012, 10:49   #5
S.M.B.
Registered User
 
Join Date: Jul 2006
Posts: 3,297
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.
S.M.B. is offline  
Advertisement
15-02-2012, 21:55   #6
desaparecidos
Banned
 
Join Date: Nov 2010
Posts: 1,310
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.
desaparecidos is offline  
15-02-2012, 22:03   #7
p
Registered User
 
p's Avatar
 
Join Date: Feb 2001
Location: Munich
Posts: 2,055
Read this:

http://www.smashingmagazine.com/2011...ostly-mistake/
p is offline  
16-02-2012, 09:36   #8
S.M.B.
Registered User
 
Join Date: Jul 2006
Posts: 3,297
Quote:
Originally Posted by desaparecidos View Post
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.
S.M.B. is offline  
16-02-2012, 11:22   #9
Giblet
Registered User
 
Giblet's Avatar
 
Join Date: Oct 2001
Location: Dublin
Posts: 10,743
Quote:
Originally Posted by desaparecidos View Post
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.
Giblet is offline  
Post Reply

Quick Reply
Message:
Remove Text Formatting
Bold
Italic
Underline

Insert Image
Wrap [QUOTE] tags around selected text
 
Decrease Size
Increase Size
Please sign up or log in to join the discussion

Thread Tools Search this Thread
Search this Thread:

Advanced Search



Share Tweet