typography 101 chia sẽ kinh nghiệm thiết kế miễn phí

typography101 chia sẽ kinh nghiệm thiết kế miễn phí typography101 chia sẽ kinh nghiệm thiết kế miễn phí typography101 chia sẽ kinh nghiệm thiết kế miễn phí typography101 chia sẽ kinh nghiệm thiết kế miễn phí typography101 chia sẽ kinh nghiệm thiết kế miễn phí typography101 chia sẽ kinh nghiệm thiết kế miễn phí typography101 chia sẽ kinh nghiệm thiết kế miễn phí typography101 chia sẽ kinh nghiệm thiết kế miễn phí

Trang 1

A CRASH COURSE HELMETS NOT INCLUDED.

Trang 2

Stop Stealing Sheep

AND FIND OUT HOW TYPE WORKS.

Trang 3

A w a r d s C e r t i f i c a t e

“In 1936, Frederick Goudy was in New York City

to receive an award for excellence in type design

Upon accepting the certificate, he took one look

at it and declared ‘Anyone who would letterspace black-letter would steal sheep.’”

Erik Spiekermann

Stop Stealing Sheep & Find out How Type Works

Trang 4

Handwritten Black Letter Type

Latin Bible of AD 1407

So Stop Stealing Sheep

The term “to steal sheep” references a person who would rather steal livestock than work hard rearing it themselves Goudy

compares this to his particular situation in order say that the person who scripted his award took the easy way out, rather than scripting closely-laid blackletter forms (below).

Trang 5

IT’S PRACTICALLY ITS OWN LANGUAGE.

Trang 6

A Little Context

Most typefaces are based off of the written word Manuscripts were written with pens or quills that generated thick and thin strokes within letterforms These influences are made clear in

traditional serif and some sans-serif typefaces.

Trang 7

Typeface vs Font

Avenir 35-Light, 34pt ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz

! @ # $ % & ?

Baskerville Italic, 34pt ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz

! @ # $ % & ?

A typeface is the whole package.

Literally referring to the look or “face” of the type.

ie: Baskerville, Avenir, Garamond

A font is a piece of the greater whole.

ie: Baskerville Italic, 34pt, Avenir 35-Light 34pt

Trang 9

X-HEIGHT

CAP HEIGHT

Anatomy of a Font

The cap height is the height of the capital letters.

The x-height is the height of the lower-case x.

The baseline is where the type sits.

Trang 10

Anatomy of a Font

Some letterforms extend below the baseline to give the

illusion of being aligned If curves sat right on the baseline,

they would appear to sit above it This is called an overshoot.

Trang 11

Anatomy of a Font

The lines that make up letterforms are called strokes.

The width of those strokes is called the stroke-width.

STROKE WIDTH

Trang 12

SERIF STEM

Anatomy of a Font

The Stem is a vertical stroke in a letterform.

Serifs are the stroke-like protrusions on the

ends of letterforms

Trang 13

DESCENDER

Anatomy of a Font

Descenders extend below the baseline.

Ascenders extend above the x-height and

sometimes above the cap height.

Trang 14

COUNTER BOWL COUNTER

Anatomy of a Font

Counters are the open spaces within most letterforms.

Bowls are the containing strokes around counters.

Trang 15

CROSSBAR

Anatomy of a Font

A Bar extends from a letterform without being attached on both ends.

A Crossbar touches a stem on each end.

Trang 16

ff fi fl ffi ffl fj

ff fi fl ﬃ ﬄ �

Ligature

Ligatures represent the connecting of two or more letterforms for

the sake of legibility and to reduce un-designed overlapping Some

ligatures are purely for aesthetic purposes.

ﬆ �

NON-LIGATURED

LIGATURES

AESTHETIC LIGATATURES

Trang 17

Sampling of ligatures from the

Trang 18

Classifying Type

MORE THAN JUST A SERIF.

Trang 19

Serif & Sans-Serif

