creating beautiful type (on the web)
DESCRIPTION
"Creating Beautiful Type (On the Web)". Delivered by Kyle Fiedler of ThoughtBot, on November 10th, 2010 at Lamont Library, Forum Room.TRANSCRIPT
Creating beautiful type (on the web)
Who here is a typographer?
Mind your P’s and Q’s
Use real quotes and hang ‘em too
“ ”Yes ‘ ’” “ ‘’
" "No ' '
The name Harvard comes from the college’s first benefactor, the young minister John Harvard of Charlestown. Upon his death in 1638, he left his library and half his estate to the institution established in 1636 by vote of the Great and General Court of the Massachusetts Bay Colony.
“
Well hung quotesblockquote {text-indent: -0.5em}
Use hyphens, em dashes & en dashes properly!
- –—
Hyphen (-)• Justification
• Prefix, Suffix (co, pre, mid, etc.)
• Spelling (H-A-R-V-A-R-D)
• Joining modifiers (two or more words that modify the
meaning of another)
• Compound names
em dash (—)• A pause in thought
• Indicate a sentence is unfinished
en dash (—)• Ranges of values (30–40)
• Relationships (mother–daughter)
• Compound adjectives (adjective– adjective)
• Used to emphasize connection
Please stop putting two spaces at the end of a sentence.
Use your ligaturestext-rendering: optimizeLegibility;
Remove all widowsjQwidont — widows b’gone
The name Harvard comes from the college’s first benefactor, the young minister John Harvard of Charlestown. Upon his death in 1638, he left his library and half his estate to the institution established in 1636 by vote of the Great and General Court of the Massachusetts Bay Colony.
Harvard University is made up of 11 principal academic units — ten faculties and the Radcliffe Institute for Advanced Study. The ten faculties oversee schools and divisions that offer courses and award academic degrees.
Use proper spacing
line-height
The name Harvard comes from the college’s first benefactor, the young minister John Harvard of
Charlestown. Upon his death in 1638, he left his library and half his estate to the institution
established in 1636 by vote of the Great and General Court of the Massachusetts Bay Colony.
The name Harvard comes from the college’s first benefactor, the young minister John Harvard of
Charlestown. Upon his death in 1638, he left his library and half his estate to the institution
established in 1636 by vote of the Great and General Court of the Massachusetts Bay Colony.
The name Harvard comes from the college’s first benefactor, the young minister John Harvard of Charlestown. Upon his death in 1638, he left his library and half his estate to the institution established in 1636 by vote of the Great and General Court of the Massachusetts Bay Colony.
Yes
No
No
letter-spacing
The name Harvard comes from the college’s first benefactor.
The name Harvard comes from the college’s first benefactor.
The name Harvard comes from the college’s first benefactor.Yes
No
No
Create rhythm
Baseline grid & font-size
Traditional sizes:
10px, 12px, 14px, 16px, 18px, 20px, 22px, 24px, 28px,
30px, 32px, 36px, 44px, 48px, 60px, 72px
alistapart.com/articles/settingtypeontheweb/
Create hierarchy and emphasis
HierarchyVary size, color, weight, and space
Emphasis
The name Harvard comes from the college’s first benefactor, the young minister John Harvard of Charlestown. Upon his death in 1638, he left his library and half his estate to the institution established in 1636 by vote of the Great and General Court of the Massachusetts Bay Colony.
The name Harvard comes from the college’s first benefactor, the young minister John Harvard of Charlestown. Upon his death in 1638, he left his library and half his estate to the institution established in 1636 by vote of the Great and General Court of the Massachusetts Bay Colony.
Yes
No
[
The web font revolution
@font-face is supported in 95.6% of current desktop browsers.
More choice, style & character
This is not a free pass.
The web font revolution[Font delivery
Use Font Squirrels @font-face generator
@font-face { font-family: 'PTSans'; src: url('/fonts/PTS55F-webfont.eot'); src: local('☺'), url('/fonts/PTS55F-webfont.woff') format('woff'), url('/fonts/PTS55F-webfont.ttf') format('truetype'), url('/fonts/PTS55F-webfont.svg#webfontmBFaK3EM') format('svg'); font-weight: normal; font-style: normal;}
You still need a good font stack
Be mindful of file size & FoUT
Font rendering can be a pain
Font delivery as a service
The web font revolution[Making the right choice
Web safe fonts are still the workhorses
Balance style and legibility
Making a great pair
Sans-serif + Serif
Avoid similar styles/classifications
Match personalities
What to look for in a screen typeface
High x-height
Large counters
Read the about and see what other designers have done
Finding a typeface with the right license
Problems with free
Variety of quality
Unknown rendering
Poorly drawn
Poorly kerned
Test your type:
Read, re-read, and have someone else read
The web font revolution[ Well, it’s been fun
thoughtbot.com
atedrake.com
Inspiration:
dribbble.comffffound.comsiteinspire.com, cssmaina.com & other css galleries
Resources:
ilovetypography.comtypedia.comwebfonts.infonicewebtype.comreadableweb.comElements of Typographic Style–Robert Bringhurst
Typeface used in presentation:
Meta by Erik Spiekermann
Websites used in presentation:
wilsonminer.comblackestate.co.nzblakeallendesign.comsxswdesign.comoldguard.co.uk
