ABC of Typography

Typography

useful art (creating typefaces, design pages, books) science (typographic rules) craft, work (typographer ~ printer)

History of Writing advent of writing system – the result of the evolution of

the human society (the necessity of recording) pictogram (a picture representing a thing)

king

ox

ideogram (a picture representing an idea) pictographic script – hundreds of symbols phonogram (a symbol representing a sound) –

revolution in the evolution of writing (“several” symbols)

Hieroglyphs pictographic script syllabic script

phonetic script

Cuneiform writing pictographic script syllabic script

China’s script

(word script up to present)

sun

mountain

tree

centre

field

boundary

door

The Earliest Scripts

History of Writing in Europe

Phoenician alphabet 22–24 geom. symbols for consonants

Greek alphabet• signs for vowels (!)• the basis for Latin and Cyrillic

Czech alphabet• capital letters – ancient Rome• small letters ~ 800 AD• accents (Jan Hus)

(Carolingian minuscule)

Evolution of Numerals

Romanused till 15st century MDCCLXVIIMDCCLXVIIMDCCLXVIIMDCCLXVII

1767176717671767 Arabic

origin in India

Typeface – Set of Characters

a, b, c, lower case, small lettersA, B, C, upper case, capital letters1, 2, numeralsˇ ´ ¨ diacritical marks, accents. , ! ? ; : punctuation marks ( ) [ ] { } brackets„ “ ’ quotation marks, apostrophe+ = mathematical signs% § & other symbols

Typeface – Boundaries

cap line

ascender line

mean line

base lineRbydescender line

cap

h

eig

ht

x-h

eig

ht

asce

nd

erd

esce

nd

er

Typeface – Letterform stem – the main vertical stroke serif – the small cross-stroke added to the end of main strokes contrast – the degree of difference between thick and thin strokes

no contrast

contrastoblique stress

strong contrastvertical stress

serif

overhanging

stem

counter

A AA A

A AA A

A A

A A

proportional monospacedproportional

proportional monospacedproportional

style of the serif (bracketed / unbracketed)

contrast / no contrast

thickness of strokes

proportions- width- height

Distinguishing features:

end of the strokes (serif / no serif)

Typeface – Letterform

Family – collection of variations designed with the same characteristics of types

Face – one of the styles of a family

Common faces (styles of font):

• roman (regular)

• bold

• italic

• bold italic

• (small capitals)

Type Family

Times New Roman

Times New Roman

Times New Roman

Times New Roman

TIMES NEW ROMAN

(Times New Roman)

Classification of Tapefaces several different systems of classification English classification is based on history

Blackletter (Old English, Gothic)

Old Style Typefaces(Garamont)(Palatino)(Bembo)

(San Marco)(Clairvaux)

Transitional Type(Fourier)(Baskerville)

Classification of Tapefaces

Slab Serif (Egyptian)(Glypha)

Script, Brush, Freehand

Sans Serif (Grotesque)(Helvetica)(Eurostile)

Modern Type(New Century Schoolbook)(Bodoni)

(Lubalin Graph)

(Brush Scripr)

Measuring in Typography

Europe system (Didot)• 1 point = 0,3759 mm • 12 points = 1 cicero = 4,513 mm

English-American system• 1 point = 0,3528 mm • 12 points = 1 pica = 4,23 mm• 72 points = 6 picas = 1 inch = 2,54 cm

0,

9385

1,0655

Eu-pointsAm-points

60 points 60 points60 points 60 points

Body Size (Point Size)

size of the metal body of a type

actual height of letters depends on the typeface

Using of Body Size

poznámka, newspapers, magazines, books, schoolbooks, childbooks, headers 16 pt, headers 18 pt, headers 24 pt poznámka, newspapers, magazines, books, schoolbooks, childbooks, headers 16 pt, headers 18 pt, headers 24 pt

6–7 dictionaries, time tables, telephone directories, notes 8 newspapers9 magazines10 books11–12 schoolbooks, books for children, books in larger format14 books for children, headings16 main headings

Relative Typographical Unit

em = body sizeen = 1/2 em

is used to express• size of spaces between words • width of types

.

Spacing letter spacing

• specified by the definition of types

• computer typesetting – easy to change

• tracking – uniform addition or subtraction of space to/from all characters

AV MN

TRÁVAAV MN

TRÁVA word spacing• left-aligned, centered, right-align text – constant space 1/3 em• justified text – variable space (1/4 em – 1/2 em) • nonbreaking space ban of line break

J.°A.°Komenský 37°Kč z°lesa 100°000

J.°A.°Komenský 37°Kč z°lesa 100°000

• kerning – adjustment of space between individual letter pairs

Paragraph unit of text first line – indent (1–2 em) same indent in the whole text bullets, numbering – special text negative indent of the first line – hanging no first-line-indent – space before paragraph last line – not too short, not as long as the whole line first line cannot stay by itself at the bottom of a page

(orphan) last line cannot stay by itself at the top of a page

(widow)