Serif fonts have the stroke-like extensions attached to the ends of the letterforms (left)

Sans-serif fonts do not (right)

Trang 20

Serif Faces

The three traditional categories of serif faces

are Oldstyle, Transitional, and Modern

Oldstyle

Adobe Garamond Pro Regular

Less stroke-width variation, rounded serifs,

calligraphic qualities, “ink-bleed.”

Trang 21

Slab Serif Faces

There are two major classifications of Slab Serifs:

Clarendon and Neo-Grotesk

Clarendon Slab Serif

Clarendon Regular

Very little stroke-width variation, serifs are nearly

as large as strokes, smooth serif transitions.

Neo-Grotesk Slab Serif

ITC Lubalin Graph Demi

Little-to-no stroke-width variation, serifs are as large as strokes, sharp angular serif transitions.

Trang 22

Glyphic Serif

Glyphic Serif faces emulate carved inscriptions

rather than pen-strokes.

Friz Quadrata Medium

Designed by Ernst Friz in 1978 Albertus MT Regular

Designed by Berthold Wolpe, 1930s

Trang 23

Sans Serif Faces

The three traditional categories of sans serif

faces are Grotesque, Geometric, and Humanist

Grotesque

Berthold Akzidenz Grotesk Book

Strokes modulate (change width) around curves

They are not the same width all the way around.

Trang 24

Most typefaces can’t be defined by either serif or sans-serif

Some may be Script, Symbol, or Ornamental There are also experimental typefaces and ones that can’t be categorized at all

Ag

Pinnocio Normal

Unknown Ornamental

Ag

Rosewood

Carol Twombly, 1994 Ornamental

Ag

Cutouts

Gail Blumberg, 1990 Ornamental

Ag

Dead History

P Scott Makela, 1990 Experimental

Ag

Webdings

Multiple Designers, 1997 Symbol



Trang 25

Setting Type

BE GLAD YOU HAVE A COMPUTER

Trang 27

Leading is the space between lines of type.

The rag is the jagged edge at the side of a paragraph.

A widow is when you have 12 characters or less at the end of a column.

An orphan is when you have 12 characters or less at the beginning of a column.

Lorem ipsum dolor sit amet, consectetur adipiscing elit Fusce at laoreet leo Suspendisse potenti In sit amet rutrum odio Sed suscipit dui sit amet posuere cursus Integer ornare quam quis ligula porttitor, sed lacinia est mattis

Mauris semper mi quam Phasellus fringilla urna sit amet elit auctor maximus ac id justo Quisque

ex purus, rhoncus eget fermentum eu, varius eget enim Integer rhoncus magna et metus vehia

Aliquam mattis ac diam in volutpat Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus a tellus

at est viverra condimentum a et enim Curabitur ante orci, pretium vel lobortis ut, ultricies vel velit Fusce semper dignissim scelerisque Cras mauris vivamus tellus

Curabitur ut accumsan purus, vitae interdum orci Quisque vitae fringilla velit Maecenas sed dolor vel dui vulputate imperdiet euismod fusce

laorect

LEADING

WIDOW

Trang 28

Tracking is the measure of the overall spacing between letters Kerning is the measure of the spacing between individual letters

KERNING TRACKING

Trang 29

Good vs Bad Kerning

GOOD BAD WORSE

Letterforms have the appearance

of being evenly spaced

Letterforms have a measured and even distance between them (monospaced)

This leaves them poorly spaced visually

Letterforms do not have even visual spacing and are touching

Type Type Type

Trang 30

Typography

Ty p o g r a p h y

Tracking can be modified to extremes These extremes

are referred on a scale of loose to tight.

TIGHT

NORMAL

LOOSE

TYPOGRAPHY TYPOGRAPHY

T Y P O G R A P H Y

Trang 31

TYPOGRAPHY TYPOGRAPHY

T Y P O G R A P H Y

Different letterforms, fonts, and typefaces respond

to tracking in different ways.

TIGHT

NORMAL

