training your eye - bbcdbbcdcomdes.weebly.com/uploads/1/1/8/6/11866691/... · x-height which makes...

"Human Society, the world, man in his entirety is in the alphabet. The alphabet is a source...first comes the house of man and its construction, then the human body, its build and deformities; then justice, music, the church; war, harvest, geometry; the mountain, nomadic life and se-cluded life, astronomy, toil and rest; the horse and the snake; the hammer and the urn which-- turned over and struck-- makes a bell; trees, river, roads; and fi-nally destiny and God.

That is what the alphabet signi-fies.”--Victor Hugo, 1802-1885

Training your eyeTypefaces used on this page:Eurostile Bold Condensed + RegularTimes New Roman



“Human Society, the world, man in his entirety is in the alphabet. The alphabet is a source… first comes the house of man and its construction, then the human body, its build and deformities; then justice, music, the church; war, harvest, geometry; the mountain, nomadic life and secluded life, astronomy, toil and rest; the horse and the snake; the hammer and the urn which—turned over and struck—makes a bell; trees, river, roads; and finally destiny and God.

“That is what the alphabet signifies.”

�Victor Hugo, 1802–1885

Training your eyeTypefaces used on this page:Eurostile Bold Condensed + RegularTimes New RomanHoefler Text RegularZapfino Regular + glyph






Training your eye

12-point type is too large.

Metric Kerning.

Line length is too short (not enough words on the line) giving uneven spacing and lots of hyphens.

Quote marks are ditto marks, not quote marks.

Computer ellipsis is to tightly kerned.

Double hyphen instead of em dash is OK for an email.

Paragraph space is created by hitting 2 returns.

2 letter hyphenations. The last paragraph is the worst type of widow.

Hyphen between dates.

Small caps are computer generated.

Byline is italic but the comma is roman.Double hyphen.Quote marks incorrect.

No ligatures.

10-point is easier to read because you can see entire phrases, and it looks like you know what you are doing.

Optical Kerning.

Flush left gives even space between the words.

Curly quotes are true quotes.

More air with the glyph.

The Em dash (used a bit like a comma).

Space between paragraph manually set (in this case 2mm).

Hyphenation eliminated. Always manually hyphenate (or don’t).

En dash should be used for range.

The small caps are true drawn.

Comma in same font as name.Ornament used instead of dash.Quotes use at beginning of each paragraph, but only closed at the end of the quote.

Ligatures used.

No break on line 3.

X ?

Typefaces used on this page:Eurostile Bold Condensed + RegularTimes New RomanHoefler Text RegularZapfino Regular + glyphFrutiger Roman + 95 Ultra Black

T h e q u i c k b r o w n f o x j u m p s o v e r t h e l a z y d o g .

Anatomy of typeTypefaces used on this page:Eurostile Bold Condensed + RegularFootlight MT RegularFrutiger Roman

cap height

The height of the capital letters.



cap height x-height

The x-height of a typeface is the size of the letter x. A lowercase x is the only character which reaches all four corners of the letter space. It is the x-height which makes the font seem large or small when rendered at 10pt.The x-height of fonts varies dramatically from font to font. All fonts are 30pt.

Anatomy of typeTypefaces used on this page:Eurostile Bold Condensed + RegularFootlight MT RegularFrutiger RomanFranklin Gothic Regular, Goudy Oldstyle Regular, Edwardian Script, Hobo, Mrs Eaves Regular & Geneva Regular.


cap height x-height

The point size of a font is measured from thee highest point to the lowest point, not by the x-height.

All of these fonts are displayed at 50pt—you can clearly see that x-height is the most important factor in the perceived size of a font.

boxing boxing boxing boxing boxing boxing



cap height

baseline

The invisible line on which the typeface sits.

x-height



cap height ascender

descenderbaseline

x-height

Ascenders are strokes that rise above the x-height.

Descenders are strokes that dip below the baseline.



cap height ascender

descenderbaseline

x-heightstress

