<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type"
content="text/css">
<meta http-equiv="Content-Script-Type"
content="text/javascript">
<meta name="description"
content="FreeType Documentation">
<meta name="Author"
content="David Turner">
<link rel="icon"
href="../image/favicon_-90.ico">
<link rel="shortcut icon"
href="../image/favicon_-90.ico">
<link rel="stylesheet"
type="text/css"
href="../css/freetype2_-90.css">
<script type="text/javascript"
src="../../../js/jquery-1.11.0.min.js">
</script>
<script type="text/javascript"
src="../../../js/jquery.ba-resize.min.js">
</script>
<script type="text/javascript"
src="../../../js/freetype2.js">
</script>
<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 / I</h1>
</div>
<div id="wrapper">
<div class="colmask leftmenu">
<div class="colright">
<div class="col1wrap">
<div class="col1">
<!-- ************************************************** -->
<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, ‘Palatino Regular’ and
‘Palatino Italic’ are two distinct
<em>faces</em> from the same <em>family</em>, called
‘Palatino’ itself.</p>
<p>The single term ‘font’ 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 ‘font’ to
describe a font family (e.g., ‘Courier’,
‘Palatino’, 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
‘Arial Regular’, <tt>ariali.ttf</tt> for
‘Arial Italic’, etc.). The file is also
called a ‘font’ 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 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 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 ‘fi’ and
‘fl’ 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
‘charmaps’ or ‘cmaps’ 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 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: 02-May-2017</p>
</div>
</div>
</div>
<!-- ************************************************** -->
<div class="col2">
</div>
</div>
</div>
<!-- ************************************************** -->
<div id="TOC">
<ul>
<li class="funding">
<p><a href="https://pledgie.com/campaigns/24434">
<img alt="Click here to lend your support to the FreeType project and make a donation at pledgie.com!"
src="https://pledgie.com/campaigns/24434.png?skin_name=chrome"
border="0"
align="middle">
</a></p>
<p><a href="https://flattr.com/submit/auto?fid=mq2xxp&url=https%3A%2F%2Fwww.freetype.org"
target="_blank">
<img class="with-border"
src="https://button.flattr.com/flattr-badge-large.png"
alt="Flattr this"
title="Flattr this"
border="0"
align="middle">
</a></p>
</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>
<!-- separate primary from secondary entries -->
</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> <!-- id="wrapper" -->
<div id="TOC-bottom">
</div>
</body>
</html>
