Change body font-size without losing YUI %-based sizing? #723

Closed
Jakobud opened this Issue Aug 24, 2011 · 4 comments

Comments

Projects
None yet
3 participants
@Jakobud
Contributor

Jakobud commented Aug 24, 2011

In a project I'm working on, we are using H5BP. The designer wants the base font-size on the page to be 12px. Using YUI's %'s that H5BP implements, I assumed I would go into the style.css down to primary styles and simply add:

body {
  font-size: 93%;
}

But this increased the font size.... Chrome dev tools calculates it at 15px. Why isn't it 12%?

Next, I assumed I probably just needed to add it to the right place or alter the proper value higher up in the CSS. Up under the base section, I could just change the body font-size to 12px, but then I would think this would break the YUI %-based sizing so that now the percentages would not line up properly with the font sizes... Also changing the font-size: 100% under the html area didn't seem to do anything...

I'm probably just misunderstanding how to use this aspect of the css, but is it possible to change the base body font size without breaking the YUI %-based sizing scheme?

Does everything have to be wrapped in a div that has the font-size: 93% in order to get it to work?

@necolas

This comment has been minimized.

Show comment Hide comment
@necolas

necolas Aug 24, 2011

Owner

We don't use YUI's stuff anymore.

If you want to set a relative unit body font-size equivalent to 12px, then use 75% (of 16px, the browser default) or 0.75em in place of the 13px value in the default CSS.

Hope that helps. Thanks

Owner

necolas commented Aug 24, 2011

We don't use YUI's stuff anymore.

If you want to set a relative unit body font-size equivalent to 12px, then use 75% (of 16px, the browser default) or 0.75em in place of the 13px value in the default CSS.

Hope that helps. Thanks

@necolas necolas closed this Aug 24, 2011

@Jakobud

This comment has been minimized.

Show comment Hide comment
@Jakobud

Jakobud Aug 24, 2011

Contributor

Oh... I didn't know the YUI wasn't being used for h5bp 2.0. So is there a chart somewhere that shows the relative % sizes for fonts or has that whole thing gone out the door as well?

Contributor

Jakobud commented Aug 24, 2011

Oh... I didn't know the YUI wasn't being used for h5bp 2.0. So is there a chart somewhere that shows the relative % sizes for fonts or has that whole thing gone out the door as well?

@kevva

This comment has been minimized.

Show comment Hide comment
@kevva

kevva Aug 24, 2011

Contributor

100% font size is 16 by default. Just divide 12 by 16 which gets you 0.75em or 75%. It is recommended to use % as base font size though so I would go with 75% and then use em based font size on everything else.

Contributor

kevva commented Aug 24, 2011

100% font size is 16 by default. Just divide 12 by 16 which gets you 0.75em or 75%. It is recommended to use % as base font size though so I would go with 75% and then use em based font size on everything else.

@Jakobud

This comment has been minimized.

Show comment Hide comment
@Jakobud

Jakobud Aug 24, 2011

Contributor

Ya I get that. I just wasn't sure if there was a chart somewhere with precalculated % to px sizes on it already.

Contributor

Jakobud commented Aug 24, 2011

Ya I get that. I just wasn't sure if there was a chart somewhere with precalculated % to px sizes on it already.

necolas added a commit that referenced this issue Oct 25, 2011

Add default font-size and line-height styles.
Redeclare default font-size using ems (equates to 16px if user
has not altered their prefs). Set a common line-height value to
improve readability in most cases. Should keep people happy.

Ref #723
Close #825

moimikey added a commit to moimikey/html5-boilerplate that referenced this issue Jan 7, 2012

Add default font-size and line-height styles.
Redeclare default font-size using ems (equates to 16px if user
has not altered their prefs). Set a common line-height value to
improve readability in most cases. Should keep people happy.

Ref #723
Close #825
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment