SVG Creating fonts ascent, descent and baseline
Example
the units-per-em property is one of the most important font properties. It's used to give any value of any other property any meaning.
the CSS2 font spec has a nice definition of the em sqare:
Certain values, such as width metrics, are expressed in units that are relative to an abstract square whose height is the intended distance between lines of type in the same type size
the default baseline is at 0 in the em square. for line-height calculation and alignement purposes the two prperties ascent and descent are of most importance.
Ascent is the maximum distance from the baseline to the highest point of your largest glyph. Usaually that is 1em, so the value you gave for units-per-em.
Descent is the maximum distance from the baseline to the lowest point in any glyph of your font.
Here is a font with glyphs rendering a line at the lowest and highest point as well as at the baseline.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
<font id = "myFont"
horiz-adv-x = "1000"
vert-origin-x = "0"
vert-origin-y = "0" >
<font-face font-family = "myFont"
font-weight = "normal"
units-per-em = "1000"
descent="500"
ascent="1000">
<font-face-src>
<font-face-name name="myFont"/>
</font-face-src>
</font-face>`
<glyph unicode = "a" d = "M0 900h1000v100h-1000z" />
<glyph unicode = "b" d = "M0 0h1000v100h-1000z" />
<glyph unicode = "c" d = "M0 -500h1000v100h-1000z" />
</font>
</svg>
Ascent and descent are used to determine the line-height. Units-per-em and baseline are used to determine the position and size relative to other fonts used..