The angle through the thinnest parts of the curves.

The transitions are known as the thick and thin.

thick and thin



cap height ascender

baseline

x-heightstresscounter

The stoke is the main line in the letter.

The serif is the tail of the font.

The terminal is the hole left by the negative space.

A terminal is the end of the stroke without a serif.

thick and thin

terminalserif

stroke

descender



cap height ascender

baseline


The bar is the horizontal stroke such as in, A, H, and t.

A hook is found in f and r.

thick and thin

terminalserif

stroke

bar and hook

descender



cap height ascender

baseline


The g has some special features in some fonts.

thick and thin

terminalserif

stroke

bar and hook

earbowl and loop

descender

Oldstyle fonts are you classic serifs. They developed out of a handwritten tradition that involved the use of a broad tipped pen held at an angle. This is what produces the thick and thin lines that create the stress.

Many of these fonts are fabulous for readability in lengthy body copy.

Oldstyle fonts are not necessarily old—they are still being made today.

After the industrial revolution the world began to change. Baroque, Rococo and oldstyle faces were named “Oldstyle” and a new era of font design commenced. These fonts reflected the fashion of the day and are much more sever in appearance.

Modern faces have serifs but the serifs are horizontal and thin. Any stress is straight up and down.

As a group they are generally much more difficult to read.

Types of faces

Once the industrial revolution really took off a new trade was invented—called advertising. This lead to the creation of many new fonts.

The new style often incorporated the diagonal stress of oldstyle fonts but retained the horizontal serif of the moderns (but a little chunkier).

At the time the Rosetta stone was discovered and the world was interested in all things Egyptian. The font foundries discovered they could sell more fonts if they gave them Egyptian names—so they did. Consequently, these fonts are often called Egyptians. To make matters more confusing, Clarendon is considered the quintessential slab serif, so they are sometimes called Clarendons.

William Caslon removed the serif from a font in 1816 because he hated them. Nobody cared. It wasn’t until the Bauhaus movement that it became popular and was mimicked.

The strokes in san serifs have almost no transition from thick to thin (Optima being one of the few exceptions to the rule).

San serifs generally have very big x-heights so they seem quite large.

slab serif sans serifoldstyle modern

Century OldstyleGaramondMinionPerpetua

Bernard CondensedOnyxBodoniBodoni Poster

ClarendonMemphisCentury SchoolbookEgyptian 505

FuturaFrutigerFranklin GothicGeneva

Typefaces used on this page:Eurostile Bold Condensed + RegularFrutiger Roman + Black

Scrips emulate hand lettering and are present throughout typographic history.

Blackletters are old Celtic fonts often found in bibles, and are usually quite elaborate and difficult to read.

Types of faces

Welcome to the 1980s and the demolition and reconstruction of typefaces. With the advent of desktop publishing came a plethora of fringe typeface—designed to jar the senses.

Decorative fonts are fonts made of ballet shoes or Japanese pagodas or eraser dust—they are just for fun.

distressed decorativescript blackletter

Bickham ScriptNevison CasualMinstralEdwardian Script Lucida Blackletter

Typefaces used on this page:Eurostile Bold Condensed + RegularFrutiger Roman + Black

Any typeface that calls attention to itself will register lower on the readability scale. Even the slight uniqueness of Footlight MT makes it difficult to read as body copy.

Things to avoid:

Lots of contrast between thick and thin on the stress.

Tall narrow letter forms and short squat forms.

Slanted characters (italic or oblique).

Fancy serifs.

Any extreme features.

Changing the kerning settings from metric to optical will immediately increase readability.




The art of readability







Footlight MT Egyptian 505Corsiva MT

Typefaces used on this page:Eurostile Bold Condensed + RegularFrutiger Roman + BlackZapfino Regular + glyph

The best typefaces for body copy are the oldstyle faces. They were made for use in books—so they have been designed specifically for long bodies of text.




The art of readability







Minion 10pt Century 10ptGaramond 10pt


