CSS: What font-size is xx-large, x-large, small?

By Xah Lee. Date: . Last updated: .

CSS font-size has these predefined values:

Note that these are absolute sizes, not relative.

Each browser has their own idea of the predefined size. Here's the percentage value that matches these in Firefox.

[xx-large] = [200%]

[x-large] = [150%]

[large] = [110%]

[medium] = [100%]

[small] = [80%]

[x-small] = [60%]

[xx-small] = [55%]

As of , {Firefox, Google Chrome, Opera, IE10} basically all agree on these sizes. The x-small and xx-small may differ by 2% or so; the difference can be seen only when the page is magnified at 200%.

Also note: 200% is the same as 2em, and 150% is the same as 1.5em, etc.

Font Topic

  1. Meaning of Font Size and Em Height
  2. CSS: What font-size is xx-large, x-large, small?
  3. CSS: Font Weight, Bold
  4. Standard Web Fonts
  5. Google Webfont Tutorial
  6. CSS: Text Decoration: Underline, Overline, Line-Through
  7. CSS: Text Shadow
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS Basics
  4. JS in Depth
  5. JS Reference
  6. DOM
  7. SVG
  8. JS Misc