SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2011
    Location
    The land of nod
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Default font sizes - What are they ??

    Hi all,

    Ive already tried researching a comprehensive list of default font sizes for the following but to no avail have been unsuccessful, is there a website anyone can recommend me looking at, or does anybody have a compiled list, that they can share for a cupcake and a coffee ? :-)

    The default font sizes Im after are the following :-

    H1 , H2 , H3 , H4 , H5 , H6 , BODY , P , TD , CAPTION , ADDRESS , CITE, BLOCKQUOTE.... And any others I may have forgotten... ?

    Any help is greatly appreciated

    All the best

    Benisjamin

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Ive already tried researching a comprehensive list of default font sizes for the following but to no avail have been unsuccessful, is there a website anyone can recommend me looking at, or does anybody have a compiled list, that they can share for a cupcake and a coffee ? :-)
    The best answer is, There Isn't One. That's why you haven't found it.

    I'll have a cupcake and a coffee though : )

    What you can do is look at each browser's built-in stylesheet (they keep them all in different places but for example Firefox's can be found via the about:config area) and see what default styles they are setting for those elements.

    This won't tell you the actual sizes on anyone's computer, but it can let you know how much bigger or smaller any particular header (h1-6) is compared to a p etc.

    I'm sure each browser uses slightly different ratios.

    Ultimately, though, the font size that appears on any given screen will be heavily dependent on
    -the fonts the user has installed (if you have this font stack:
    verdana, arial, freesans, sans-serif;
    then users who have verdana installed will show much larger letters than someone who doesn't (and defaults to, say, freesans like on Linux)
    -the Desktop/GUI settings the user has
    -the font settings in the browser itself

    So you may have heard all that before, and you might have been looking for "how much larger does a browser make an h1 compared to a p" and so again I think you'll only find that out by looking at their built-in stylesheets (and who knows, they may be published online somewhere so you don't have to crawl through each of your browser's config areas).

  3. #3
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Like was mentioned by there isn't a default and you'd have to dig deep within the browser for their own settings. Probably the nearest you'll get apart from that is Default style sheet for HTML 4 which is a very basic guideline and not normative.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    =

    So you may have heard all that before, and you might have been looking for "how much larger does a browser make an h1 compared to a p" and so again I think you'll only find that out by looking at their built-in stylesheets (and who knows, they may be published online somewhere so you don't have to crawl through each of your browser's config areas).

    The original suggested sizes for html4 from the w3c can be found here and Firefox and Safari are pretty similar to this in places although not exact.

    This other link from the w3c also provides some good information on font-sizing.

    As Stomme said above ultimately it's down to each individual browser stylesheet as to the exact sizes. You can find most of Firefox's default styles in html.css which is in the res folder on my machine but may be in different locations for other systems.

    However, it's all pretty much irrelevant as to what the actual size will be in pixels because that will depend on the settings the use has applied in the browser controls anyway.

    You don't really need to know anyway as you should set the elements to a relationship that suits your design and not the one suggested by a browser.

    Just create a relationship between elements as required and whether the browsers starts at a default of 16px or 20px then the relationship will be maintained as long as you have used ems and not pixels.

    Edit:


    Whoops I see Robert already offered the same link.

  5. #5
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  6. #6
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    15 Rendering — Web Applications 1.0 is closer to reality than the appendix in CSS 2.1.
    Simon Pieters

  7. #7
    SitePoint Enthusiast jackburd's Avatar
    Join Date
    Mar 2011
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    maybe the default font size are the default settings in Mozilla browser, becuase it looks good.

  8. #8
    Non-Member
    Join Date
    Mar 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    know there are some css attributes: font size, color settings (including background color), and div settings, tables, style, and so on.

  9. #9
    SitePoint Enthusiast willsmith727's Avatar
    Join Date
    May 2006
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm sure I read somewhere that the default size for the body text of a website should be 16px. Or maybe that was the result of a study or something where 16px was the most comfortable size for people to read text of any great length.

    To be honest when I design I tend to go for 13px for body text and 15px for intro paragraphs.

    I'm not sure of what the defaults are for all the other you mention. I just go with what works in my designs and what's readable.

  10. #10
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by willsmith727 View Post
    I'm sure I read somewhere that the default size for the body text of a website should be 16px. Or maybe that was the result of a study or something where 16px was the most comfortable size for people to read text of any great length.

    To be honest when I design I tend to go for 13px for body text and 15px for intro paragraphs.

    I'm not sure of what the defaults are for all the other you mention. I just go with what works in my designs and what's readable.
    The default size of body text should be whatever the reader wants it to be. All mainstream browsers give users the option to change the normal text size, so that they can adjust it to whatever they feel most comfortable with.

  11. #11
    SitePoint Member Bimanie's Avatar
    Join Date
    Mar 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've no idea. Anyway, even though you know the default font sizes - will that increase your SERP.

  12. #12
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I've no idea. Anyway, even though you know the default font sizes - will that increase your SERP.
    ...on a stick. Heaven forbid actual humans can read your site... so long as the robots can.

  13. #13
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    "default" size really is, as noted, just so much fantasyland malarkey... while gecko and webkit implementations ignore the OS system metric, you can still change their 'base' font size, and of course Opera and IE actually OBEY the system metric, so the default size can be almost anything!

    "system metric" refers to the DPI/default font setting of the host OS. I know for Apple users this is an alien concept with their "what do you mean you want to change the size of the menu text" our way or the highway attitude, but on windows since around... 1989 there were two default settings, normal and 8514 -- this led to the creation of the "large font/small font" notion, later calling them '96dpi' and '120dpi' (which is inaccurate since nobody actually adjusts to the display) and under Win7, the ability for extra-small (72dpi), small (96dpi), medium (120dpi), large (144dpi) and extra-large (192dpi) on the "simple" slider and the

    Which means %/em/pt fonts under windows can and should be expected to be able to automatically change their size to fit the user preference anywhere from 12px to 32px -- despite the claims by some of the "experts" working on webkit claiming all browsers "default to 16px".

    This is why it is the preferred approach to NEVER declare fonts in px -- px are a fixed size and should NOT be resized unless you resize EVERYTHING declared in PX (something FF thanks to it being Nyetscape 4's sweetly retarded cousin has always screwed up)... The only time there's any real justification to using PX is when you have a fixed height or really narrow fixed width that the layout would break at default zoom when the system metric is applied... which basically means an image interaction or button.

    Which is why several years ago I made this page comparing the default sizes/metrics

    Effect of Font Metrics on Common Sizes

    Pay particular attention to the table about halfway down the page that shows medium/100%/16px/12pt side-by-side. I always get a good laugh out of how Gecko pays attention to the system metric for PT, but incorrectly ignores it on every other font scale.

  14. #14
    SitePoint Zealot
    Join Date
    Feb 2011
    Location
    The land of nod
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for such an indepth sound knowledge deathshadow - Ill give your template page a good read this evening - Thankyou once again

    Benisjamin


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •