What is Typography?

THE ELEMENTS OF TYPOGRAPHY

Typefaces and Fonts: If you've ever spoken to a design who use typography in
their works, you likely have heard the terms "typeface" and/or "font". Many
people use these two terms interchangeably, but there are actually some
differences between these two items.

"Typeface" is the terms give to a family of fonts (such as Helvetica Regular,

Helvetica Italic, Helvetica Black, and Helvetica Bold). All of the various versions
of Helvetica make up the complete typeface.

"Font" is the term used when someone is referring to only one weight or style
within that family (such as Helvetica Bold).

So many typefaces are comprised of a number of individual fonts, all of which are
similar and related but different in some way. Some typefaces may only include a
single font, while others could include numerous variations of the letterforms
that make up the fonts.

Does this sound a bit confusing? If so, do not worry.

In reality, if someone is not a typography expert, they will likely use the term
"font" regardless of which one of these terms they truly mean - and even many
professional designers use these two terms interchangeably. Unless you are
speaking to a pure type designer about the mechanics of the craft, you are
probably pretty safe using whichever of these two terms you'd prefer. That being
said, if you do understand the distinction and can properly use the correct terms,
that is never a bad thing!

Typeface Classifications: Sometimes called "generic font families", these are

large groupings of typefaces based on a number of generic classifications that
different fonts fall under.. On Web pages, there are six types of font classifications
that you are likely to see:

 serif
 sans-serif
 monospaced
 cursive
 fantasy
 script
Basic Typography Terminology
Typeface

A typeface refers to a group of characters, such as letters, numbers, and

punctuation, that share a common design or style. Times New Roman, Arial,
Helvetica and Courier are all typefaces.

Font

Fonts refer to the means by which typefaces are displayed or presented. Helvetica
in movable type is a font, as is a TrueType font file.

Type Families

The different options available within a font make up

a type family. Many fonts are at a minimum available
in roman, bold and italic. Other families are much
larger, such as Helvetica Neue, which is available in
options such Condensed Bold, Condensed Black,
UltraLight, UltraLight Italic, Light, Light Italic,
Regular, etc.

Serif Fonts

Serif fonts are recognizable by the small lines at the

ends of the various strokes of a character. As these
lines make a typeface easier to read by guiding the
eye from letter to letter and word to word, serif fonts
are often used for large blocks of text, such as in a
book. Times New Roman is an example of a common
serif font.

Sans Serif Fonts

Serifs are small lines at the ends of character strokes. Sans

serif, or without serif, refers to typefaces without these lines.
Sans serif fonts are often used when a large typeface is
necessary, such as in a magazine headline. Helvetica is a
popular sans serif typeface. Sans serif fonts are also common for website text, as
they can be easier to read on screen. Arial is a sans serif typeface that was
designed specifically for on-screen use.

Point
The point is used to measure the size of a font. One point is equal
to 1/72 of an inch. When a character is referred to as 12pt, the full
height of the text block (such as a block of movable type), and not
just the character itself, is being described. Because of this, two
typefaces at the same point size may appear as different sizes,
based on the position of the character in the block and how much
of the block the character fills.

Pica
The pica is generally used to measure lines of text. One pica is equal to 12 points,
and six picas are equal to one inch.

Baseline

The baseline is the invisible line on which characters sit. While

the baseline may differ from typeface to typeface, it is consistent
within a typeface. Rounded letters such as "e" will extend
slightly below the baseline.

X-height
The x-height is the distance between the meanline and the
baseline. It is referred to as the x-height because it is the
height of a lowercase "x." This height can vary greatly
between typefaces.

Tracking, Kerning and Letterspacing

The distance between characters is controlled by tracking, kerning and lett

erspacing. Tracking is adjusted to

change the space between characters consistently across
a block of text. This may be used to increase legibility for
an entire magazine article. Kerning is the reduction of
space between characters, and letterspacing is the addition of space between
characters. These smaller, precise adjustments may be used to tweak a specific
word, such as in a logo design, or a large headline of a story in a newspaper. All of
the settings may be experimented with to create artistic
text effects.

Leading

Leading refers to the distance between lines of text. This

distance, measured in points, is measured from one
baseline to the next. A block of text may be referred to as being 12pt with 6pts of
extra leading, also known as 12/18. This means there is 12pt type on 18pts of total
height (12 plus the 6pts of extra leading).

Serif Definition

serif typefaces are popular in newspapers and books.

In typography, a serif is the small extra stroke found at the end of the main
vertical and horizontal strokes of some letters. Some serifs are subtle and others
are pronounced and obvious. In some cases, serifs aid in the readability of a
typeface. The term "serif fonts" refers to any style of type that has serifs. (Fonts
without serifs are called sans serif fonts.) Serif fonts are extremely popular and
have been around for many years.
Times Roman is one example of a serif font.

USES FOR SERIF FONTS

Fonts with serifs are particularly useful for large blocks of text. The serifs make it
easy for the eye to travel over the text. Many serif fonts are beautifully designed
and add a distinctive touch wherever they are used. Most books, newspapers and
magazines use serif fonts for their legibility.

Serif fonts are not as useful for web designs, particularly when they are used at
small sizes. Because the screen resolution of some computer monitors is low, the
tiny serifs can be lost or fuzzy, which makes the text difficult to read. Many web
designers prefer using sans-serif fonts for a clean and modern, casual vibe.

FOR READING ONLY:-

SERIF CONSTRUCTION

The shapes of serifs vary, but they are generally described as:

 Hairline serifs
 Square or slab serifs
 Wedge serifs

Hairline serifs are much thinner than the main strokes. Square or slab serifs are
thicker than hairline serifs and can even be a heavier weight than the main
stroke.
Wedge serifs are triangular in shape.

Serifs are either bracketed or unbracketed. A bracket is a connector between the

stroke of a letter and its serif. Most bracketed serifs provide a curved transition
between the serif and the main stroke. Unbracketed serifs attach directly to the
strokes of the letterform, sometimes abruptly or at right angles.

Within these divisions, the serifs themselves can be blunt, rounded, tapered,
pointed or some hybrid shape.

CLASSIFICATIONS OF SERIF FONTS

Classic serif fonts are among the most reliable and beautiful fonts. Fonts in each
classification (with the exception of informal or novelty fonts) share similar
characteristics including the shape or appearance of their serifs. They can be
loosely categorized as follows:

Modern serif fonts date to the late 18th century. There is a noticeable difference
between the thick and thin strokes of the letters. Examples include:

 Bodoni
 Bernhard Modern
 Walbaum
 Didot
 Elephant
 Century Schoolbook

Old style fonts are the original serif typefaces. Some date to before the mid 18th
century. Newer typefaces modeled on these original fonts are also called old style
fonts. Examples include:

 Berkeley Oldstyle
 Stempel Schneidler
 Bembo
 Galliard
 Caslon
 Garamond
 Palatino

font development dates to the mid 18th century when improved printing
methods made it possible to reproduce fine line strokes. Some of the fonts that
came from this improvement include:

 Baskerville
  Perpetua
 Utopia
 Georgia
 Caslon Graphique
 Times New Roman
 Slimbach

Slab Serif fonts are easily identified by their usually thick, square or rectangular
serifs.

They are often bold and are designed to attract attention, not be used in large
copy blocks.

 Bodoni Egyptian
 Clarendon
 Glypha
 Rockwell
 Memphis
 Courier

Blackletter fonts are also referred to as Old English or Gothic fonts. They are
recognizable by their ornate appearance. Useful on certificates or as initial caps,
blackletter fonts are not easy to read and should not be used in all caps.
Blackletter fonts include:

 Notre Dame
 Clairvaux
 Old English
 Goudy Text
 Luminari
 Cloister Black

Informal or Novelty serif fonts attract attention and are best used sparingly
combined with another font that is easily legible. Novelty fonts are diverse. They
invoke a mood, time, emotion or special occasion. Examples include:

 Gist Rough
 Type Keys
 Country Western
 White Rabbit
 Snow Goose
 DeadWoodRustic
Sans Serif Font Definition

San serif fonts perform well in web page designs

Fonts that do not have serifs—the tiny extra strokes at the end of vertical and
horizontal lines of some letterforms—are called sans serif fonts. San serif fonts
are relatively new to the world of typography. Although there were some sans
serif typefaces in the 1800s, the 1920's Bauhaus design movement popularized
the sans serif style.

SANS SERIF FONT USAGE

Sans serif fonts have a reputation of being more modern, casual, informal and
friendly that serif fonts, which have a longer history.

Although serif fonts dominate the world of print—particularly for long sections
of body copy—many web designers prefer to use sans serif fonts for their on-
screen legibility. They are also the frequent choice of the publishers of children's
books because the letters are easier to recognize. In print, small serifs can break
up when they are reversed out of a dark color or photograph; sans serif type is
almost always the better choice in this instance.

Sans serif fonts work well for short sections of text, such as credits and captions.
When a project calls for very small type sizes, sans serif type is easier to read.

ONLY FOR READING

TYPES OF SANS SERIF FONTS

There are five main classifications of san serif fonts: grotesque, neo-grotesque,
geometric, humanist and informal. Typefaces within each classification usually share
similarities in stroke thickness, weight and the shapes of certain letterforms.There are
thousands of sans serif fonts available to designers.

Here are a few.

Grotesque sans serif typefaces were the first ones that were commercially available.
They were designed in the 19th and early 20th centuries and had some awkward curves
with little variation in stroke width.

 Franklin Gothic
 News Gothic
 Akzidenz-Grotesk

Neo-Grotesque fonts (also known as Realists or Transitionals) are more polished

than the grotesque san serif typefaces.

This classification includes the most frequently used sans serif fonts.

 Helvetica
 Univers
 Arial
 Bell Centennial
 Geneva
 Impact

Geometric san serif fonts are built on geometric shapes rather than on early
letterforms or calligraphy. They display little or no stroke weight contrast.

 Futura
 Avenir
 Bauhaus
 Kabel
 Avant Garde
 Eurostile

Humanist typefaces are identified by their calligraphic influence and uneven stroke
weights and most of the fonts bearing this description are more legible choices than
other san serif faces.

 Gill Sans
 Frutiger
 Myriad
 Optima
  Trebuchet
 Calibri

Informal sans serif fonts are often used as novelties, so they are less frequently used
than other sans serif fonts. They include

 Eneas Expanded
 Italo
 Barrio
 ABeeZee
 Bahiana
 High School USA Sans

There are also a number of other font classifications that are offshoots of these.
For example, "slab serif" fonts are similar to serifs, but they all feature a
recognizable design with thick, chunky serifs on the letterforms.

One websites today, serif and sans-serif are the two most common font
classifications that are used.

Typeface Anatomy: Each typeface is made up of different elements that

distinguish it from other typefaces.

Unless you are specially going to go into type design and looking to create brand
new fonts, web designers don't generally need to know the specifics of typeface
anatomy. If you're interested in learning more about these building blocks of
typefaces and letterforms, there is a great article on typeface anatomy on
the About.com desktop publishing site.

At a basic level, the elements of typeface anatomy thatyou should be aware of are:

 Cap and x-height: This is the height of the capital letters in the typeface
and the height of the letter x. It tells you how tall the largest letters will be,
as well as how big most lowercase letters will be. Fonts are sized based on
these two characteristics.
 Decenders and ascenders: These are the portions of letters that go below
and above the x-height line. These typically refer to lowercase letters. For
instance, the letter "b" has an ascender (the piece that sticks "up" from the
letter) while the letter "p" has a descender (the parts that dips "down" from
the letter).

SPACING AROUND LETTERS

There are several adjustments that can be made between and around letters that
affect typography. Digital fonts are created with many of these characteristics in
place, and on websites we have limited ability to change these aspects of the font.
This is often a good thing since the default way that fonts are displayed is usually
preferable.

 kerning - the horizontal space between individual letters

 tracking - the space between groups of letters
 leading - vertical space between lines of type (this is known as line-height
in website terms)
 measure - the length of lines of text
 alignment - visually placing text to the left, right, centered, or justified
 ligatures - letters moved close together so that their anatomies are
combined, essentially flowing one letter into another

MORE TYPOGRAPHY ELEMENTS

Typography is more than just the typefaces that are used and the whitespace
around them. There are also some other things you should keep in mind when
creating a good typographic system for any design:

Hyphenation: Hyphenation is the addition of a hyphen (-) at the end of lines to

help prevent problems in readability or make justification look better. While
commonly found in printed documents, most web designers ignore hyphenation
and do not use it in their work because it is not something that is handled well
automatically by web browsers.
Rag: The uneven vertical edge of a block of text is called the rag. When paying
attention to typography, you should look at your text blocks as a whole to make
sure that the rag is not impacting the design. If the rag is too jagged or uneven, it
can affect the readability of the text block and make it distracting. This is
something that is automatically handled by the browser in terms of how it raps
type from line to line.

Widows and Orphans: A single word at the end of a column is a widow and if
it's at the top of a new column it's an orphan. Widows and orphans look bad and
can be hard to read.

Getting your lines of text to display perfectly in a web browser is a grueling

proposition, especially when you have a responsive website and different displays
for different screen sizes. Your goal should be to review the site at different sizes
to try to create the best look possible, while accepting that in certain cases your
content will have windows, orphans, or other less-than-ideal displays.

Your goal should be to minimize these aspects of a type's design, while also being
realistic in the fact that you cannot achieve perfection for every screen size and
display.

STEPS TO CHECKING YOUR TYPOGRAPHY

1. Choose the typefaces carefully, looking at the anatomy of the type as well as
what family of type it is in.
2. If you build the design using placeholder text, don't approve the final
design until you've seen the real text in the design.
3. Pay attention to the little details of the typography.
4. Look at each block of text as though it had no words in it. What shapes
does the text make on the page? Make sure those shapes carry the entire
page design forward.

Unobtrusive Is the Key to a Good Book Font

When you read a book, the designer's font choice is probably not the first thing
you notice. That's a good thing because if the font choice immediately jumped out
at you and said "look at me," it was probably the wrong font for that book. When
you are choosing a font for a book design, keep a few simple font characteristics
in mind.

 Use a serif or sans serif font.

The body of the book is not the place for blackletter, script or decorative
fonts. In some cases, they might work for chapter titles or the table of
contents, but not for the main text. You generally won't go horribly wrong
 with most classic serif or classic sans serifchoices, although traditionally,
most book fonts are serif fonts.
 Be unobtrusive.
For most books, the best font is one that does not stand up and shout at the
reader. It won't have an extreme x-height, unusually
long ascenders or descenders, or overly elaborate letterforms with extra
flourishes. While a professional designer may see the unique beauty in each
typeface, for most readers the face is just another font.
 Stay away from typewriter fonts.Avoid monospaced fonts such as
Courier or other typewriter fonts. The uniform spacing between characters
makes the text stand out too much. The exception would be in other text
elements such as chapter headings or pull-quotes where you might want a
more distinctive font.

 Choose a font that is clearly legible at 14 points or smaller.Actual

font size depends on the specific font but most books are set at a size
between 10 and 14 points. Decorative fonts are usually not legible at those
sizes.
 Adjust the leading.The space between lines of type is just as important
as the specific typeface and point size. Some typefaces may require more
leading than others to accommodate long ascenders or descenders.
However, increased leading can lead to more pages in the book. It's a
balancing act with some book designs. Adding about 2 points to the text
point size is a good starting point for choose leading—so 12-point type
would be set with 14-point leading.

SPECIFIC BOOK FONT SELECTIONS

While it is hard to go wrong with well-known serif classics such as

Minion, Janson, Sabon and Adobe Garamond, don't be afraid to try a sans
serif font like Trade Gothic if it works for your design. For digital books, Arial,
Georgia, Lucida Sans or Palatino are all standard choices because they are loaded
onto most e-readers. Other good book fonts include ITC New
Baskerville, Electra and Dante.