CS2020:   Web Science, Sytems and Design

Font Size Comparison Chart

View this page in different monitor resolutions.

Wondering how to correspond XHTML font sizes (1, 2, 3, 4, 5, 6, 7) to CSS pt and px configurations? Like so many areas in web technology, the answer is ... it depends!

Since the pt is browser dependent (for example, 12 pt looks different when various browsers are used to display web pages) and the px is monitor-resolution dependent, there is no hard and fast rule for correspondence.

CSS fonts can also be configured using "ems" (relative size -- the term is borrowed from the print industry)

font-size:??pt 48pt 24pt 12pt 8pt
font-size:??px 48px 24px 12px 8px
font-size:textvalue xx-large x-large small xx-small
font-size:??em 3.5em 2em 1em .5em
XHTML Font Size Size 7 Size 5 Size 3
default font size
Size 1
© Lynne Grewe