Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Revert "remove body font-size and line-height" #825

Closed
joeybaker opened this Issue Oct 25, 2011 · 5 comments

Comments

Projects
None yet
4 participants
Contributor

joeybaker commented Oct 25, 2011

(this is in concern of 125a7a6 )

I'm aware that some discussion went into this, but I'm against this change which removes the default font size from H5BP. It seems to me that font size is a pretty basic default that everyone is going to need to set. I'd think the correct solution for "not everyone likes this font-size" isn't to remove all settings, but to make a note that there are several common settings, or that this setting can be changed.

I'm aware that the browser provides defaults, but I'm not sure that a basic setting like font-size should be left to the browser.

A rant-y aside

I've noticed a trend in H5BP discussions:

  1. User complains that setting X of H5BP is a bit strange for some reason.
  2. Like-minded folks voice their agreement and suggest possible fixes.
  3. The simplest fix proposed is to simply remove setting X. This compromise makes nobody perfectly happy, but solves the technical argument nicely.
  4. H5BP becomes just a little less useful to folks starting out.

I mention this because I really see H5BP as a starting point – the whole point is to provide good defaults. Defaults can be changed, and may not please everyone, but they should serve two purposes:

  • Showing a dev that a hack/option/setting is something they should think about.
  • Solving a common problem that everyone has and needs a way around.

IMHO

Owner

paulirish commented Oct 25, 2011

The first question on this issue is.. are the default font sizes and line-heights of browsers in need of normalizing?
If they are consistent, then we don't need the setting, just like the rest of normalize.css

Contributor

davidmurdoch commented Oct 25, 2011

There is def a better way to do this...but whatever:
http://jsfiddle.net/musicisair/geycD/embedded/result/

qr (for mobile):

qrcode

The following browsers have a default font size of 16px on the body element:

Chrome 16 (dev channel) (windows 7)
FF 7.0.1, IE 9 (windows 7)
Opera 11.52 (windows 7)
Safari 5.1.1 (windows 7)
IE 9 (windows 7)
Chrome 14 (vista)
IE 9 (vista)
Default browser on Android 2.2

The following browsers have a default line-height of 1.1875 (19px) on the body element:

Chrome 16 (dev channel) (windows 7)
FF 7.0.1, IE 9 (windows 7)
Opera 11.52 (windows 7)
Safari 5.1.1 (windows 7)
Chrome 14 (vista)
Default browser on Android 2.2

IE 9 (vista and windows 7) has a default line-height of 1.125 (18px).

That's all the browsers I feel like testing at the moment.

Still need to test iPhone, Mac browsers, Android browsers, other mobile browsers, old IE, and browsers on Windows XP.

@necolas necolas closed this in 380c4f8 Oct 25, 2011

Owner

necolas commented Oct 25, 2011

I'm not sure that a basic setting like font-size should be left to the browser.

In most cases, it already is. They all default to 16px. So everyone out there starting with a base font-size of 16px, 1em, or 100% is just redeclaring the browser default. Anyone using any em or % value on body (which was/is standard practice to avoid breaking text-resizing in legacy versions of IE) is taking the browser default font-size as a given.

I've noticed a trend in H5BP discussions...

That isn't a fair characterisation of the discussion or resolution of the issue that brought up font-size and line-height, or any of the others.

Anyway, I've pushed some placeholder defaults. I don't think these help solve any common problems (and the font-size is entirely redundant) but this way hopefully we can move on and devs can change the values as they need to.

Contributor

joeybaker commented Oct 25, 2011

@necolas

Thanks for the change! And, apologies – I didn't mean to offend. I don't mean to say that I've noticed this as a prevalent issue, just a trend – something I've seen a few times now.

At any rate, sorry for coming off a bit troll~ish and thanks for the change!

Contributor

joeybaker commented Oct 25, 2011

To add to some more of your tests:

  • IE8, Win7: font-size: 16px, line-height: 18px
  • IE7, Vista: font-size: 16px, line-height: 18px
  • Chrome 15, Mac: font-size: 16px, line-height: 18px
  • Chrome 17, Mac: font-size: 16px, line-height: 18px
  • Safari 5.1, Mac: font-size: 16px, line-height: 18px
  • iPad 2, iOS5: font-size: 16px, line-height: 19px
  • iPad 1, iOS4: font-size: 16px, line-height: 19px
  • iPhone 4s, iOS5: font-size: 26px, line-height: 30px
  • iPhone 3Gs, iOS4: font-size: 16px, line-height: 19px
  • FF 7.0.1, Mac: font-size: 16px, line-height: 21px
  • FF 8b, Mac: font-size: 16px, line-height: 21px
  • FF 3.6 Mac: font-size: 16px, line-height: 16px

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