right-alignedflush rightragged left

(fully) justified

centered

Leading

leading – the space between lines of the text • affects the appearance and readability of the text• suggested value – 20%

line spacing (word processors)

Alignment

left-alignedflush left

ragged right

Rulespunctuationpunctuation

. , : ; ? !. , : ; ? ! no space before, one space after

I came, I saw, I conquered.I came, I saw, I conquered.

“ Konec , zvonec ! “ řekl .“ Konec , zvonec ! “ řekl .

Barvínek menší (Vinca minor)Barvínek menší (Vinca minor)

ellipsisellipsis symbol

quotation marksquotation marks

„ “ „ “ no spaces inside, spaces outsideUse true marks in every language!!

“ ”

bracketsbrackets

( ) [ ]( ) [ ] no spaces inside, spaces outside

What is the meaning of “the open door”?What is the meaning of “the open door”?

“How did she do it?” he asked.“How did she do it?” he asked.

„Jak to udělala?“ zeptal se.„Jak to udělala?“ zeptal se.

apostropheapostrophe

’ no spacesthe boy’s motherthe boy’s mother

I didn’t hear.I didn’t hear.

- hyphen (1/3 em) without spaces

— dash (1 em) (used to separate parts of sentence)• with spaces in Czech• without in American English

RulesFrýdek-MístekFrýdek-Místek

air-conditionair-condition

bude-libude-li

Brno-městoBrno-město

společensko-politickýspolečensko-politickýfast-movingfast-moving

ex-wifeex-wife

dash (1/2 em) (used to separate parts of sentence)

• with spaces in Czech, in English He is He is – how shall I say it? how shall I say it?.He is He is – how shall I say it? how shall I say it?.

He is—how shall I say it?He is—how shall I say it?.He is—how shall I say it?He is—how shall I say it?.

Zapracoval — a výsledek se dostavil.Zapracoval — a výsledek se dostavil.

Zapracoval – a výsledek se dostavil.Zapracoval – a výsledek se dostavil.

česko-anglickýčesko-anglický

easy-goingeasy-going

dash (1/2 em) (used to express a range or as the equivalent of to or versus)

• without spaces

the years 1963–1967the years 1963–1967pages 23–28pages 23–28

the New York–Paris flightthe New York–Paris flight

the Lincoln–Douglas Debatesthe Lincoln–Douglas Debates

sixty-fivesixty-five

2 inches, 5 minutes2 inches, 5 minutes

Rules – Using Numbers Write out numbers through nine (or that require no more than one word).

There are twenty-six students in my wife’s third-grade class.There are twenty-six students in my wife’s third-grade class.

Byly dvě hodiny v noci a kohout třikrát zakokrhal.Byly dvě hodiny v noci a kohout třikrát zakokrhal.

Using numerals:

with unit of measure, time etc. in technical text a sentence cannot start with a figure

two playerseleven players11 players

two playerseleven players11 players

Rules – Using Numbers

12,451 12 45112,451 12 451

decimals

large numbers

12.451 12,45112.451 12,451

dates:

in Britain:

30 March 199530 March 1995

30th March (,) 199530th March (,) 1995

March 3, 1995March 3, 1995

30.3.199530.3.1995

30-3-199530-3-1995

in Czech:

in America:

30/3/199530/3/1995

3/30/19953/30/1995

30. 3. 199530. 3. 199530. března 199530. března 1995

Rules

Emphasizing words use italics use boldface only for terms avoid using underlined text

Usizing typefaces use serif typefaces for body text use sans serif typefaces for forms, tables don’t use more than four fonts in any one publication

Layout of the Page basic layout page map visual center of a page is higher than the geometrical one

right page is more expressive margins: top, bottom,

left, right or mirror: inside, outside footer – information, such as: chapter, date, page

number, listed below the main text area of a page

header – information, such as: title, chapter name, date, or page number, listed above the main text area of a page

page numbering – header, footer, outside margin

right page has always an odd number

Jobbing printed matters

occasional personal or firm printed mattersvisiting-card, letter paper and envelopes, wedding-carddiplomas, cards of invitation, greetings-card, programs, catalogs, advertising brochures

sizes needn´t to be standardized fonts can be decorative principles: information ability

readability aesthetic standard

Fonts Font a complete set of characters in a typeface

a file containing the description of the shape of letters

Some fonts are installed together with programs, or we can buy them separately.

Fonts can have different sets of characters (national alphabets, special sets of characters – e.g. Symbol)

bitmap fonts

• each character is stored as an array of pixels

• are not easily scalable

• for each size, face and resolution an extra description

• used e.g. as a system font for screen (menu)

vector (outline) fonts

• each character is encoded by a higher-level description in terms of lines and areas

• can be scaled to any size and otherwise transformed easy

• another information in the file: hinting (instructions for representing by raster output devices), kerning pairs

• wide-spread:

– True Type fonts (Microsoft+Apple, belong to OS)

– Adobe Type 1 (PostScript) fonts (Adobe Systems)