Typography for Screen Displays Mason Brown @maysundays Where do we start? Get Inspired, The Possibilities Are Endless... Letters Numbers & Glyphs http://lettersnumbersandglyphs.tumblr.com/ Type Everything http://typeverything.com/ Readability on the web? Mo screens, Mo problems... A Few Rules to Remember... Font Size: LARGER screens need larger font sizes, SMALLER screens need a smaller font sizes. 1px = The smallest unit on a display screen 1 px = 1 pt 1 em = Originally the width of an uppercase letter ‘M’ set in lead 16px font-size 12px font size in a book is equivalent to 16px onscreen 1 px != 1 px (depending on the font face) say wah????? Today, in the digital world, it is harder to define what 1 em exactly is. So, how do web pages understand font-size? p { font-size: 16px; } p { font-size: 1em; } If you ever need to scale, just change the root size. ... but it can get complicated when nesting elements rem (root em) relates back to the root, not the parent element Line Height: (16px font-size) * 1.5 = 24px 24px ideal line-height ... (line-height: 1.5em;) What about Font Faces? One Font... 2 fonts are more than enough 10 - 12 words per line ensure optimal readability. (~70 characters) 6 menu elements The brain can only process a few items at a time. Aliasing Aliasing Aliasing none sharp crisp strong Font Hinting Most text rendering engines rely heavily on hinting to determine exactly which areas of a glyph should be smoothed Font Hinting Hinted and unhinted type both have their pros and cons, leaving the designer to choose between legibility and typeface integrity Sub-pixel Rendering Subpixel rendering triples the perceived resolution by setting each color component separately. eh? @font-face @font-face { font-family: OpenSans; src: url(http://www.font-face.com/fonts/delicious/OpenSans.otf); font-weight:400; } @font-face { font-family: OpenSans; src: url(http://www.font-face.com/fonts/delicious/OpenSans.otf); font-weight:400; } p { font-family: OpenSans, Helvetica, Arial, sans-serif; } Font Licensing? Typekit https://typekit.com/ Adobe Web Fonts http://html.adobe.com/edge/webfonts/ Font Deck http://fontdeck.com Typecast http://typecast.com/ Free Fonts? Google Fonts http://www.google.com/webfonts Lost Type http://losttype.com/ Font Squirrel http://www.fontsquirrel.com/ Let’s Get Experimental Fit Text http://fittextjs.com/ Bacon Text http://baconforme.com/ Lettering JS http://letteringjs.com/ Web Type for the Lonely http://webtypographyforthelonely.com/ Interactive Effects http://tympanus.net/Tutorials/InteractiveTypographyEffects/index4.html Thanks!.