View Single Post
Old 11-28-2019, 04:38 PM   #15
ps67
Guru
ps67 ought to be getting tired of karma fortunes by now.ps67 ought to be getting tired of karma fortunes by now.ps67 ought to be getting tired of karma fortunes by now.ps67 ought to be getting tired of karma fortunes by now.ps67 ought to be getting tired of karma fortunes by now.ps67 ought to be getting tired of karma fortunes by now.ps67 ought to be getting tired of karma fortunes by now.ps67 ought to be getting tired of karma fortunes by now.ps67 ought to be getting tired of karma fortunes by now.ps67 ought to be getting tired of karma fortunes by now.ps67 ought to be getting tired of karma fortunes by now.
 
Posts: 755
Karma: 7025494
Join Date: Aug 2017
Location: Italy
Device: Kindle Paperwhite, Kobo Elipsa, Pocketbook Inkpad 4, Inkpad Color
Quote:
Originally Posted by Turtle91 View Post
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}
Crazy css of the Year!
ps67 is offline   Reply With Quote