LOOSE

Typography Typography

Ty p o g r a p h y

Trang 32

Line Spacing

Leading can also be modified to the loose and tight extremes.

Typesetting is expressed in font size/leading size (14pt/18pt)

Lorem ipsum dolor sit amet, consectetur adipiscing

elit Fusce at laoreet leo Suspendisse potent Indina

sit amet rutrum odio Sed suscipit dui sit amet pon

cursus Integer ornare quam quis ligula porttitor,

sed lacinia est mattis Mauris semper mi quam Ad

phasellus fringilla urna sit amet elit auctor mus ac

id justo Quisque ex purus, rhoncus eget fermentum

eu, varius eget enim Integer rhoncus magna metus

Aliquam mattis ac diam in volutpat Vestibul abra

ipsum primis in faucibus orci luctus et ultrices cando

posuere quisque

Lorem ipsum dolor sit amet, consectetur adipiscing elit Fusce at laoreet leo Suspendisse potent Indina sit amet rutrum odio Sed suscipit dui sit amet pon cursus Integer ornare quam quis ligula porttitor, sed lacinia est mattis Mauris semper mi quam Ad phasellus fringilla urna sit amet elit auctor mus ac

Aliquam mattis ac diam in volutpat Vestibul abra ipsum primis in faucibus orci luctus et ultrices cando posuere quisque

Lorem ipsum dolor sit amet, consectetur adipiscing elit Fusce at laoreet leo Suspendisse potent Indina sit amet rutrum odio Sed suscipit dui sit amet pon cursus Integer ornare quam quis ligula porttitor, sed lacinia est mattis Mauris semper mi quam Ad phasellus fringilla urna sit amet elit auctor mus ac

eu, varius eget enim Integer rhoncus magna metus Aliquam mattis ac diam in volutpat Vestibul abra ipsum primis in faucibus orci luctus et ultrices cando posuere quisque

TIGHT (14/14) NORMAL (14/18) LOOSE (14/30)

Trang 33

YOURSELF

Trang 34

Line Spacing

With lower case letters, it’s important to pay attention to your ascenders and descenders This particular example works with negative leading, but others may have crashed together.

NORMAL (72/72) LOOSE (72/90)

TIGHT (72/55)

Express Yourself

Hyper Soft

Express Yourself

Hyper Soft

Express

Yourself

Hyper

Soft

Trang 35

Left or right-aligned type should have a “saw-tooth” rag

Meaning, an even and regular pattern of protrusions.

GOOD

Lorem ipsum dolor sit amet, consectetur adipiscing elit Fusce at laoreet leo Suspendisse potent

ametiam rutrum odio Sed suscipit dui sit amet ponsc cursus Integer ornare quam quis ligula portti, sed lacinia est mattis Mauris semper mi quam phasellus fringilla urna sit amet elit auctor mus ac id justo Quisque ex purus, rhoncus eget fer eu, varius eget enim Integer rhoncus magna metus Aliquam mattis ac diam in volutpat Vestibul abra ipsum primis in faucibus orci luctus et ultrices candoposuere quisque

posuere quisque

Lorem ipsum dolor sit amet, consectetur adipiscing elit Fusce

a reet leo Suspendisse potent ametiam rutrum odio Edsuscipitdui sitamet ponsccursus

Integer ornar am quis ligula portti, ed lacinia est mattis Mauri semper mi quam phasellus fringilla urna sit amet auctor mus ac id justo Quisque

ex purus, rhoncu fer eu, varius eget enim Integer rhoncus magn metus

Aliquam mattis ac diam

in volutpat Vestib bra ipsum primis in faucibus orci luctus et ultrices candoposuere quisque Mauri semper mi quam phasellus fringilla urna sit amet auctor mus

ac idjusto Quisqueex purus, rhon fer eu, variusegeteni Integer rhoncus magn metus Aliquam maisac diam

in volutpat Vestib bra ipsum primis in faucibus orci luctus et ultrices candoposuere quisque

