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⌠?
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).
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.
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.
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.
â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
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.