On screen you will always find it easier to read a sans serif font. This is because the delicate serifs do not render well at 72dpi.

However, the opposite is true in print. We don’t really understand why a serif is easier to read than a san serif in a printed environment, but it is. There are various theories (such as: the serifs lead the eye into the next letter) but none have been proven.

There seems to be some evidence that (due to its proliferation) san serif body copy is becoming more broadly accepted. However, there are rules for increasing legibility: increased leading and shorter line length being the 2 most important.

Serif vs. sans serif







Arno Pro 10pt Arial 9pt




Arial 10pt


This is the a genera piece for Empire Magazine (assignment for Peta). It is a 10 page spread for a special feature on GNs adapted for the big screen.

Why did I get a C?

What is wrong with this typography?Typefaces used on this page:Eurostile Bold Condensed + RegularFrutiger Roman

Text set in all caps is much more difficult to read. When you read you don’t really read each letter, you assess the shape of the word and register the meaning from the shape.

The only time you actually read a word is when you are unfamiliar with its shape.

If you use all caps the shape is lost and replaced with blocks that trigger no meaning in your mind.




“Human SocieTy, THe world, man in HiS enTireTy iS in THe alpHabeT. THe alpHabeT iS a Source… firST comeS THe HouSe of man and iTS conSTrucTion, THen THe Human body, iTS build and deformiTieS; THen juSTice, muSic, THe cHurcH; war, HarveST, GeomeTry; THe mounTain, nomadic life and Secluded life, aSTronomy, Toil and reST; THe HorSe and THe Snake; THe Hammer and THe urn wHicH—Turned over and STruck—makeS a bell; TreeS, river, roadS; and finally deSTiny and God.

“THaT iS wHaT THe alpHabeT SiGnifieS.”


“Human Society, tHe world, man in HiS entirety iS in tHe alpHabet. tHe alpHabet iS a Source… firSt comeS tHe HouSe of man and itS conStruction, tHen tHe Human body, itS build and deformitieS; tHen juStice, muSic, tHe cHurcH; war, HarveSt, geometry; tHe mountain, nomadic life and Secluded life, aStronomy, toil and reSt; tHe HorSe and tHe Snake; tHe Hammer and tHe urn wHicH—turned over and Struck—makeS a bell; treeS, river, roadS; and finally deStiny and god.

“tHat iS wHat tHe alpHabet SignifieS.”


Esta FrutigerEsta

Caps vs. lowercaseTypefaces used on this page:Eurostile Bold Condensed + RegularFrutiger Roman + BlackZapfino Regular + glyph

Since we recognise phrases even better than words, any spacing anomalies between the letters or the words can hinder our ability to read the copy fluidly.

There are no rules for spacing—you just need to habitually look for spacing issues and to trust your eye to pick up any problems.

If it looks like the letters are too close, then they are.

Many script faces need to be kerned tighter together because the tails often leave spaces between the letters (such as with Victor Hugo’s signature shown here).










Georgia GeorgiaGeorgia

Letter spacing and word spacing

Victor Hugo Victor Hugo


If a line is too long we have trouble finding the beginning of the next line. If it too short in breaks up the phrases we recognise.

There are a couple of ways to determine how wide your column should be:

No more than 10 words or no more than 65 characters (2.5 alphabets).

No less than 4 words (average).

If you intend fully justifying your text then err on the longer side.

Shorten the line length if the typeface has a large x-height (common with sans serifs) or a very small one.

If you are using reverse type (white on black) make the line a little shorter.

Shorten the length if the copy is difficult to read for any reason.

If it looks wrong—it is wrong.

Women do not like reading justified text—men don’t seem to mind.










Georgia

Line length and justification




“Human Society, the world, man in his entirety is in the alphabet. The alphabet is a source… first comes the house of man and its construction [ditched some text to fit it in]...then justice, music, the church; war, turned over and struck—makes a bell; trees, river, roads; and finally destiny and God.




