---
title: units-per-em
slug: Web/SVG/Attribute/units-per-em
translation_of: Web/SVG/Attribute/units-per-em
---
<div>{{SVGRef}}{{deprecated_header("SVG 2")}}</div>

<p><span class="seoSummary">The <strong><code>units-per-em</code></strong> attribute specifies the number of coordinate units on the "em square", an abstract square whose height is the intended distance between lines of type in the same type size.</span> This is the size of the design grid on which {{Glossary("glyph", "glyphs")}} are laid out.</p>

<div class="blockIndicator note">
<p><strong>Note:</strong> This value is almost always necessary as nearly every other attribute requires the definition of a design grid.</p>
</div>

<p>Only one element is using this attribute: {{SVGElement("font-face")}}</p>

<h2 id="Usage_notes">Usage notes</h2>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row">Value</th>
   <td><code><a href="/en-US/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></code></td>
  </tr>
  <tr>
   <th scope="row">Default value</th>
   <td><code>1000</code></td>
  </tr>
  <tr>
   <th scope="row">Animatable</th>
   <td>No</td>
  </tr>
 </tbody>
</table>

<dl>
 <dt><code>&lt;number&gt;</code></dt>
 <dd>This value indicates the the number of coordinate units on the em square.</dd>
</dl>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("SVG1.1", "fonts.html#FontFaceElementUnitsPerEmAttribute", "units-per-em")}}</td>
   <td>{{Spec2("SVG1.1")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>



<p>{{Compat("svg.elements.font-face.units-per-em")}}</p>