Typography for Screen Displays

Mason Brown @maysundays Where do we start? Get Inspired, The Possibilities Are Endless... Letters Numbers & http://lettersnumbersandglyphs.tumblr.com/ Type Everything http://typeverything.com/ Readability on the web?

Mo screens, Mo problems... A Few Rules to Remember... 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

=

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 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 should be smoothed Font Hinting

Hinted and unhinted type both have their pros and cons, leaving the designer to choose between legibility and 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, , Arial, sans-; } 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!