If a line is too long we have trouble finding the beginning of the next line. If it too short in breaks up the phrases we recognise.

There are a couple of ways to determine how wide your column should be:

No more than 10 words or no more than 65 characters (2.5 alphabets).

No less than 4 words (average).

If you intend fully justifying your text then err on the longer side.

Shorten the line length if the typeface has a large x-height (common with sans serifs) or a very small one.

If you are using reverse type (white on black) make the line a little shorter.

Shorten the length if the copy is difficult to read for any reason.

If it looks wrong—it is wrong.

Women do not like reading justified text—men don’t seem to mind.

“Human Society, the world,

man in his entirety is in

the alphabet. The alphabet

is a source… first comes

the house of man and its

construction, then the

human body, its build and

deformities; then justice,

music, the church; war,

harvest, geometry; the

mountain, nomadic life and

secluded life, astronomy, toil

and rest; the horse and the

snake; the hammer and the

urn which—turned over and

struck—makes a bell; trees,

river, roads; and finally

destiny and God.

“That is what the alphabet

signifies.”


“Human Society, the world, man in

his entirety is in the alphabet. The

alphabet is a source… first comes the

house of man and its construction,

then the human body, its build and

deformities; then justice, music, the

church; war, harvest, geometry; the

mountain, nomadic life and secluded

life, astronomy, toil and rest; the horse

and the snake; the hammer and the

urn which—turned over and struck—

makes a bell; trees, river, roads; and

finally destiny and God.



“Human Society, the world, man in his entirety is in the alphabet. The alphabet is a source… first comes the house of

man and its construction, then the human body, its build and deformities; then justice, music, the church; war, harvest,

geometry; the mountain, nomadic life and secluded life, astronomy, toil and rest; the horse and the snake; the hammer

and the urn which—turned over and struck—makes a bell; trees, river, roads; and finally destiny and God.



Georgia

Line length and justification


man in his entirety is in the

alphabet. The alphabet is a

source… first comes the house

of man and its construction,

then the human body, its

build and deformities; then

justice, music, the church;

war, harvest, geometry; the

mountain, nomadic life and

secluded life, astronomy, toil

and rest; the horse and the

snake; the hammer and the

urn which—turned over and



destiny and God.

“That is what the alphabet

signifies.”


“Human Society, the

world, man in

his entirety is

in the alphabet.

The alphabet is a

source… first comes

the house of man

and its construction

[ditched some text to

fit it in]...then justice,

music, the church;

war, turned over

and struck—makes

a bell; trees, river,

roads; and finally

destiny and God.

“That is what the

alphabet signifies.”



An exceptionally large x height decreases legibility. Some faces have such large x-heights that it is hard to tell an “n” from an “h”—such as Antique Olive.

And very small x-heights also decrease legibility. The body of the character is disproportionate to the caps and ascenders, and our eyes find this distracting. The letters also appear very small. Just live they do in Bernhard Modern.

Then there are fonts that seem to have mixed sized ascenders and descenders, like Mrs. Eaves. See how tall the “l” is compared to the “t” and how short the x-height is on the “y” and “u”—all these things serve to decrease readability.


man in his entirety is in

the alphabet. the alphabet

is a source… first comes

the house of man and its

construction, then the

human body, its build

and deformities; then

justice, music, the church;

war, harvest, geometry;

the mountain, nomadic

life and secluded life,

astronomy, toil and rest;

the horse and the snake;

the hammer and the urn

which—turned over and



destiny and God.

“that is what the

alphabet signifies.”








Bernhard Mod Mrs EavesAntique Olive

Large & small x-heightTypefaces used on this page:Eurostile Bold Condensed + RegularFrutiger Roman + BlackZapfino Regular + glyph

To make unreadable typefaces more accessible, first play with the point size and then with the leading.

Please note: I do not endorse using illegible typefaces for body copy, but if you must (for one reason or another) use a display font for copy, these are the ways you can increase its legibility. Nevertheless, these rules also apply to display type used as headings and headlines.

