typography101 092012
DESCRIPTION
Slides accompanying presentation on typography, Sept. 20, 2012.TRANSCRIPT
Typography 101
101Ty!ograph"
HISTORYreally, really condensed.
image: http://commons.wikimedia.org/wiki/File:Metal_movable_type.jpg
movable type
‘‘Gutenberg's achievement created
a new and wonderful earthbut at the same time also a new hell.‘‘
—Mark Twain
source: http://www.twainquotes.com/Gutenberg.html
image: http://en.wikipedia.org/wiki/Claude_Garamond
GaramondCLAUDE
1490-1561
image: http://en.wikipedia.org/wiki/William_Caslon
CASLONWilliam
1692-1766
image: http://en.wikipedia.org/wiki/John_Baskerville
BaskervilleJOHN
1706-1775
image: http://en.wikipedia.org/wiki/Giambattista_Bodoni
BODONIGiambattista
1740-1813
image: http://www.ericgill.org.uk/
Eric GILL1882-1947
SETTING TYPEthe {relatively} modern processes
UPHILL BOTH WAYSback when I walked to work
barefoot in the snow
1. Get copy approved
2. Spec text
3. Send out to typesetting house
4. Wait a day or two for type to come back
5. Return to step two because you did it wrong
image: http://alexanderwwhite.files.wordpress.com/2011/06/1-2-3copyfitting72dpi.jpg
MATH
image: http://www.marksimonson.com/article/232..
really{ {
image: http://ffanzeen.blogspot.com/2009/03/trading-travel-agent.html
<LL><PS>
Like writing HTML
but not getting to see
what it looks like
until tomorrow
images: http://commfaculty.fullerton.edu/woverbeck/dtr5.htm
Wax machines
Paste-up production
image: http://en.wikipedia.org/wiki/File:Se30.jpg
Hello.
image: http://en.wikipedia.org/wiki/File:Se30.jpg
$6500
image: http://www.makingpages.org/pagemaker/history/
image: http://en.wikipedia.org/wiki/File:Original_Mac_fonts.png
image: http://www.youtube.com/watch?v=8Vj37x2jScU&trackingid=JSDWE
image: http://www.fontlab.com/font-editor/fontlab-studio/fontlab-studio-tutorials/
LETTERFORMS
Type is funbaseline
Type is fun x-height
Type is funcap height
Type is funascender height
Type is fundescender height
Tall x-heights can make type friendlier and easier to read…
PT Sans
…even when your fonts have feet.Fonts with feet are called serif.
Georgia
Fonts without feet are called sans serif.
Helvetica
Fonts with a smaller x-heightcould be considered more formal.
Bernhard Modern
Contrast adds interest.A serif font for headlines along with a sans serif font for body copy is a successful combination. The reverse is also effective. When choosing your serif and your sans serif faces, keep the x-height of each font in mind. Do they complement each other?
Similarity looks like a mistake.
Are these two font combinations as effective as the
previous screen? Probably not. The two serif fonts have
different characteristics and drastically different x-heights
and ascender heights. The two faces conflict with, rather
than complement, each other.
leading
image: http://commons.wikimedia.org/wiki/File:Metal_movable_type.jpg
leading
Letterpair kerning
the truck I could drive through those unkerned letterpairs
TYPE TRICKSYou gotta know the rules
before you can break them.
But you might not want to.
the vertically centered optical illusion
is is centered on the page.
But it looks top-heavy.
Balance placement to adjustfor the optical illusion.
hanging punctuation
—Charles Mingus
source: http://www.pickthebrain.com/blog/10-quotes-to-inspire-creativity/
—Charles Mingus
source: http://www.pickthebrain.com/blog/10-quotes-to-inspire-creativity/
—Charles Mingus
source: http://www.pickthebrain.com/blog/10-quotes-to-inspire-creativity/
—Charles Mingus
source: http://www.pickthebrain.com/blog/10-quotes-to-inspire-creativity/
line length
Too long – if a line of text is too long the visitor’s eye will have a hard time focusing on the text. This is because the length makes it difficult to get an idea of where the line starts and ends. Furthermore it can be difficult to continue from the correct line in large blocks of text.
source: http://baymard.com/blog/line-length-readability
Approx. 110 characters per line
Approx. 30 characters per line
Too short – if a line is too short the eye will have to travel back too often, breaking the reader’s rhythm. Too short lines also tend to stress people, making them begin on the next line before finishing the current one (hence skipping potentially important words).
source: http://baymard.com/blog/line-length-readability
TOO LONGIf a line of text is too long the visitor’s eye will have a hard time focusing on the text. This is because the length makes it difficult to get an idea of where the line starts and ends. Furthermore it can be difficult to continue from the correct line in large blocks of text.
TOO SHORTIf a line is too short the eye will have to travel back too often, breaking the reader’s rhythm. Too short lines also tend to stress people, making them begin on the next line before finishing the current one (hence skipping potentially important words).
source: http://baymard.com/blog/line-length-readability
Just right. Approx. 60 characters per line
Just right. Approx. 60 characters per line
small caps
Whoa. These caps are far heavier than the other characters.
The trick:Define BOLD for your primary text, and ROMAN for your small caps.
uppercase vs. lowercase
letterspacing
Tr a c k i n g o u t l o w e r c a s e t y p e i s u s u a l l y n o t a g o o d i d e a .
When you want users to read yourbody copy, let them see shapes.
THESE CAPS AREN’T TRACKED OUT.
THESE CAPS HAVE SOME EXTRA TRACKING.
unlike lowercase text,UPPERCASE TEXT READABILITY IMPROVES
when tracking is increased.
PAGE LAYOUT
and in conclusion…
e
Thank you.
V I S U A L + D E S I G N + S T R A T E G I S T
— M A D E W I T H K E Y N O T E O N A M A C —
View����������� ������������������ my����������� ������������������ portfolio����������� ������������������ and����������� ������������������ resume����������� ������������������ at����������� ������������������ www.valarie.infoor����������� ������������������ email����������� ������������������ [email protected]