• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Webfonts and Web Typography
 

Webfonts and Web Typography

on

  • 504 views

How to find webfonts and use them on your website.

How to find webfonts and use them on your website.

Statistics

Views

Total Views
504
Views on SlideShare
504
Embed Views
0

Actions

Likes
1
Downloads
6
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Webfonts and Web Typography Webfonts and Web Typography Presentation Transcript

    • WEBFONTS1
    • AGENDA 1. Who cares? 2. Where do fonts come from? 3. Why do we have to pay for fonts? 4. Webfonts : Embedding 5. Webfonts : Hosting 6. How to use Type like a Pro2
    • 1) WHO CARES?3
    • You have 6 SECONDS to make a good impression. Be professional. Shine your shoes. Press your pants. Use nice type.4
    • Font is like an individual song Typeface is like a CD, a collection of songs EXAMPLE: Helvetica Nueu Thin is a font Helvetica Nueu is a typeface5
    • 2) WHERE DO FONTS COME FROM?6
    • A BRIEF HISTORY Moveable type was born during the Renaissance Printers hired Punchcutters to craft metal type Punchcutters would turned hand-written alphabets into metal type. Outline of a letter is transferred to one end of a steel bar. The negative space is cut away and a Punch is createdPunch & Matrix A Matrix is created by imprinting the Punch on a soft metal Lead is poured into the matrix to produce a single piece of type The typeface, Garamond, is named after the Punchcutter Claude Garamond (c. 1480–1561).7
    • A BRIEF HISTORYMetal type was distributed in boxes with compartmentsBoxes were called casesUpper Case and Lower case lettersType was set by hand8
    • A BRIEF HISTORY1884 Ottmar Mergenthaler inventing a typesetting machine called the Linotype.The machine had a keyboard that the typesetter used to set lines of type.9
    • A BRIEF HISTORY1950—1980 Phototype setting: Strobe light through spinning disk which had a film negative.10
    • 3) WHY DO I HAVE TO PAY FOR FONTS?11
    • TYPE DESIGN IS AN ART Skilled artisans design Typefaces Type foundries pay Type Designers to turn metal type designs into Digital versions. Examples of digital versions of Garamond12
    • 1976 COPYRIGHT LAW From Wikipedia: The Copyright Law of the United States encourages the creation of art and culture by rewarding authors and artists with a set of exclusive rights. Federal Copyright law grants authors and artists: The exclusive right to make and sell copies of their works  The right to create derivative works  The right to perform or display their works publicly.  These exclusive rights are subject to a time limit, and generally  expire 70 years after the authors death.13
    • 4) WEBFONTS : EMBEDDING14
    • WHERE DO YOU FIND WEBFONTS?15
    • FREE : YOUR COMPUTER [WEB-SAFE] Windows fonts / Mac Fonts / Font family16
    • FREE : YOUR COMPUTER [WEB-SAFE] Windows fonts / Mac Fonts / Font family17
    • COMPUTER FONTS : HOW TO USE p { font-family: Verdana, Geneva, sans-serif ; } p { font-family: ‘Lucida Console’, Monaco, monospace ; } Mac snob p { font-family: ‘Hel Neue, Helvetica, sans-serif ; }18
    • FREE : FONT SQUIRRELfontsquirrel.comGood Font resourceOnce you locate a font, you have to upload them to your web serverUse CSS to declare19
    • FREE : FONT SQUIRREL20
    • FREE : FONT SQUIRRELDownload Folder: OTF files21
    • WHERE TO PURCHASE FONTS22
    • PURCHASE : TYPE FOUNDRIES AND DESIGNERS Adobe.com Monotype MyFonts.com Typography.com* OkayType*23
    • PURCHASE : TYPE FOUNDRIES AND DESIGNERSMyFonts.comReseller of most all foundriesReseller of small font design firms All kinds of way to searchWhat the FontKeep a library of your favorite fontsRemembers every font you bought24
    • THE TROUBLE WITH BROWSERS25
    • You’ll need font files for cross-browser support.26
    • FONTS & BROWSER SUPPORT TTF True Type EOT SVG Embedded Scaleable OTF Open Type Open Type Vector Graphics Safari, Internet Others Firefox Explorer Chrome27
    • FONTS & BROWSER SUPPORT WOFF (Web Open Font Format) Developed in 2009  Supported by the W3C, aims to make it the standard  Essentially Open Type or True Type with compression  and additional meta information All browsers will support this in the future 28
    • FONTS & BROWSER SUPPORT http://caniuse.com/ttf29
    • { Remember these? OTF files acquired from Font Squirrel } +3 font files* +3 font files +3 font files +3 font files +3 font files +3 font files +3 font files 21 font files + 7 font files *EOT + SVG + WOFF 28 font files to upload30
    • NOW WHAT31
    • FONT SQUIRREL TO THE RESCUE32
    • @FONT-FACE GENERATOR @font-face Generator creates all 4 font formats for browser compatibility.33
    • @FONT-FACE KIT GENERATORCowboy Western.otf purchased from MyFonts Check OPTIMAL and click DOWNLOAD34
    • @FONT-FACE KIT GENERATOR35
    • @FONT-FACE KIT GENERATOR A folder with all of your converted font files, plus a demo page will be downloaded to your computer once Font Squirrel is done generating your fonts.36
    • @FONT-FACE KIT GENERATOR37
    • @FONT-FACE KIT GENERATOR : DEMO.HTMLSpecimen Tab38
    • @FONT-FACE GENERATOR : DEMO.HTML Sample Layout39
    • @FONT-FACE GENERATOR : DEMO.HTMLGlyphs & LanguagesCurly Quote EntityCode: "40
    • @FONT-FACE GENERATOR : DEMO.HTMLInstalling Webfonts@font-face code41
    • @FONT-FACE : STYLESHEET@font-face { font-family: CowboyWestern; src: url(cowboy_western-webfont.eot); src: url(cowboy_western-webfont.eot?#iefix) format(embedded-opentype), url(cowboy_western-webfont.woff) format(woff), url(cowboy_western-webfont.ttf) format(truetype), url(cowboy_western-webfont.svg#CowboyWestern) format(svg); font-weight: normal; font-style: normal;} p { font-family: CowboyWestern; }42
    • ICON FONTS43
    • FREE FONT : FONT-AWESOME / ICON FONT One font, 249 icons Pictographs of web-related actions. CSS control Easy to style icon color, size, shadow. Anything thats possible with CSS. Perfect on Retina Displays Icons are vectors, which mean theyre gorgeous on high-resolution displays. Infinite scalability Scalable vector graphics means every icon looks awesome at any size.44
    • FREE FONT : FONT-AWESOME / ICON FONT Where to download: http://fortawesome. github.com/ Font-Awesome/ --------------- bigwdesign.com/ webfonts/font- awesome/github/ docs/test.html45
    • 6) WEBFONTS : HOSTING46
    • FREE FONTS : GOOGLE FONTSgoogle.com/webfonts Hosted solution You don’t have to install fonts47
    • USING : GOOGLE FONTS48
    • USING : GOOGLE FONTS49
    • USING : GOOGLE FONTS50
    • USING : GOOGLE FONTS51
    • USING : GOOGLE FONTS52
    • USING : GOOGLE FONTSPaste into Header of your HTML <link href=http://fonts.googleapis.com/css?family=Raleway:400,500,700,800 rel=stylesheet type=text/css>How to use the font in your CSS h1 { font-family: ‘Raleway,’ sans-serif; font-weight: 400; }53
    • WEBFONTS : HOSTING FONTS Fontdeck.com Typekit.com Webtype.com Fonts.com54
    • WEBFONTS : HOSTING FONTS http://sprungmarker.de/wp‐content/uploads/webfont‐services/ 55
    • WEBFONTS : HOSTING FONTS56
    • HOSTING FONTS : FONTDECK (VARIOUS SMALL FOUNDRIES)57
    • HOSTING FONTS : FONTDECK / PRICING THEIR PLAN: $7.5 per font per year. Unlimited fonts and websites.58
    • HOSTING FONTS : TYPEKIT (ADOBE)59
    • HOSTING FONTS : TYPEKIT / PRICING60
    • HOSTING FONTS : FONTS.COM (MONOTYPE, LINOTYPE, ITC)61
    • HOSTING FONTS : FONTS.COM / PRICING MY PLAN: $10 per month. Unlimited fonts and websites.62
    • FONTS.COM : USING63
    • FONTS.COM : USING64
    • FONTS.COM : USING Add & Edit Fonts Click Publish Options Add & Edit Domains65
    • FONTS.COM : USING HTML header code: Link to javascript Fonts.com CSS code66
    • FONTS.COM : USING HTML header code: Links to stylesheet at Fonts.com67
    • FONTS.COM : USINGUpgrade plan to buyfonts and self-host68
    • 6) HOW TO USE TYPE LIKE A PRO69
    • TYPE LIKE A PRO: USE NICE TYPE “Hardly anyone can discern good typography from bad typography, but everyone can feel it.” —Oliver Richtenstien ia.com70
    • USING TYPE LIKE A PRO 1. Use curly quotes 2. Use ample leading (line-height) 3. Never, never, never justify type 4. Don’t make your columns too skinny or too wide 5. Don’t use more than 3 typefaces per page 6. Choose an appropriate typeface 7. Avoid Comic Sans 8. Don’t use EM or BOLD, use fonts that are cut Italic or Bold71
    • TYPE LIKE A PRO : CHARACTER ENTITIES Not so Good Good Left Quote : &#8220; Right Quote : &#8221; Apostrophe : &#8217;72
    • TYPE LIKE A PRO: LINE-HEIGHT / BREATHE OK Better73
    • TYPE LIKE A PRO: DONT JUSTIFY Blah Better74
    • TYPE LIKE A PRO: USE NICE TYPE Nice Typefaces Amateurish and overusedALRIGHT SANS MEDIUMPLUTO HEAVYCLARENDON75
    • RESOURCES : TWITTER76
    • FONT VS TYPEFACE77
    • THANK YOU FOR LISTENING :)78