22

✏️ Editing: glyphs-2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">

<title>FreeType Glyph Conventions / II</title>
</head>

<body>

<div id="top"
     class="bar">
  <h1><a href="http://freetype.org/index.html">FreeType</a> Glyph
    Conventions&nbsp;/&nbsp;II</h1>
</div>

<div id="glyph-outlines">
          <h2>II. Glyph Outlines</h2>

<p>This section describes the way scalable representations
            of glyph images, called outlines, are used by FreeType as
            well as client applications.</p>

<h3 id="section-1">1. Pixels, points, and device
            resolutions</h3>

<p>Though it is a very common assumption when dealing with
            computer graphics programs, the physical dimensions of a
            given pixel (be it for screens or printers) are not
            squared.  Often, the output device exhibits varying
            resolutions in both horizontal and vertical directions,
            and this must be taken care of when rendering text.</p>

<p>It is thus common to define a device's characteristics
            through two numbers expressed in <em>dpi</em> (dots per
            inch).  For example, a printer with a resolution of
            300&times;600&nbsp;dpi has 300&nbsp;pixels per inch in the
            horizontal direction, and 600 in the vertical one.  The
            resolution of a typical computer monitor varies with its
            size (10&Prime;&nbsp;and 25&Prime;&nbsp;monitors don't
            have the same pixel sizes at 1024&times;768), and of
            course the graphics mode resolution.</p>

<p>As a consequence, the size of text is usually given in
            <em>points</em>, rather than device-specific pixels.
            Points are a <em>physical</em> unit, where 1&nbsp;point
            equals 1/72th of an inch in digital typography.  As an
            example, most books using the Latin script are printed
            with a body text size somewhere between 10 and
            14&nbsp;points.</p>

<p>It is thus possible to compute the size of text in pixels
            from the size in points with the following formula:</p>

<center>
            <code>pixel_size = point_size * resolution / 72</code>
          </center>

<p>The resolution is expressed in <em>dpi</em>.  Since
            horizontal and vertical resolutions may differ, a single
            point size usually defines a different text width and
            height in pixels.</p>

<p><em>Unlike what is often thought, the &lsquo;size of text
              in pixels&rsquo; is not directly related to the real
              dimensions of characters when they are displayed or
              printed.  The relationship between these two concepts is
              a bit more complex and depends on some design choices
              made by the font designer.  This is described in more
              detail in the next sub-section (see the explanations on
              the EM square).</em></p>

<h3 id="section-2">2. Vectorial representation</h3>

<p>The source format of outlines is a collection of closed paths called
            <em>contours</em>.  Each contour delimits an outer or
            inner <em>region</em> of the glyph, and can be made of
            either <em>line segments</em> or <em>B&eacute;zier
            arcs</em>.</p>

<p>The arcs are defined through <em>control points</em>, and
            can be either second-order (these are <em>conic</em>
            B&eacute;ziers) or third-order (<em>cubic</em>
            B&eacute;ziers) polynomials, depending on the font format.
            Note that conic B&eacute;ziers are usually called
            <em>quadratic</em> B&eacute;ziers in the literature.
            Hence, FreeType associates each point of the outline with
            flags to indicate its type (normal or control point).  As
            a consequence, scaling the points will scale the whole
            outline.</p>

<p>Each glyph's original outline points are located on a
            grid of indivisible units.  The points are usually stored
            in a font file as 16-bit integer grid coordinates, with
            the grid's origin being at (0,0); they thus range from
            -32768 to&nbsp;32767.  (Even though point coordinates can
            be floats in other formats such as Type&nbsp;1, we will
            restrict our analysis to integer values for
            simplicity).</p>

<p><em>The grid is always oriented like the traditional
              mathematical two-dimensional plane, i.e.,
              the <i>X</i>&nbsp;axis goes from the left to the right,
              and the <i>Y</i>&nbsp;axis from bottom to top.</em></p>
        
          <p>In creating the glyph outlines, a type designer uses an
            imaginary square called the <em>EM square</em>.
            Typically, the EM square can be thought of as a tablet on
            which the characters are drawn.  The square's size, i.e.,
            the number of grid units on its sides, is very important
            for two reasons:</p>

<ul>
            <li>
              <p>It is the reference size used to scale the outlines
                to a given text dimension.  For example, a size of
                12pt at 300&times;300&nbsp;dpi corresponds to
                12*300/72&nbsp;=&nbsp;50&nbsp;pixels.  This is the
                size the EM square would appear on the output device
                if it was rendered directly.  In other words, scaling
                from grid units to pixels uses the formula:</p>