Lorem ipsum dolor sit amet, consectetur adipiscing elit Fusce at laoreet leo Suspendisse potent ametiam rutrum odio Sed suscipit dui sit amet ponsc cursus

Integer ornare quam quis ligula portti, sed lacinia est mattis Mauris semper mi quam phasellus fringilla urna sit amet elit auctor mus ac id justo Quisque ex purus, rhoncus eget fer eu, varius eget enim Integer rhoncus magna metus Aliquam mattis ac diam in volutpat Vestibul abra ipsum primis in faucibus orci luctus et ultrices candoposuere quisque

Trang 36

Left or right-aligned type should have a “saw-tooth” rag

Meaning, an even and regular pattern of protrusions.

Justified type should look evenly spaced within the text block Watch out for ponds and rivers.

Lorem ipsum dolor sit amet, consectetur adipiscing elit Fusce at laoreet leo Suspendisse potent

ametiam rutrum odio Sed suscipit dui sit amet ponsc cursus Integer ornare quam quis ligula portti, sed lacinia est mattis Mauris semper mi quam phasellus fringilla urna sit amet elit auctor mus ac id justo Quisque ex purus, rhoncus eget fer eu, varius eget enim Integer rhoncus magna metus Aliquam mattis ac diam in volutpat Vestibul abra ipsum primis in faucibus orci luctus et ultrices candoposuere quisque

posuere quisque

Lorem ipsum dolor sit amet, consectetur adipiscing elit Fusce

a reet leo Suspendisse potent ametiam rutrum odio Edsuscipitdui sitamet ponsccursus

Integer ornar am quis ligula portti, ed lacinia est mattis Mauri semper mi quam phasellus fringilla urna sit amet auctor mus ac id justo Quisque

ex purus, rhoncu fer eu, varius eget enim Integer rhoncus magn metus

Aliquam mattis ac diam

in volutpat Vestib bra ipsum primis in faucibus orci luctus et ultrices candoposuere quisque Mauri semper mi quam phasellus fringilla urna sit amet auctor mus

ac idjusto Quisqueex purus, rhon fer eu, variusegeteni Integer rhoncus magn metus Aliquam maisac diam

in volutpat Vestib bra ipsum primis in faucibus orci luctus et ultrices candoposuere quisque

Lorem ipsum dolor sit amet, consectetur adipiscing elit Fusce at laoreet leo Suspendisse potent ametiam rutrum odio Sed suscipit dui sit amet ponsc cursus

Integer ornare quam quis ligula portti, sed lacinia est mattis Mauris semper mi quam phasellus fringilla urna sit amet elit auctor mus ac id justo Quisque ex purus, rhoncus eget fer eu, varius eget enim Integer rhoncus magna metus Aliquam mattis ac diam in volutpat Vestibul abra ipsum primis in faucibus orci luctus et ultrices candoposuere quisque

POND RIVER

Trang 37

Ragging also has an influence on tone and voice In large

headlines, line breaks can be used as pauses.

And as always, avoid widows!

CALL ME CRAZY

BUT I’M A TYPOPHILE

Trang 38

“ There is no bad type ”

“Apart from the typefaces that work well because we are familiar with them, there are those that defy the simplistic classifications

of usefulness or purpose They may exist only because the type designer’s first thought one morning was a new letter shape These private artistic expressions may not appeal to a wide audience, but every now and again the right singer effortlessly transforms a simple song into a great hit In the right hands, technical constraints turn into celebrations of simplicity and awkward alphabets are typographic heroes for the day.”

Erik Spiekermann

Stop Stealing Sheep & Find out How Type Works

Trang 39

Thank You

& John Adie

Bē.net/jadie

digitalsurgeons.com

Tiêu đề	Typography 101 Chia Sẻ Kinh Nghiệm Thiết Kế Miễn Phí
Thể loại	Essay

Định dạng
Số trang	39
Dung lượng	3,3 MB