This page demonstrates different CSS font-sizing strategies. The top half of the table simply shows comparable sizes. The second half of the page shows how they appear when they are nested.
font-size units |
||||
|---|---|---|---|---|
| words | px | % | em | rem |
| xx-small | 6px | 5% 10% 20% 50% | .3em .5em | .3rem .5rem |
| x-small | 7px 8px 9px | 60% 70% | .6em .7em .75em | .6rem .7rem .75rem |
| small | 10px 11px 12px | 75% 80% 90% | .75em .8em .9em | .75rem .8rem .9rem |
| medium | 14px 16px | 100% 110% | 1.0em 1.1em | 1.0rem 1.1rem |
| large | 18px | 120% 130% | 1.2em 1.3em | 1.2rem 1.3rem |
| x-large | 24px | 140% 150% 160% | 1.4em 1.5em 1.6em | 1.4rem 1.5rem 1.6rem |
| xx-large | 32px | 200% | 2.0em | 2.0rem |
Nesting |
||||
|
x-large
x-large
x-large
|
24px
24px
24px
|
90%
90%
90%
90%
100%
100%
100%
110%
110%
110%
|
.9em
.9em
.9em
.9em
1.0em
1.0em
1.0em
1.1em
1.1em
1.1em
|
.9rem
.9rem
.9rem
.9rem
1.0rem
1.0rem
1.0rem
1.1rem
1.1rem
1.1rem
|