Hi, and welcome to the TranslatorsCafe.com channel.
In this video we will talk about typography — a topic covered in the TranslatorsCafe.com
Unit Converter website article. We will discuss typefaces and fonts and how they influence
our perception of printed text. We will also talk about font sizes, leading, tracking and
kerning. Finally, we will discuss what units are used to measure various quantities in
typography. Typography is the study of type. It is concerned
with the appearance of letters, including their shape, size, and color, as well as other
features used to enhance the appearance and readability of text.
Typography emerged around the invention of the printing press in the mid fifteenth century.
Computers opened up typography to everyone and now we can say that any computer user
does typography. Arranging letters on the page well and following
the principles of good typography can impact the reader and strengthen the message that
the designer is trying to convey. Bad typography, on the other hand, can make the text difficult
to read.
Fonts are classified into different types, such as serifs and sans serifs. Serifs are
fonts with decorative elements. These decorative elements are called serifs as well. Sans serifs
are simply fonts without serifs. In the illustration the first letter in blue
is in a serif font Bodoni. Here one of the four serifs is marked in red. The other letter
in yellow is in a sans-serif font, Futura. The term comes from the French word sans,
which is spelled as s-a-n-s and means "without".
Other classifications divide fonts based on
their historic origins. The main groups in this classification include old type, transitional
type, modern type, and modernized type. The old style or old face includes the oldest fonts.
Transitional types are the ones that historically
followed the oldest ones; modern types are fonts that were designed after the transitional
types and until about the 1820s. Modernized or modernized old style types include
modern fonts that imitate the true old style but are designed in the modern times.
There are also other groups in this classification. Each group of fonts differs in several design
elements such as their thickness, contrast between thick and thin lines, and the shape
of the serifs. Other classifications also exist.
Typography is concerned with manipulating size and font types to make pages with a pleasing
and easy to read appearance. There are several conventions for specifying the size of letters.
For some of these conventions the same size of letters in two different fonts may not
mean that they have the same linear dimensions. We will discuss this later in the video.
Despite these inconsistencies, size does help designers to know how much space a given text
takes up on a page, and as such is a useful measure in desktop publishing.
While centimeters or inches can be employed, units called pixels are also used. Each pixel
represents a dot or a square. Pixels put together in a pattern make up an image on the screen.
In typography size of letters and characters is measured with the help of a basic standardized
unit, pica.
Sometimes pica is used directly, for example to measure margins and column sizes. However,
often instead of pica, the units derived from it, such as points and pixels, are used.
There are several conventions for calculating pica.
of length, and even in cases when pica is tied to the inch, its value differs depending
on the historical definition of the inch in a given country.
Computer pica is measured as 1/6 of an inch. Points are generally derived from pica.
PostScript is one of the formats that uses the computer typography
units. These units are used by most computers for measuring text displayed on the screen
and for home printing. The size of the letters is measured using
the following dimensions:
• The ascender line marks the top of the letter;
• The mean line is at the top of the main
body of the letter, this is also known as median;
• The baseline is at the bottom of the main body of the letter;
• The descender line marks the bottom of the letter;
• The x-height is the size of the main body of the letter. Traditionally it equals to
the height of the letter x, hence its name;
• Finally, the body size is the size of
the led block that was historically used for printing each letter.
Points are the units conventionally used to determine the size of the font. For example,
much of the academic writing and business correspondence is done in sizes between point
10 and point 12. The actual size in inches or millimeters refers
to the value called body size. Historically this is the physical height of the lead block
used for printing with the printing press — it has a single letter on it.
Pixels are the units for measuring the size of digital images. We will talk about them
a bit later. Now let us talk about several terms used in
typography: leading, kerning and tracking.
Leading is the distance between the successive
lines of text. The term comes from thin lead strips that were inserted between the lines
to increase the vertical distance between them. Because the strips were made from lead,
the word is pronounced as "ledding", not "leeding". Tracking or letter-spacing means increasing
or decreasing the space between all letters in one line or in the whole block of text.
Kerning is the process of adjusting the spacing between individual characters to achieve a
visually pleasing result. In our example kerning was adjusted between the letters A and V as
well as between W and A. In some cases in web design, points can be
defined based on the physical measurements of pica relevant to units of length, for example
inches, as I explained earlier. However, both points and picas can also be defined relative
to the size of a pixel, as defined by a particular website. In this case this pixel is called
a reference pixel or CSS pixel.
The units that I outlined earlier mainly denote the height of each letter. There are also
two typographic units, which measure the width of letters. They are called Em and En
spelled as e-m and e-n. Em equals the size of the character in points, while en is half of an em.
Historically, the size of em was defined as the width of the capital letter M, hence its name.
Although today this is not an accurate definition anymore, because M is different for the numerous fonts that are in use today.
Em and en are often used to measure the length of dashes. In English, en dash is used to indicate range. For example, in the phrase
"use 3--4 table spoons of sugar", we will use the shorter en dash.
The longer em dash will be used as punctuation, for example in this phrase:
"the summer was short, but the winter — long".
Indentation and column width can also be measured with em and en units.
Displays, Pixels and Viewing Angle
Standard pixels are substituted by reference pixels when the target audience uses devices
that are viewed from unusual distances or that have screens of unconventional sizes.
The reference pixel is the visual angle of one pixel on a device that has a pixel density of
96 dpi and a distance of an arm's length between the eye and the screen.
For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees.
For reading at arm's length, 1px thus corresponds to about 0.26 mm or 1/96 of an inch.
At the same time, for reading at a distance of 3.5 m or 12 feet, a reference pixel equals
to 1.3 mm.
People have long noticed the correlation between the size of the screen, the distance
from the screen, the size of a pixel, and how big this pixel appears to the human eye. To relate
all of them in an easy-to-understand way, the concepts of visual angle and Pixels Per
Degree were introduced. The variable, Pixels Per Degree or PPD, also
known as angular resolution, represents the total number of pixels that we want to appear
on the screen per a given distance formed by the viewing angle of one degree.
In the illustration, the yellow angle D is one degree. Well, it is not actually one degree in this picture because it
would be hard to see the diagram with such a small angle, but please imagine that it is.
The value Pixels Per Degree represents the number of pixels that can be lined up along the red line E and also
along the red line F in the illustration. In our example PPD is three pixels. You can see two
grey pixels and one dark grey pixel, making a total of three.
Display manufacturers usually calculate the PPD so that the pixels are small enough to
blend in and to produce a continuous image. It is usually much higher than in our illustration.
Apple, for example, claims to keep the PPD for their displays no lower than 53.53, sometimes as high as 79 PPD.
Knowing the PPD one can calculate the size
of one pixel by using the distance from the eye to the display and the visual angle. In
our example the distances are 10 and 20 inches — the approximate distances for a smartphone
and a computer display respectively. The visual angle is the angle at which the
distance that is covered within this angle on the screen covers one pixel. In the illustration
this distance in one pixel is represented as green lines B and C. The visual angle in
this illustration is marked in orange.
Using these tools, we can easily calculate pixel sizes not only for standard displays but
also for those that are viewed at unusual
distances or are of unusual sizes. If you are interested to know more, you can find
more information on the W3C website.
Critique
Many designers argue that the currently used typographic systems based on picas and points
are far from ideal. Critique includes problems that arise from
having to use this system in conjunction with the metric or the imperial units that designers
use for images and page sizes. This is a problem because the typographic unit system is not
tied accurately to the metric or the imperial units.
Another problem is that the letters of the same point size but from different fonts appear
to have different sizes. This is because the size expressed in points corresponds to the
body size, not to the size of the body of the letter, which is the x-height as I explained earlier.
This makes it difficult for the designer to
keep consistency through the document. For example, in the illustration, all three words
are written with the same size in points, yet their x-height is very different because
I used different fonts for them. Some designers propose to use the x-height as the font size
size and to stop using the body size to address this issue.
Thank you for watching. If you liked this video,
please don't forget to subscribe to our channel!