Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Beautiful Web Typography

Mel Choyce
April 25, 2015

Beautiful Web Typography

Presented at WordCamp Minneapolis 2015. With the rapid popularization of web fonts over the past few years, type on the web has never been more exciting! We’ll learn a bit about basic typographic principles, review techniques and services for integrating web fonts into your WordPress sites, and finally conclude with a bit of speculation on where type on the web is heading.

Mel Choyce

April 25, 2015
Tweet

More Decks by Mel Choyce

Other Decks in Design

Transcript

  1. The Bad • Not as many high-quality options • Limited

    styles/weights • Limited character sets • Limited multi language support • Often overused
  2. The Good • Support • Higher quality fonts • More

    likely to find extended character sets • More likely to find multi language support • More likely to be both good and unique
  3. The Bad • They cost money • Might have to

    pay based on traffic • More licensing restrictions
  4. The Good • Totally customizable setup • Can remove characters

    to reduce font size • You “own” your fonts
  5. The Bad • Requires additional setup • Requires additional tech

    knowledge • Optimization up to you • Often more expensive for paid fonts
  6. @font-face { font-family: 'Typeface'; src: url(‘Typeface.eot?') format(‘eot'), url('Typeface.woff') format('woff'), url(‘Typeface.ttf')

    format('truetype'); } Bulletproof @font-face http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/
  7. Paid & Hosted • Depends on your service • Usually

    given something to add to your <head>
  8. RESPONSIVE TYPOGRAPHY MEDIA QUERIES body { font-size: 100%; } h1

    { font—size: 2.5em; } @media screen and (max-width: 50em) { h1 { font—size: 2em; } } @media screen and (max-width: 40em) { h1 { font—size: 1.5em; } }