22

✏️ Editing: glyphs-1.html

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

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

<body>

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

<div id="basic-typographic-concepts">
          <h2>I. Basic Typographic Concepts</h2>

<h3 id="section-1">1. Font files, format and
            information</h3>

<p>A <em>font</em> is a collection of various character
            images that can be used to display or print text.  The
            images in a single font share some common properties,
            including look, style, serifs, etc.  Typographically
            speaking, one has to distinguish between a <em>font
            family</em> and its multiple <em>font faces</em>, which
            usually differ in style though coming from the same
            template.</p>

<p>For example, &lsquo;Palatino Regular&rsquo; and
            &lsquo;Palatino Italic&rsquo; are two distinct
            <em>faces</em> from the same <em>family</em>, called
            &lsquo;Palatino&rsquo; itself.</p>

<p>The single term &lsquo;font&rsquo; is nearly always used
            in ambiguous ways to refer to either a given family or
            given face, depending on the context.  For example, most
            users of word-processors use &lsquo;font&rsquo; to
            describe a font family (e.g., &lsquo;Courier&rsquo;,
            &lsquo;Palatino&rsquo;, etc.); however, most of these
            families are implemented through several data files
            depending on the file format: For TrueType, this is
            usually one per face (i.e. <tt>arial.ttf</tt> for
            &lsquo;Arial Regular&rsquo;, <tt>ariali.ttf</tt> for
            &lsquo;Arial Italic&rsquo;, etc.).  The file is also
            called a &lsquo;font&rsquo; but really contains a font
            face.</p>

<p>A <em>digital font</em> is thus a data file that may
            contain <em>one or more font faces</em>.  For each of
            these, it contains character images, character metrics, as
            well as other kind of information important to the layout
            of text and the processing of specific character
            encodings.  In some formats, like Adobe's Type&nbsp;1, a
            single font face is described through several files (i.e.,
            one contains the character images, another one the
            character metrics).  We will ignore this implementation
            issue in most parts of this document and consider digital
            fonts as single files, though FreeType&nbsp;2 is able to
            support multiple-files fonts correctly.</p>

<p>As a convenience, a font file containing more than one
            face is called a <em>font collection</em>.  This case is
            rather rare but can be seen in many Asian fonts, which
            contain images for two or more representation forms of a
            given scripts (usually for horizontal and vertical
            layout).</p>

<h3 id="section-2">2. Character images and
          mappings</h3>

<p>The character images are called <em>glyphs</em>.  A
            single character can have several distinct images, i.e.,
            several glyphs, depending on script, usage or context.
            Several characters can also take a single glyph (good
            examples are Roman ligatures like &lsquo;fi&rsquo; and
            &lsquo;fl&rsquo; which can be represented by a single
            glyph).  The relationship between characters and glyphs
            can be very complex but won't be discussed in this
            document.  Moreover, some formats use more or less
            complicated schemes to store and access glyphs.  For the
            sake of clarity, we only retain the following notions when
            working with FreeType:</p>

<ul>
            <li>
              <p>A font file contains a set of glyphs; each one can be
                stored as a bitmap, a vector representation, or any
                other scheme (most scalable formats use a combination
                of mathematical representation and control
                data/programs).  These glyphs can be stored in any
                order in the font file, and are typically accessed
                through a simple glyph index.</p>
            </li>
            <li>
              <p>The font file contains one or more tables, called
                <em>character maps</em> (also called
                &lsquo;charmaps&rsquo; or &lsquo;cmaps&rsquo; for
                short), which are used to convert character codes for
                a given encoding (e.g., ASCII, Unicode, Big5, ShiftJIS,
                etc.) into glyph indices relative to the font file.  A
                single font face may contain several charmaps.  For
                example, many OpenType fonts contain an Apple-specific
                charmap as well as a Unicode charmap, which makes them
                usable on both Mac and Windows platforms.</p>
            </li>
          </ul>

<h3 id="section-3">3. Character and font metrics</h3>

<p>Each glyph image is associated with various metrics which
            describe how to place and manage it when rendering text;
            see <a href="glyphs-3.html">section&nbsp;III</a> for more.
            Metrics relate to glyph placement, cursor advances, as
            well as text layout.  They are extremely important to
            compute the flow of text when rendering a string of
            text.</p>

<p>Each scalable format also contains some global metrics,
            expressed in notional (i.e. font) units, to describe some
            properties of all glyphs in the same face.  Examples for
            global metrics are the maximum glyph bounding box, the
            ascender, descender, and text height of the font.</p>

<p>Non-scalable formats contain metrics also.  However, they
            only apply to a set of given character dimensions and
            resolutions, and are usually expressed in pixels then.</p>
        </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" class="current">Basic Typographic Concepts</a>
    </li>
    <li class="tertiary">
      <a href="glyphs-2.html">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