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

Advanced Typesetting for the Web @ ParisWeb 2012.

Marko Dugonjić
October 18, 2012

Advanced Typesetting for the Web @ ParisWeb 2012.

With the rise of web fonts, we are finally able to deliver sophisticated typographic experiences to our users. However, devil is in the details, so let’s investigate how far can we go to tweak for improved legibility covering wide variety of devices.

You will learn how to choose typeface for function over form, about font and pixel size across devices, how to set-up macro and micro white-space and how to design line, leading and word space.

Marko Dugonjić

October 18, 2012
Tweet

More Decks by Marko Dugonjić

Other Decks in Design

Transcript

  1. Jared M. Spool “Designers should know how to code” ≠

    “Designers need to be expert coders.”
  2. Oliver Reichenstein Good typography does not look nice to please

    type nerds. Primarily, well set type reads well.
  3. Kandel & Moles Reading Ease 209 - 1.15(words/sentences) - 0.68(syllables/words)

    ————————————————————————— = reading ease for French
  4. 90.0–100.0 easily understood by an average 11-year-old student 60.0–70.0 easily

    understood by 13- to 15-year-old students 0.0–30.0 best understood by university graduates
  5. http://dyslexicfonts.com Your brain can sometimes do funny things to letters.

    OpenDyslexic tries to help prevent some of these things from happening. Letters have heavy weighted bottoms to add a kind of "gravity" to each letter, helping to keep your brain from rotating them around in ways that can make them look like other letters. Consistently weighted bottoms can also help reinforce the line of text. The unique shapes of each letter can help prevent flipping and swapping.
  6. Julian Hansen Start out by choosing the kind of project

    that you’ll need your typeface for.
  7. Vitaly Friedman Elliot Jay Stocks Because there’s a lot going

    on visually on SM — screenshots, buttons and noisy ads — a sans-serif felt like a more sensible, uncluttered route for body copy.
  8. Erik Spiekermann The line breaks. Make it 2 lines, range

    left. This doesn’t read as one item, but 3 separate ones. Kerning is overrated.
  9. VIEWPORT-PERCENTAGE LENGHT vw, vh, vmin, vmax The viewport-percentage lengths are

    relative to the size of the initial containing block. When the height or width of the viewport is changed, they are scaled accordingly.
  10. :root { font-size: 2.5vw; /* 2.5% of viewport’s width */

    } h1 { font-size: 2rem; } p { font-size: 1rem; }
  11. @media (viewport size) and (pixel density) /* and (proximity sensor)

    */ { /* sizing based on the reading distance */ /* dpi adjusted fonts */ /* hierarchy based on the information density */ /* contrast based on the number of typographic elements */ }
  12. Credits Jared M. Spool, http://bit.ly/U1FRZl Trent Walton, http://trentwalton.com Elliot Jay

    Stocks, http://elliotjaystocks.com Oliver Reichenstein, http://bit.ly/MBjmUA Jerry Jordan, Phone Call from God, http://bit.ly/Nvla2u Comic Sans, http://bit.ly/XlEFyT Julian Hansen, http://bit.ly/RT3v5y Type Together, http://type-together.com Smashing Book #3, http://bit.ly/U1FzBA Jon Tan, Big Type, Little Type, http://bit.ly/PBcuMt Mark Simonson studio, http://ms-studio.com Lucas fonts, http://lucasfonts.com LEGO X-men, http://bit.ly/QT3rTq Erik Spiekermann, https://vimeo.com/49744848 Jesse Taggert, http://bit.ly/WoUi97 MailChimp, http://mailchimp.com/ Dan Cederholm, http://bit.ly/RRFImA Erik Spiekermann, E.M. Ginger, Stop Stealing Sheeps & Find Out How Type Works Chris Coyer, http://css-tricks.com/examples/ViewportTypography/