Using default leading will make you look like an amateur.










Gill Sans Light Marker FeltColonna

Line spacing (aka. leading)Typefaces used on this page:Eurostile Bold Condensed + RegularFrutiger Roman + BlackZapfino Regular + glyph

Ultra bold and ultra lightweight fonts are difficult to read even in small amounts.

Positive text is always easier to read in print when compared to negative. The constraints of print mean that the black ink bleeds into the white space via to pores in the paper.

Anytime you do reverse type make sure you make it bolder (or choose a font without delicate serifs or strokes).

“Human Society, the world, man in his entirety is in the alphabet. The alphabet is a source…






positive negativelight & heavy

Reverse type, light-weights & heavy-weights




Typefaces used on this page:Eurostile Bold Condensed + RegularFrutiger Roman + BlackCooper Black & EccentricAmerican Typewriter Regular + BoldZapfino Regular + glyph

Monospaced fonts, such as Courier create inconstant letter spaces, which are less legible because your eyes have to keep adjusting to the different letter spacing. Some typefaces are poorly space, which creates the same problem.

Title case makes type less legible and less readable (some argue, even in headings). Your eyes and brain are less accustomed to it than lowercase.




“Human Society, The World, Man in his Entirety is in the Alphabet. The Alphabet is a Source… First Comes the House of Man and its Construction, then the Human Body, its Build and Deformities; then Justice, Music, the Church; War, Harvest, Geometry; the Mountain, Nomadic Life and Secluded Life, Astronomy, Toil and Rest; the Horse and the Snake; the Hammer and the Urn Which—Turned Over and Struck—Makes a Bell; Trees, River, Roads; and Finally Destiny and God.

“That is What the Alphabet Signifies.”


title case which is best?monospace

What makes type legible?Typefaces used on this page:Gill Sans LightFrutiger Roman + BlackHobo, Caflisch Script, Interstate Light, Kenyan Coffee, Geneva, Helvetica Bold, Seraphim & Bernhard Modern

Let’s make it clear —if you confuse quote, prime and ditto marks—professionals in the design community will know that you don’t know what you are doing.

Simon is not 5’ 6”, he is 5' 6".

Remember: foot = ' & inches = "

Ditto marks look exactly the same as double prime marks:

There is no excuse for this mistake!

" " "

ditto marksprime marks

“To quote or not to quote”Typefaces used on this page:Eurostile Bold Condensed + RegularFrutiger RomanHelvetica, Adobe Jensen, Interstate Bold & Constantina

quote marks“These are quote marks.” These are quote marks for sans serif fonts. This type of quote is known as a curly quote.

“These are quote marks.”These are more curly quotes. The vast majority serif fonts employ curly style quotes (with some very rare exceptions).

“These are quote marks.”But they are known as oblique quotes rather than curly quotes.This is what the sans serif quote marks look like.

"These are not quote marks."They are double prime marks and

below are single prime marks:

'Don’t make this mistake'.

hung right

Hang that punctuationTypefaces used on this page:Eurostile Bold Condensed + RegularAbadi Condensed Light

unhung left hung left unhung right“Human Society,

The World, Man in his Entirety is in the Alphabet.

The Alphabet is a Source…”

“Human Society,The World, Man in his Entirety is in the Alphabet.The Alphabet is a Source…”


“Human Society,The World,

Man in his Entirety is in the Alphabet.


“Human Society,The World,

Man in his Entirety is in the Alphabet.


hung right

Hung and alignedTypefaces used on this page:Eurostile Bold Condensed + RegularAbadi Condensed Light


unhung left“Human Society,The World, Man in his Entirety is in the Alphabet.The Alphabet is a Source…”

hung left“Human Society,

The World, Man in his Entirety is in the Alphabet.


unhung right

training your eye - bbcdbbcdcomdes.weebly.com/uploads/1/1/8/6/11866691/... · x-height which makes...

Documents