Originally Posted by Turtle91
The W3 CSS specification doesn't define a "default font size" (other than initially "medium"). Any browser/reader/app could have different defaults - however most browsers use 16px=1em=100% and they most commonly use the sizes JSWolf mentioned in absence of a user defined style.
Because different browsers/apps/readers could use a different default size it is beneficial, for consistency's sake, to define your document baseline in the document itself. Thus "body {font-size:100%}" or "body {font-size:120%}", etc. Then all other font-sizes can be set relative to that size using em. Doing it this way allows the document font sizes to be consistent relative to the other font sizes in that document regardless of the font-size (zoom level) selected by the user.
The actual font-size you select can be anything you want, and can be independent of the heading number selected. eg (for example) all of these combinations are acceptable (although IMHO funny looking):
Code:
p {font-size:.5em}
h1 {font-size:6em}
h2 {font-size:5em}
h3 {font-size:4em}
h4 {font-size:3em}
h5 {font-size:2em}
h6 {font-size:1em}
p {font-size:3.5em}
h1 {font-size:2em}
h2 {font-size:2em}
h3 {font-size:2em}
h4 {font-size:2em}
h5 {font-size:2em}
h6 {font-size:2em}
p {font-size:.75em}
h1 {font-size:1em}
h2 {font-size:2em}
h3 {font-size:3em}
h4 {font-size:4em}
h5 {font-size:5em}
h6 {font-size:6em}
p {font-size: 1em}
h1 {font-size: 2em}
h2 {font-size: 1.5em}
h3 {font-size: 1.17em}
h4 {font-size: 1em}
h5 {font-size: .83em}
h6 {font-size: .67em}
|