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
![Page 1: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/1.jpg)
Creating beautiful type (on the web)
![Page 2: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/2.jpg)
Who here is a typographer?
![Page 3: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/3.jpg)
Mind your P’s and Q’s
![Page 4: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/4.jpg)
Use real quotes and hang ‘em too
![Page 5: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/5.jpg)
“ ”Yes ‘ ’” “ ‘’
" "No ' '
![Page 6: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/6.jpg)
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}
![Page 7: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/7.jpg)
Use hyphens, em dashes & en dashes properly!
- –—
![Page 8: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/8.jpg)
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
![Page 9: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/9.jpg)
em dash (—)• A pause in thought
• Indicate a sentence is unfinished
![Page 10: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/10.jpg)
en dash (—)• Ranges of values (30–40)
• Relationships (mother–daughter)
• Compound adjectives (adjective– adjective)
• Used to emphasize connection
![Page 11: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/11.jpg)
Please stop putting two spaces at the end of a sentence.
![Page 12: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/12.jpg)
Use your ligaturestext-rendering: optimizeLegibility;
![Page 13: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/13.jpg)
Remove all widowsjQwidont — widows b’gone
![Page 14: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/14.jpg)
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.
![Page 15: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/15.jpg)
Use proper spacing
![Page 16: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/16.jpg)
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
![Page 17: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/17.jpg)
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
![Page 18: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/18.jpg)
Create rhythm
![Page 19: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/19.jpg)
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/
![Page 20: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/20.jpg)
![Page 21: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/21.jpg)
Create hierarchy and emphasis
![Page 22: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/22.jpg)
HierarchyVary size, color, weight, and space
![Page 23: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/23.jpg)
![Page 24: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/24.jpg)
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
![Page 25: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/25.jpg)
[
The web font revolution
![Page 26: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/26.jpg)
@font-face is supported in 95.6% of current desktop browsers.
![Page 27: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/27.jpg)
![Page 28: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/28.jpg)
More choice, style & character
![Page 29: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/29.jpg)
This is not a free pass.
![Page 30: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/30.jpg)
The web font revolution[Font delivery
![Page 31: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/31.jpg)
Use Font Squirrels @font-face generator
![Page 32: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/32.jpg)
![Page 33: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/33.jpg)
@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;}
![Page 34: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/34.jpg)
You still need a good font stack
![Page 35: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/35.jpg)
Be mindful of file size & FoUT
![Page 36: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/36.jpg)
Font rendering can be a pain
![Page 37: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/37.jpg)
![Page 38: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/38.jpg)
Font delivery as a service
![Page 39: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/39.jpg)
The web font revolution[Making the right choice
![Page 40: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/40.jpg)
Web safe fonts are still the workhorses
![Page 41: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/41.jpg)
![Page 42: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/42.jpg)
Balance style and legibility
![Page 43: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/43.jpg)
![Page 44: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/44.jpg)
Making a great pair
![Page 45: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/45.jpg)
Sans-serif + Serif
![Page 46: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/46.jpg)
![Page 47: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/47.jpg)
Avoid similar styles/classifications
![Page 48: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/48.jpg)
Match personalities
![Page 49: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/49.jpg)
What to look for in a screen typeface
![Page 50: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/50.jpg)
High x-height
![Page 51: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/51.jpg)
Large counters
![Page 52: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/52.jpg)
Read the about and see what other designers have done
![Page 53: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/53.jpg)
Finding a typeface with the right license
![Page 54: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/54.jpg)
Problems with free
![Page 55: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/55.jpg)
Variety of quality
![Page 56: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/56.jpg)
Unknown rendering
![Page 57: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/57.jpg)
Poorly drawn
![Page 58: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/58.jpg)
Poorly kerned
![Page 59: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/59.jpg)
Test your type:
Read, re-read, and have someone else read
![Page 60: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/60.jpg)
The web font revolution[ Well, it’s been fun
![Page 61: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/61.jpg)
thoughtbot.com
![Page 62: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/62.jpg)
atedrake.com
![Page 63: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/63.jpg)
Inspiration:
dribbble.comffffound.comsiteinspire.com, cssmaina.com & other css galleries
Resources:
ilovetypography.comtypedia.comwebfonts.infonicewebtype.comreadableweb.comElements of Typographic Style–Robert Bringhurst
![Page 64: Creating Beautiful Type (On the Web)](https://reader036.vdocument.in/reader036/viewer/2022081403/5549fc47b4c905507a8b4aba/html5/thumbnails/64.jpg)
Typeface used in presentation:
Meta by Erik Spiekermann
Websites used in presentation:
wilsonminer.comblackestate.co.nzblakeallendesign.comsxswdesign.comoldguard.co.uk