Basic typography
Sonnoli
Text
• Legibility
– Most of the time test is there to read – Size, font, colour contrast against background Pl f l i t ti
• Playful interaction
– text as image, illustration, inspiration, decoration
Keep your e y e s open!
• Text is important on the web
• Start noticing typography.
• Look at logos on everyday household items, bus signs, cereal boxes . . . everywhere, especially in ads.
• Look at use of type in print and on the Web.
Identify these logos Typography Defined
“The art of using the shape of text characters and their arrangements as a graphic art form.”
“ h i f i ll i d ”
“The practice of visually representing words.”
Typography can offer solutions where some
graphics cannot.
Terms to know
• Typeface (teckensnitt, typsnitt): A style of lettering, such as Helvetica, Futura, Comic Sans, Bodoni, Times, Papyrus, Apple Chancery, Sand, Lucida Handwriting
• Type family (teckensnittsfamilj, typsnittsfamilj, puh): A group of similar typefaces, such as Franklin Gothic, Franklin Gothic Bold, Franklin Gothic Condensed
• Font: A complete set of characters (A‐Z, plus numbers, symbols) of one specific size, style and weight of a typeface
Familjer
Typsnitt kan delas upp i sju huvudgrupper:
• Antikvor, till exempel Baskerville, Garamond och Times
M di l T tik N tik
– Mediaval, Transantikva, Nyantikva
• Mekaner till exempel Rockwell och Courir
•Grotesker till exempel Arial, Futura,Helvetica och Gill Sans
•Skripter (skrivstilar)
Anatomy of typeface Letter characteristics
Bracketed serif Hairline
(thinnest stroke)
Xheight and proportion Cupped serif
(2 points touch)
Slab serif Terminal
i
Titter
Bokstaven HtiQfoe ‐ Palatino
HtiQfoe – Times new
HtiQfoe - Bodoni
AAAA t t t t o o o o
HHHH s s s s x x x x g g g g
e e e e
Palatino, Times new roman, Bodoni, Arial (all in size 72)
m m m m p p p p
Garamond
• Oldstyle (1400+ ) Antikva / Mediaeval / Medievalantikva / Humanistantikva, Diagonalantikva / Renässansantikva.
•Transitional (or Modern?) (1775, Times new roman 1932)
• Subtle thick and thin organic contrast in weight of stem and hairline.
• Finely bracketed serifs, sharper and more defined than in oldstyle.
Times new roman
Confusion - Times (Windows ©)
• Xheight larger than oldstyle
• The thinnest parts of letters are at an angle rather than at the top and bottom (compared to oldstyle)
Palatino
• Oldstyle / Antikva / Transantikva / Real (Garamond, Times…)
• Subtle thick and thin organic contrast in weight of stem and hairline.
• Finely bracketed serifs Finely bracketed serifs.
• Capitals lower than lowercase ascenders.
• Diagonal stress (the thinnest parts of letters are at an angle rather than at the top and bottom)
Bodoni
• Modern /Nyantikva (1813, Didon)
• Extreme contrast in weight of stem and hairline.
• No bracket on serifs No bracket on serifs
• Horisontal stress
• Axis completely upright
Arial
•Sans-serif / Grotesk / Linjär
•No serifs, little stress because weights of stem and hairline optically appear even.
• Large body height in proportion to capital height.
• Often squared-off terminal.
Comparison of some sans serif fonts
Arial bold and Arial Black
Arial and Impact p
Arial and Trebuchet Arial and Comic Sans
Courier
• Slab serif (Egyptian) / Mekan / Egyptienne
• Sans serif + slabs (horisontal serifs with same weight as stem)
• Wide body Wide body
Spacing
• The three types of spacing to control – Letter spacing
• The space between letters – Word spacing Word spacing
• The space between words – Line spacing (leading)
• The distance between lines of type
Times New Roman, 10 point, with 1pt leading and with 3pt leading
Horizontal Spacing
• Proportional Spacing: each character is allotted width proportional to it’s natural geometry
geometry – Most fonts
• Monospacing: each character is allotted
Courier New and Times New Roman
Courier New is a monospaced font: the comma gets
A bit of C++ code in Courier In Times New Roman the same thing seems strange—to a programmer
Guidelines: Body Type on the Web
• Use Georgia or Verdana
• Use 10 point or 12 point type
• Avoid bold or italic in body type, except for a few
d f h i
words for emphasis
• Use upper case only for the first word of sentences, proper names, etc.
• Use left alignment
• Use dark text on a light background
• Never use underlining for emphasis
Times New Roman & its screen‐friendly cousin Georgia—in same font size
Microsoft commissioned the design of Georgia to be a screen‐friendly font similar to Times New Roman.
Times Roman letters have oblique stress; Georgia has vertical stress
The pixel view: how Georgia gets
vertical stress (the letters are bigger)
Times New Roman and Georgia Arial and its screen‐friendly cousin Verdana—in same font size
What are the discernible differences?
(open/closed, descenders, distances between and within)
Guess that Font
• wascily wabbit
il bbit
• Comic sans
C i
• Serif
• wascily wabbit
• wascily wabbit
• wascily wabbit
• Courier
• Arial
• Times
• Sans Serif
• Decorative
Guess that Font
• wascily wabbit
• wascily wabbit
• wascily wabbit
• Serif – Old Style – Modern
T i i l
y
• wascily wabbit
• wascily wabbit
• wascily wabbit
• wascily wabbit
• wascily wabbit
– Transitional – Slab Serif – Script
• Sans Serif
• Decorative
Choosing Fonts
• The Cardinal Rule:
– Don’t mix two fonts of the same type (two serif fonts same type—(two serif fonts together, or two sans‐serif fonts together)
Choosing Fonts
• The Cardinal Rule:
–Don’t mix two fonts of the same type
same type
–Doing so almost
guarantees conflict.
Headings on the Web
• Big is beautiful
• Use any typeface that is legible
• Use the HTML line‐height attribute for control of g line spacing
• Use HTML letter spacing and word spacing to get effects you want
Choosing Fonts (a matter of taste)
Generally serif fonts are more decorative
San-serif or mild old style fonts work better for large blocks of text. San-serif or mild old style fonts work better for large blocks of text. San-serif or mild old style fonts work better for large blocks of text. San-serif or mild old style fonts work better for large blocks of text.
San-serif or mild old style fonts work better for large blocks of text. San-serif or mild old style fonts work better for large blocks of text
Mixing them can create strong visual contrast (contrast is good)
The Principles of Design Applied to Type: creating Unity
– Choose typefaces that complement each other.
– Use contrasting styles, faces, and weights, rather than using similar faces.
– Typefaces with pronounced or exaggerated design
h t i ti ld i ll
characteristics seldom mix well.
– Avoid mixing two or more sans serif typefaces in a design.
– Establish harmonious size relationships.
– Determine how the size and choice of typefaces will work with the visuals.
– Establish correspondence and alignment.
The perfect paragraph?
Before considering the question that is seemingly always the most immediate one and the only urgent one, What shall we do? we ponder this: How must we think? For thinking is genuine activity, genuine taking a hand, if to take a hand means to lend a hand to. The coming to presence of Being.” We do not say: Being is, time is, but rather: there is Being and there is time. Why are there beings at all, instead of Nothing?
Before considering the question that is seemingly always the
Before considering the question that is seemingly always the most immediate one and the only urgent one, What shall we do? we ponder this: How must we think? For thinking is genuine activity, genuine taking a hand, if to take a hand means to lend a hand to. The coming to presence of Being.”
We do not say: Being is, time is, but rather: there is Being and there is time. Why are there beings at all, instead of Nothing?
g y y
most immediate one and the only urgent one, What shall we do? we ponder this: How must we think? For thinking is genuine activity, genuine taking a hand, if to take a hand means to lend a hand to. The coming to presence of Being.” We do not say: Being is, time is, but rather:
there is Being and there is time.
Why are there beings at all, instead of Nothing?
Whitespace and hard
return return
Ragged edge or not?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et felis ut nisi rutrum vehicula. Suspendisse sed tortor diam. Nullam rhoncus nibh non nunc posuere vestibulum. Pellentesque congue lectus et nibh bibendum mattis. Nullam eget nulla sapien, vitae placerat quam. Phasellus scelerisque, dui nec ultricies sagittis, est erat faucibus dolor, sit amet semper risus erat in urna. Donec vitae tellus metus. Nam viverra, leo non pretium congue, sem risus eleifend urna, ut commodo leo lectus sed magna.
Pellentesque porta odio id neque rhoncus vestibulum. Maecenas volutpat tincidunt dapibus. Nunc lobortis luctus ante, et rhoncus orci egestas ut.
Vestibulum vel urna a nisl eleifend placerat eu eu odio. Vivamus sem felis, iaculis tempus porta sit amet, dignissim nec turpis. Integer placerat porta magna eu lacinia. Praesent laoreet nibh eu lacus convallis et sollicitudin odio fringilla. Suspendisse potenti. In pulvinar imperdiet mi eu hendrerit. Curabitur sit amet odio lorem. Sed consectetur enim non augue ultrices luctus. Quisque euismod, risus vel lobortis accumsan, lacus nibh mattis erat, sit amet dignissim ipsum tortor a diam. Ut egestas enim at mauris euismod a rhoncus augue porttitor. Nulla facilisi. Suspendisse ipsum ipsum, eleifend eget molestie sed, lobortis et quam.
Nunc a neque id sapien congue pellentesque. Vestibulum ante ipsum primis in faucibus Nunc a neque id sapien congue pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer volutpat faucibus metus dictum varius. In id metus congue dolor pretium venenatis. Sed at ligula quis mi aliquet congue nec eu dui. Suspendisse potenti. Donec vel varius tortor. Donec ac sapien et eros ullamcorper elementum quis ut sem. In blandit diam justo. Vivamus faucibus sem id ante laoreet tincidunt. Quisque nec turpis turpis, et pharetra arcu. Fusce eget libero velit.
Praesent sit amet est vel dui porta auctor sed sit amet odio. Ut tincidunt sapien sit amet leo viverra id cursus neque feugiat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et felis ut nisi rutrum vehicula. Suspendisse sed tortor diam. Nullam rhoncus nibh non nunc posuere vestibulum. Pellentesque congue lectus et nibh bibendum mattis. Nullam eget nulla sapien, vitae placerat quam. Phasellus scelerisque, dui nec ultricies sagittis, est erat faucibus dolor, sit amet semper risus erat in urna. Donec vitae tellus metus. Nam viverra, leo non pretium congue, sem risus eleifend urna, ut commodo leo lectus sed magna.
Pellentesque porta odio id neque rhoncus vestibulum. Maecenas volutpat tincidunt dapibus. Nunc lobortis luctus ante, et rhoncus orci egestas ut.
Ragged edge or not?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et felis ut nisi rutrum vehicula. Suspendisse sed tortor diam. Nullam rhoncus nibh non nunc posuere vestibulum. Pellentesque congue lectus et nibh bibendum mattis. Nullam eget nulla sapien, vitae placerat quam. Phasellus scelerisque, dui nec ultricies sagittis, est erat faucibus dolor, sit amet semper risus erat in urna. Donec vitae tellus metus. Nam viverra, leo non pretium congue, sem risus eleifend urna, ut commodo leo lectus sed magna.
Pellentesque porta odio id neque rhoncus vestibulum. Maecenas volutpat tincidunt dapibus. Nunc lobortis luctus ante, et rhoncus orci egestas ut.
Vestibulum vel urna a nisl eleifend placerat eu eu odio. Vivamus sem felis, iaculis tempus porta sit amet, dignissim nec turpis. Integer placerat porta magna eu lacinia. Praesent laoreet nibh eu lacus convallis et sollicitudin odio fringilla. Suspendisse potenti. In pulvinar imperdiet mi eu hendrerit. Curabitur sit amet odio lorem. Sed consectetur enim non augue ultrices luctus. Quisque euismod, risus vel lobortis accumsan, lacus nibh mattis erat, sit amet dignissim ipsum tortor a diam. Ut egestas enim at mauris euismod a rhoncus augue porttitor. Nulla facilisi. Suspendisse ipsum ipsum, eleifend eget molestie sed, lobortis et quam.
Nunc a neque id sapien congue pellentesque. Vestibulum ante ipsum primis in faucibus Nunc a neque id sapien congue pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer volutpat faucibus metus dictum varius. In id metus congue dolor pretium venenatis. Sed at ligula quis mi aliquet congue nec eu dui. Suspendisse potenti. Donec vel varius tortor. Donec ac sapien et eros ullamcorper elementum quis ut sem. In blandit diam justo. Vivamus faucibus sem id ante laoreet tincidunt. Quisque nec turpis turpis, et pharetra arcu. Fusce eget libero velit.
Praesent sit amet est vel dui porta auctor sed sit amet odio. Ut tincidunt sapien sit amet leo viverra id cursus neque feugiat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et felis ut nisi rutrum vehicula. Suspendisse sed tortor diam. Nullam rhoncus nibh non nunc posuere vestibulum. Pellentesque congue lectus et nibh bibendum mattis. Nullam eget nulla sapien, vitae placerat quam. Phasellus scelerisque, dui nec ultricies sagittis, est erat faucibus dolor, sit amet semper risus erat in urna. Donec vitae tellus metus. Nam viverra, leo non pretium congue, sem risus eleifend urna, ut commodo leo lectus sed magna.
Pellentesque porta odio id neque rhoncus vestibulum. Maecenas volutpat tincidunt dapibus. Nunc lobortis luctus ante, et rhoncus orci egestas ut.
