The font size as an exact size (number+unit) or absolute (xx-small to xx-large).
Syntax
font-size: absolute-size | relative-size | length | percentage | inherit ;
Absolute sizes: xx-small, x-small, small, medium, large,x-large,xx-large
Relative sizes: smaller, larger, % (Percentage), em (ems)
Exact sizes: pt (Points), px (Pixels)
inherit - inherit from the parent element.
If an exact size is specified for <HTML> or <BODY> then any dependent elements such as <P> set as a percentage (%) will also appear at an exact size.
Absolute sizes will render differently according to the font family and the language, this may also vary on different web browsers.
A monospace font set to medium size
will render as 13px
A sans-serif font set to medium size
will render as 16pxq
Sizing the<BODY>as a Percentage rather than Ems will ensure the text remains readable when resized or on a device with different DPI settings.
Proportional font sizes are a key part of Responsive Web Design a trend (that has taken off since 2011), to design web pages that provide easy reading and navigation across a wide range of devices from mobile phones to traditional desktop monitors.
Examples:
h1 { font-size: 16pt; }
#emw3id { font-size: 16px; }
.emw3class { font-size: 150%; }
Try it:
For clear readable text, use an 11 to 14 point scalable font.
Also pay attention to font color.
Contrary to popular belief, larger font sizes do not take longer to download! |
(CSS 1) Browser Support: All major browsers.
“Like two doomed ships that pass in storm we had crossed each other's way: but we made no sign, we said no word, we had no word to say” ~ Oscar Wilde
Related:
font-family - Font family for text.
font-style - Font style for text.
font-variant - Whether or not text should be displayed in a small-caps font.
font-weight - Normal, bold, bolder.
font - Shorthand to set the font properties above in one declaration.
Letter-Spacing - Increase or decrease the space between characters.
Syntax - CSS Units