Webvision Notes: The NEW Web Typography:Where the Sexy Is

Wednesday, May 25th, 2011

Time: Wed May 25, 9:00 am – 12:00 pm

HTML + CSS to style ASCII text.

Nobody really knows how many fonts exist (about 150,000). Only 5 commonly used on the web. Web fonts – about 40,000.

Typography :: type
Voice :: speech

182 web safe fonts
66 on both Mac and PC

Convert, buy, or lease them.

Optimize font file

  • Sub-setting: remove unused glyphs to save size.
  • Font hinting: makes more screen readable. Optimized anti aliasing

Tools:

  • What the font (find your font)
  • Fontfriend bookmarklet to show or play with fonts on page
  • What font bookmarklet to get information about the webfonts on page.
  • fluidwebtype for all resources.

Types:

  • EOT – ie only
  • TTF/OTF – FF, Safari, Opera
  • SVG – Safari, Chrome, Opera
  • WOFF – all very modern (safari?)

Major mobile platforms support TTF/OTF, SVG

You can now specify weight, style in @font-face for CSS use. If you do, don’t include SVG (causes trouble).

Converting fonts (that you can legally use): font squirrel.

When buying or converting, you need to check the EULA. If not clearly stated, you are probably out of luck. Lots of free options.

Google web fonts 1000 free by the end of the year.

Guests

Bill David – fonts.com 10,000 out of 150,000 for the web. CDN distribution. Lots of book publishing fonts.

Greg Veen – typekit. Gives access to world class font. All major foundries. 4000 font. Subscription gives you access to all fonts. Uses js to be future proof.

Garrick Van Buren – kernest.com

Easy to use site. All CSS based. Can download fonts.

Jim and Thomas, webink

Sort and filter by foundry. “type drawers” allow you to let clients pay for their fonts. Backed by amazon cloud. Fontfuse – to explore font pairs.

Best voice for the statement? “I’m going to kill you”

Sexy – best practice

  • contrast (mixed color/style contrast) some great examples.
  • use space! No text up to the edge.
  • use scale for emphasis.
  • use texture.
  • use consistent variation.

http://bit.ly/nwt-resources

Leave a Reply

You know you want to...