<p align="center">
                <code>pixel_size = point_size * resolution / 72</code><br>
                <code>pixel_coord = grid_coord * pixel_size / EM_size</code>
              </p>

<p>Another acronym used for the pixel size
              is <em>ppem</em> (pixel per EM); this value can be
              fractional also.  Note that fractional ppem values are
              not supported everywhere.</p>
            </li>
            <li>
              <p>The greater the EM size is, the larger resolution the
                designer can use when digitizing outlines.  For
                example, in the extreme example of an EM size of
                4&nbsp;units, there are only 25&nbsp;point positions
                available within the EM square which is clearly not
                enough.  Typical TrueType fonts use an EM size of
                2048&nbsp;units; Type&nbsp;1 or CFF PostScript fonts
                traditionally use an EM size of 1000&nbsp;grid units
                (but point coordinates can be expressed as floating
                values).</p>
            </li>
          </ul>

<p>Note that glyphs can freely extend beyond the EM square
            if the font designer wants so.  The EM square is thus just
            a convention in traditional typography.</p>

<p>Grid units are very often called <em>font units</em>
            or <em>EM units</em>.</p>

<p><em>As said before, <code>pixel_size</code> computed in
              the above formula does not directly relate to the size
              of characters on the screen.  It simply is the size of
              the EM square if it was to be displayed.  Each font
              designer is free to place its glyphs as it pleases him
              within the square.  This explains why the letters of the
              following text have not the same height, even though
              they are displayed at the same point size with distinct
              fonts:</em></p>

<p>As one can see, the glyphs of the Courier family are
            smaller than those of Times New Roman, which themselves
            are slightly smaller than those of Arial, even though
            everything is displayed or printed at a size of
            16&nbsp;points.  This only reflects design choices.</p>

<h3 id="section-3">3. Hinting and Bitmap rendering</h3>

<p>The outline as stored in a font file is called the
            &lsquo;master&rsquo; outline, as its point coordinates are
            expressed in font units.  Before it can be converted into
            a bitmap, it must be scaled to a given size and
            resolution.  This is done with a very simple
            transformation, but especially at small sizes undesirable
            artifacts can appear, in particular stems of different
            width or height in letters like &lsquo;E&rsquo; or
            &lsquo;H&rsquo; can occur.</p>

<p>As a consequence, proper glyph rendering needs the scaled
            points to be aligned along the target device pixel grid,
            through an operation called <em>grid-fitting</em> (often
            called <em>hinting</em>).  One of its main purposes is to
            ensure that important widths and heights are respected
            throughout the whole font (for example, it is very often
            desirable that the &lsquo;I&rsquo; and the &lsquo;T&rsquo;
            glyphs have their central vertical line of the same pixel
            width), as well as to manage features like stems and
            overshoots, which can cause problems at small pixel
            sizes.</p>

<p>There are several ways to perform grid-fitting properly;
            most scalable formats associate some control data or
            programs with each glyph outline.  Here is an
            overview:</p>

<ul>
            <li class="emph">
              <p>explicit grid-fitting</p>

<p>The TrueType format defines a stack-based virtual
                machine, for which programs (also
                called <em>bytecode</em>) can be written with the help
                of more than 200&nbsp;operators, most of them related
                to geometrical operations.  Each glyph is thus made of
                both an outline and a control program to perform the
                actual grid-fitting in the way defined by the font
                designer.</p>
            </li>
            <li class="emph">
              <p>implicit grid-fitting (also called hinting)</p>

<p>The Type&nbsp;1, CFF, and CFF2 formats take a much
                simpler approach: Each glyph is made of an outline as
                well as several pieces called <em>hints</em> which are
                used to describe some important features of the glyph,
                like the presence of stems, some width regularities,
                and the like.  There aren't a lot of hint types, and
                it is up to the final renderer to interpret the hints
                in order to produce a fitted outline.</p>
            </li>
            <li class="emph">
              <p>automatic grid-fitting</p>

<p>Some formats include no control information with each
                glyph outline, apart from font metrics like the
                advance width and height.  It is then up to the
                renderer to &lsquo;guess&rsquo; the more interesting
                features of the outline in order to perform some
                decent grid-fitting.</p>
            </li>
          </ul>

<p>The following table summarizes the pros and cons of each
            scheme.</p>

