SVG: Font Size

By Xah Lee. Date: . Last updated: .

This page shows what the size unit mean exactly for text element.

svg font size problem 2018 03 01 73558
SVG font size problem. In both image, they have style="font-size:1%". 1em or rem doesn't work neither, the font may become invisible or fill whole canvas. Font size value is dependent on user coordinate (example: view box), not view port.

Default Font Size

If no font size is set, default is 16.

E none E size 16 
<text x="0" y="50">E none</text>
<text x="0" y="70" font-size="16">E size 16</text>
No font size vs 16. You can see they are the same size.

Font Size Means Baseline to Baseline

Font size means baseline to baseline.

E 
<svg width="100" height="100">
<text x="0" y="100" font-size="100">E</text>
SVG with heigh 100 and font-size 100. You can see it doesn't fill the box because font size means baseline to baseline.

Note that a font size means the box a font is designed in. It includes empty spaces above and below.

font size em height
Font size design box.
typography line terms
typography line terms

[see Meaning of Font Size]

Unit is User Coordinate

When you use font size attribute, e.g. <text x="0" y="100" font-size="16">E 16</text>, the unit is user coordinate.

[see SVG: viewBox, User Coordinate]

E 100 
<svg width="100" height="100">
<text x="0" y="100" font-size="100">E 100</text>
</svg>
E 100 
<svg width="100" height="100" viewBox="0 0 500 500">
<text x="0" y="500" font-size="100">E 100</text>
Both SVG have font-size 100. But the first SVG has width height 100 100, the second SVG has user coordinate width height 500 500.

Percentage Value

Percentage value for font-size means with respect to default font-size value.

font-size="100%" is the same as font-size="16"

E 16 E 100% 
<svg width="100" height="100">
<text x="0" y="50" font-size="16">E 16</text>
<text x="0" y="70" font-size="100%">E 100%</text>
</svg>
font-size="16" vs font-size="100%", in a SVG box of width height 100 100.
E 200% 
<svg width="100" height="100">
<text x="0" y="100" font-size="200%">E 200%</text>
</svg>
E 200% 
<svg width="100" height="100" viewBox="0 0 500 500">
<text x="0" y="500" font-size="200%">E 200%</text>
</svg>
Both SVG's text have font-size="200%", but the first SVG has width height 100 100, the second SVG has user coordinate width height 500 500.

font-size Attribute vs CSS

Font size can also be specified by CSS, example: style="font-size:16px".

When using CSS, a unit such as “px” is required. (this is required by CSS)

When using CSS, the “px” length has exact same meaning as SVG font size attribute without unit.

E 30 E 30px 
<text x="0" y="50" font-size="30">E 30</text>
<text x="0" y="80" style="font-size:30px">E 30px</text>

CSS unit such as rem or em do not work.

CSS value such as 1rem , are translated into 16px, which in turn is 16 units in SVG user coordinates. They may become tiny or invisible, or huge and fill the screen, when you use user coordinates.

1rem 
<svg width="100" height="100">
<text x="0" y="100" style="font-size:1rem">1rem</text>
</svg>
5rem 
<svg width="100" height="100" viewBox="0 0 500 500">
<text x="0" y="500" style="font-size:5rem">5rem</text>
</svg>
CSS rem or em unit are basically just 16 units, with respect to SVG user coordinate.

Percentage Value with CSS

Percentage value with CSS has the same meaning as SVG attribute.

E 100% E 100% 
<svg width="100" height="100">
<text x="0" y="50" font-size="100%">E 100%</text>
<text x="0" y="70" style="font-size:100%">E 100%</text>
</svg>
font-size="100%" and style="font-size:100%" are the same. Here in a SVG with width height 100 100.
E 200% E 200% 
<svg width="100" height="100" viewBox="0 0 500 500">
<text x="0" y="250" font-size="200%">E 200%</text>
<text x="0" y="500" style="font-size:200%">E 200%</text>
font-size="200%" vs style="font-size:200%", in user coordinate width height 500 500.

User Coordinate's Unit Size

For how to compute a good font size when in user coordinate, see

SVG: ViewBox, User Coordinate's Unit Size

Reference

Text – SVG 1.1 (Second Edition)#FontSizeProperty

SVG tutorial

  1. SVG Basics
  2. Path
  3. Path Elliptical Arc
  4. Circle Arc
  5. Specifying Styles
  6. Shape Styles
  7. Viewport
  8. viewBox
  9. ViewBox Unit Size
  10. Coordinate Transformation
  11. Text Element
  12. Font Size
  13. Structure Elements
  14. Scripting SVG
  15. SVG Clock
  16. Animation

Canvas Intro

  1. Canvas vs SVG
  2. Canvas intro
  3. Demo: Halma
  4. Demo: Raycaster
Like it? Help me by telling your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

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

Web Dev Tutorials