Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Creating Beautiful Type (On the Web)

on

  • 3,553 views

"Creating Beautiful Type (On the Web)". Delivered by Kyle Fiedler of ThoughtBot, on November 10th, 2010 at Lamont Library, Forum Room.

"Creating Beautiful Type (On the Web)". Delivered by Kyle Fiedler of ThoughtBot, on November 10th, 2010 at Lamont Library, Forum Room.

Statistics

Views

Total Views
3,553
Views on SlideShare
3,545
Embed Views
8

Actions

Likes
3
Downloads
32
Comments
2

2 Embeds 8

http://minnix.info 7
http://www.pinterest.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Great presentation. Great that you included typeface you used cause I was going to ask!
    Are you sure you want to
    Your message goes here
    Processing…
  • The slides look awesome! Did you know we’re currently running a competition to win a 3M PocketProjector MP180? This fits perfectly in the ‘3MGenius’ category. To enter, simply tag your presentation with ‘3MGenius’ to be entered. Head over to our page for more details... and don’t forget to follow us to find out if you get shortlisted!
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Creating Beautiful Type (On the Web) Creating Beautiful Type (On the Web) Presentation 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 "" ''
  • Well hung quotes blockquote {text-indent: -0.5em} “ 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.
  • 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 ligatures text-rendering: optimizeLegibility;
  • Remove all widows jQwidont — 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 No 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 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 No 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.
  • letter-spacing No The name Harvard comes from the college’s first benefactor. The name Harvard comes from the Yes college’s first benefactor. The name Harvard comes from the No college’s first benefactor.
  • 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
  • Hierarchy Vary size, color, weight, and space
  • Emphasis Yes 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 No 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 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 Font delivery revolution
  • 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 Making the right revolution 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 Well, it’s been fun revolution
  • thoughtbot.com
  • atedrake.com
  • Insperation: dribbble.com ffffound.com siteinspire.com, cssmania.com & other css galleries Resources: ilovetypography.com typedia.com webfonts.info nicewebtype.com readableweb.com Elements of Typographic Style–Robert Bringhurst
  • Typeface used in presentation: Meta by Erik Spiekermann Websites used in presentation: wilsonminer.com blackestate.co.nz blakeallendesign.com sxswdesign.com oldguard.co.uk
  • Kyle Fiedler @kylefiedler kyle@kylefiedler.com kylefiedler.com