Unit |
Description |
Recommended Use |
| pt |
Points - Has a fixed size of 1/72 of an inch. Computers cannot accurately display points. Text using points may be displayed differently on different systems. |
Print - This sizing works well for print stylesheets or documents intended for printing and not screen viewing. |
| |
p {
font-size: 12pt;
}
/*Result*/
I am a 12 point text. |
| pc |
Picas - Has a fixed size of 1/6 of an inch. Just as with picas computers cannot accurately display points. Text using picas may be displayed differently on different systems. |
Print - This sizing works well for print stylesheets or documents intended for printing and not screen viewing. |
| |
p {
font-size: 2pc;
}
/*Result*/
I am a 2 picas text. |
| px |
Pixels - Fixed size. Can achieve consistent display size accross platforms and browser types. |
Screen - This method should be avoided since text using pixels cannot be resized using most browser settings and creates an accessibility problem for those that need large fonts to read. |
| |
p {
font-size: 12px;
}
/*Result*/
I am a 12 pixel text. |
| em |
Ems - Relative font size. One em equals to the height of the letter "M" in the relevant font. Users can resize the text using their browser settings. Use decimals like 0.8em to display a fraction of the size of the default font. |
Screen - This is a preferable method to display text on the web. One drawback is that the developer has less control of the text since it will be resized according to the users preferences. |
| |
p {
font-size: 1.6em;
}
/*Result*/
I am a 1.6 em text. |
| ex |
Exes - Relative font size. One ex equals the height of the lowerase letter "x" in the relevant font. Users can resize the text using their browser settings. |
Screen - This method is not recommended since many browsers do not support the ex font size. |
| |
p {
font-size: 2ex;
}
/*Result*/
I am a 2 ex text. |
| % |
Percentages - Relative font size. Setting the font size to 100% displays the text equal to the user's default setting. Increasing the percentage would make it larger and decreasing it would make it smaller. |
Screen - Just like ems, this is a preferable method to display text on the web. One drawback is that the developer has less control of the text since it will be resized according to the users preferences. |
| |
p {
font-size: 125%;
}
/*Result*/
I am a 125% text. |
| x-small |
x-small - Absolute font size. Does not inherit sizing from a parent element. Users can resize the text using their browser settings. |
Screen - One drawback is that browsers display this font size in different ways. x-small may not be be legible on some browsers. |
| |
p {
font-size: x-small;
}
/*Result*/
I am an x-small text. |
| small |
small - Absolute font size. Does not inherit sizing from a parent element. Users can resize the text using their browser settings. |
Screen - One drawback is that browsers display this font size in different ways. |
| |
p {
font-size: small;
}
/*Result*/
I am a small text. |
| medium |
medium - Absolute font size. Does not inherit sizing from a parent element. Users can resize the text using their browser settings. |
Screen - One drawback is that browsers display this font size different ways. The majority of browsers display the medium text size the same as an unstyled text. |
| |
p {
font-size: medium;
}
/*Result*/
I am a medium text. |
| large |
large - Absolute font size. Does not inherit sizing from a parent element. Users can resize the text using their browser settings. |
Screen - One drawback is that browsers display this font size different ways. |
| |
p {
font-size: large;
}
/*Result*/
I am a large text. |
| x-large |
x-large - Absolute font size. Does not inherit sizing from a parent element. Users can resize the text using their browser settings. |
Screen - One drawback is that browsers display this font size different ways. |
| |
p {
font-size: x-large;
}
/*Result*/
I am an x-large text. |
| xx-large |
xx-large - Absolute font size. Does not inherit sizing from a parent element. Users can resize the text using their browser settings. |
Screen - One drawback is that browsers display this font size different ways. |
| |
p {
font-size: xx-large;
}
/*Result*/
I am an xx-large text. |
| smaller |
smaller - Relative font size. Inherits sizing from a parent element. Users can resize the text using their browser settings. |
Screen - This is a great way to highlight portions of text. |
| |
p {
font-size: smaller;
}
/*Result*/
I am the original text.I am a smaller text. |
| larger |
larger - Relative font size. Inherits sizing from a parent element. Users can resize the text using their browser settings. |
Screen - This is a great way to emphasize portions of text. |
| |
p {
font-size: larger;
}
/*Result*/
I am the original text.I am a larger text. |