1

I'm dealing with my art director to redesign one of my website and more specifically the header of one of those. My websites are in web responsive and i'd like to know if there is any specification for the size of the font?

1
  • It's not really clear what you are asking... Depends what's in the header - what specifically do you refer to in the design? There is a base font size of 100% by default which equates to the default browser font size.
    – zigojacko
    Jan 24, 2014 at 9:26

2 Answers 2

3

Recommended font size for paragraphs in web is at least 16px (somewhat depending on which font you're using, serif fonts suffers from poor readability in lower res).

A good rule to follow is to let the H1 header be 1.5em in size, meaning 150% the size of your paragraph font. So if your paragraph font is 16px then let the H1 header be 24px.

Note that the font specs are also affected by browser preferences.

You can read more about it here.

0

Not knowing specifically which typographic element are you asking about (page title, navigation, company branding/logo etc) I would echo AndroidHustle's comment and advise that you do not go below 16px for your smallest size. This 'should' hold up on both mobile and desktop but ultimately you will need to test thoroughly on various devices.

More from this old smashing magazine link here:

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

"16-pixel text on a screen is about the same size as text printed in a book or magazine; this is accounting for reading distance. Because we read books pretty close — often only a few inches away — they are typically set at about 10 points. If you were to read them at arm’s length, you’d want at least 12 points, which is about the same size as 16 pixels on most screens"

and some other general guidance from iA on text sizes:

http://ia.net/blog/100e2r/

Not the answer you're looking for? Browse other questions tagged or ask your own question.