<table class="vertical-space">
            <thead>
              <tr>
                <th align="center">
                  <b>grid-fitting scheme</b>
                </th>
                <th align="center">
                  <b>advantages</b>
                </th>
                <th align="center">
                  <b>disadvantages</b>
                </th>
              </tr>
            </thead>

<tbody>
              <tr>
                <td valign="top" align="center">
                  <p><b>explicit</b></p>
                </td>

<td valign="top">
                  <p><b>Quality.</b>  Excellent results at small sizes
                    are possible.  This is very important for screen
                    display.</p>

<p><b>Consistency.</b>  All renderers produce the
                    same glyph bitmaps (at least in theory).</p>
                </td>

<td valign="top">
                  <p><b>Speed.</b>  Interpreting bytecode can be slow
                    if the glyph programs are complex.</p>

<p><b>Size.</b>  Glyph programs can be long.</p>
                
                  <p><b>Technical difficulty.</b>  It is extremely
                    difficult to write good hinting programs.  Very
                    few tools available.</p>
                </td>
              </tr>
              <tr>
                <td valign="top" align="center">
                  <p><b>implicit</b></p>
                </td>

<td valign="top">
                  <p><b>Size.</b>  Hints are usually much smaller than
                    explicit glyph programs.</p>

<p><b>Speed.</b>  Grid-fitting is usually a fast
                    process.</p>
                </td>
                
                <td valign="top">
                  <p><b>Quality.</b>  Often questionable at small
                    sizes.  Better with anti-aliasing though.</p>

<p><b>Inconsistency.</b>  Results can vary between
                    different renderers, or even distinct versions of
                    the same engine.</p>
                </td>
              </tr>
        
              <tr>
                <td valign="top" align="center">
                  <p><b>automatic</b></p>
                </td>
                
                <td valign="top">
                  <p><b>Size.</b>  No need for control information,
                    resulting in smaller font files.</p>
                
                  <p><b>Speed.</b>  Depends on the grid-fitting
                    algorithm.  Usually faster than explicit
                    grid-fitting.</p>
                </td>

<td valign="top">
                  <p><b>Quality.</b>  Often questionable at small
                    sizes.  Better with anti-aliasing though.</p>

<p><b>Speed.</b>  Depends on the grid-fitting
                    algorithm.</p>
        
                  <p><b>Inconsistency.</b>  Results can vary between
                    different renderers, or even distinct versions
                    of the same engine.</p>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

<div class="updated">
          <p>Last update: 13-Feb-2018</p>
        </div>
      </div>
    </div>

<div id="TOC">
  <ul>
    <li class="funding">
      <form action="https://www.paypal.com/cgi-bin/webscr"
            method="post"
            target="_top">
        <input type="hidden"
               name="cmd"
               value="_s-xclick">
        <input type="hidden"
               name="hosted_button_id"
               value="SK827YKEALMT4">
        <input type="image"
               src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif"
               name="submit"
               alt="PayPal - The safer, easier way to pay online!">
        <img alt=""
             border="0"
             src="https://www.paypalobjects.com/de_DE/i/scr/pixel.gif"
             width="1"
             height="1">
      </form>
    </li>
    <li class="primary">
      <a href="http://freetype.org/index.html">Home</a>
    </li>
    <li class="primary">
      <a href="http://freetype.org/index.html#news">News</a>
    </li>
    <li class="primary">
      <a href="../index.html">Overview</a>
    </li>
    <li class="primary">
      <a href="../documentation.html">Documentation</a>
    </li>
    <li class="primary">
      <a href="http://freetype.org/developer.html">Development</a>
    </li>
    <li class="primary">
      <a href="http://freetype.org/contact.html"
         class="emphasis">Contact</a>
    </li>

<li class="secondary">
      <a href="index.html">FreeType Glyph Conventions</a>
    </li>
    <li class="tertiary">
      <a href="glyphs-1.html">Basic Typographic Concepts</a>
    </li>
    <li class="tertiary">
      <a href="glyphs-2.html" class="current">Glyph Outlines</a>
    </li>
    <li class="tertiary">
      <a href="glyphs-3.html">Glyph Metrics</a>
    </li>
    <li class="tertiary">
      <a href="glyphs-4.html">Kerning</a>
    </li>
    <li class="tertiary">
      <a href="glyphs-5.html">Text Processing</a>
    </li>
    <li class="tertiary">
      <a href="glyphs-6.html">FreeType Outlines</a>
    </li>
    <li class="tertiary">
      <a href="glyphs-7.html">FreeType Bitmaps</a>
    </li>
  </ul>
</div>

</div>

</body>
</html>

MR SKB