Hello Web Fonts


Published on

Web fonts is an emerging technology that enables you, as a designer, to break away from the trappings of such “safe” fonts as Arial and Verdana. Learn how to use alternative typefaces that make your content stand out and promote your brand while your text remains search-engine friendly and screen-reader ready.

Published in: Design, Technology, Art & Photos
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Hello Web Fonts

  1. 1. Goodbye, Arial and Verdana. Hello, Web Fonts!Michael Opsteegh21 MAY 2012 • TECHNICAL COMMUNICATION SUMMIT
  2. 2. Its said that 95% of web design is TYPEhttp://www.informationarchitects.jp/en/the-web-is-all-about-typography-period/CHUNK FIVE (THE LEAGUE OF MOVEABLE TYPE)
  3. 3. Typography form gives your content?CABIN AND FANWOOD (THE LEAGUE OF MOVEABLE TYPE)
  4. 4. @font-faceCSS 2.0 (1998)RALEWAY (THE LEAGUE OF MOVEABLE TYPE)
  5. 5. THIS END-USER LICENSE AGREEMENT (“AGREEMENT”) CONSTITUTES the Portable Document Format (“PDF”); Cascading Style Sheets (“CSS”) employing WARRANTIES, REPRESENTATIONS AND GUARANTEES, EXPRESS ORA BINDING LEGAL AGREEMENT BETWEEN YOU AND THE HOEFLER the “@font-face” tag; Macromedia Flash (or other) files employing TrueDoc; and docu- IMPLIED, AS TO MERCHANTABILITY, FITNESS FOR ANY PARTICU-TYPE FOUNDRY, INC., D/B/A HOEFLER & FRERE-JONES (“H&FJ”). READ ments employing Web Embedding Font Technology (“WEFT”). You may not create LAR PURPOSE, OR OTHERWISE WITH RESPECT TO THE TYPEFACES.IT CAREFULLY BEFORE COMPLETING THE INSTALLATION PROCESS Embedded Documents, except as expressly provided in paragraphs 3.2 and 3.3: IN ADDITION THERE IS NO WARRANTY OF NON-INFRINGEMENTAND USING THE FONT SOFTWARE. THIS AGREEMENT CONTAINS AND TITLE OR QUIET ENJOYMENT.DISCLAIMERS OF WARRANTIES AND LIABILITY. BY DOWNLOADING, 3.2. Workflow PDFs. For the sole purpose of providing documents to printers or otherINSTALLING AND/OR USING THE FONT SOFTWARE, YOU CONFIRM outside suppliers for reproduction, H&FJ grants you a limited license to create and cir- 7. DISCLAIMER OF LIABILITY. TO THE EXTENT PERMITTED BY APPLI-THAT YOU HAVE READ, UNDERSTAND AND AGREE TO BE BOUND BY culate Embedded Documents in the PDF format (“Workflow PDFs”) subject to the fol- CABLE LAW, H&FJ DISCLAIMS ALL LIABILITY FOR ANY LOSS, COSTTHE TERMS OF THIS AGREEMENT, AND THAT YOU HAVE THE AU- lowing restrictions: (a) these Workflow PDFs must have “subsetting” enabled, to limit OR DAMAGE, INCLUDING WITHOUT LIMITATION INDIRECT, SPE-THORITY TO BIND THE PERSON OR ENTITY SPECIFIED ON YOUR IN- to the greatest extent possible the number of characters of the Typefaces embedded; CIAL, CONSEQUENTIAL, OR INCIDENTAL DAMAGES, INCLUDINGVOICE TO THE TERMS OF THIS AGREEMENT. IF YOU DO NOT AGREE (b) Workflow PDFs must be configured to be “non-editable,” to prevent the alteration, ANY LOST PROFITS OR LOST SAVINGS, LOSS OF GOODWILL, BUSINESSTO THE TERMS OF THIS AGREEMENT, DO NOT INSTALL THE FONT addition, deletion or extraction of any text, by any party other than the licensee; (c) INTERRUPTION, WORK STOPPAGE, LOSS OF DATA, OR COMPUTERSOFTWARE. Workflow PDFs must be transmitted individually, on a one-to-one basis, over a closed FAILURE, DAMAGE OR MALFUNCTION, OR FOR ANY CLAIM BY ANY network. Under no circumstances will this Agreement be construed to entitle you or PARTY, EVEN IF H&FJ HAS BEEN APPRISED OF THE POSSIBILITY OF1. Grant of License. H&FJ hereby grants you a limited, non-exclusive, non-transferable your agents or assigns to broadcast Workflow PDFs, or any form of Embedded Docu- SUCH DAMAGES, AND REGARDLESS OF THE THEORY (CONTRACT,license to install and use the fonts and font software specified on your invoice (the fonts ments, over public computer networks, including but not limited to publicly accessible TORT OR OTHERWISE) UPON WHICH SUCH CLAIM IS BASED.and font software are hereafter referred to individually and collectively as the “Typefac- pages on the World Wide Web.es”) on only the fixed number of computers at the fixed number of locations specified on 8. Breach and Termination. This Agreement is effective until terminated. H&FJ re-your invoice. You agree not to duplicate, reproduce, sell, transfer, license, or otherwise 3.3 Flash Files. For the sole purpose of creating vector graphics for inclusion on web serves the right to terminate this Agreement and any or all of your rights hereunderdistribute the Typefaces in any form, except as expressly provided herein. You agree pages, H&FJ grants you a limited license to create and circulate Embedded Documents effective immediately if you fail to comply with any term of this Agreement, includingnot to decompile, modify, reformat, translate, reverse-engineer or otherwise discover in the SWF format (“Flash Files”), subject to the following restrictions: (a) Flash Files without limitation by exceeding the scope of the license granted in paragraph 1 above.the source code of the Typefaces, or to embed the Typefaces in electronic documents must have “subsetting” enabled, to limit to the greatest extent possible the number of Upon any such termination you will destroy the original and all copies of the Typefacesexcept as expressly permitted below (see paragraphs 3 and 4.) You agree not to make, characters of the Typefaces embedded; (b) Flash Files must be “static,” not “dynamic,” and cease all use of the Typefaces and the Trademarks. The termination of this Agree-or authorize or commission others to make, any additions, deletions or modifications to, as to prevent any party other than the licensee from specifying, selecting, copying, cut- ment shall automatically, and without any further action by H&FJ, terminate and ex-or derivative works or fonts based on or substantially similar to, the Typefaces without ting, pasting or modifying the text that is displayed in the Typefaces; (c) Flash Files tinguish the license granted herein. H&FJ reserves the right to make routine inspec-the prior written consent of H&FJ. You agree not to alter H&FJ’s copyright notices as must be configured to “Protect from Import.” tions of the Typefaces, to which end you agree to surrender the Typefaces to H&FJ,contained in the Typefaces. by e-mail, immediately upon receipt of written notice. YOU HEREBY WAIVE ANY 4. Non-Embedded Digital Formats. For the sole purpose of publishing electronic docu- AND ALL CHALLENGES TO, OR CLAIMS OR DEFENSES REGARDING,2. Intellectual Property Rights. You acknowledge that H&FJ is the exclusive owner ments (such as web pages) that use the Typefaces, but that are not Embedded Docu- H&FJ’S RIGHTS IN THE TYPEFACES, H&FJ’S RIGHT TO TERMINATEof all worldwide right, title and interest in and to the Typefaces, including without ments, H&FJ grants you a limited license to distribute images of the Typefaces in indus- THIS AGREEMENT PURSUANT TO THE TERMS HEREOF, AND H&FJ’Slimitation all copyright, patent, trademark, trade secret and other intellectual property try-standard digital formats (collectively “Image Files”) solely for the purposes set forth RIGHTS TO CARRY OUT INSPECTIONS OF THE TYPEFACES AS PRO-rights, in and to the Typefaces as artwork, software, and otherwise, including all cop- herein, subject to the following restrictions: (a) Image Files must feature fixed images VIDED HEREIN.ies of the Typefaces, regardless of the format in which they are expressed or the media of specific applications of the Typefaces rasterized in a pixel grid; (b) Image Files muston which they are recorded. Any and all updates, revisions, enhancements or addi- not feature scalable or non-scalable outlines of the Typefaces, or permit the extraction 9. Governing Law; Jurisdiction and Venue. This Agreement shall be governed by andtions to the Typefaces shall automatically be deemed to be included in the definition of or extrapolation of scalable or non-scalable outlines of the Typefaces; (c) Image Files construed under and in accordance with the laws of the State of New York, applicable“Typefaces” hereunder and shall become part of, and subject to, this Agreement. You must not permit the alteration of the text by any third party; (d) Image Files must not to contracts entered into, and to be fully performed in, that state. All suits concerningacknowledge that H&FJ shall be the exclusive owner of all worldwide right, title and include more than 50% of the character set of any individual style of the Typefaces; and the interpretation, breach, or enforcement of this Agreement shall be brought only ininterest in and to any and all modifications of, and derivative works and fonts based on (e) no character featured in Image Files may be greater than 500 pixels in height. Im- the United States District Court for the Southern District of New York, or, if thator substantially similar to, the Typefaces, regardless of who made such modifications age Files include, but are not limited to: Joint Photographers’ Expert Group (“JPEG”) Court does not have subject matter jurisdiction, then in Supreme Court of the State ofor derivative works or fonts. The names of these Typefaces are trademarks of H&FJ files; Graphics Interchange Format (“GIF”) files; Portable Network Graphics (“PNG”) New York, New York County. The parties consent to personal jurisdiction and venue(“Trademarks”). All goodwill that may become attached to the Trademarks as a result files; Tagged Image File Format (“TIFF”) files; non-vector Picture (“PICT”) files; and in those Courts for such suits. This Agreement will not be governed by the United Na-of your use of the Typefaces shall inure to the exclusive benefit of H&FJ. You agree not Bitmap (“BMP”) files. tions Convention on Contracts for the International Sale of Goods, the application ofto challenge H&FJ’s rights in or to the Typefaces or the Trademarks or the validity of which is expressly excluded.any intellectual property or other right of H&FJ therein, or to infringe H&FJ’s rights 5. No Transfer of Rights. You shall not sell, lease, sublicense, allow to use, or otherwisetherein. This Agreement is not a grant to you of any right, title or interest in or to the assign or transfer any of your rights, duties or obligations under this Agreement, in 10. Miscellaneous. This Agreement represents the entire understanding and agreementTypefaces or the Trademarks except for the limited, non-exclusive, non-transferable whole or in part, to any person or entity. Without limiting the foregoing, Typefaces between the parties hereto with respect to the subject matter hereof and supersedes alllicense to install and use the Typefaces as set forth in paragraph 1 above, subject to the licensed for use by a specific publication shall not be transferred to or used by other prior negotiations, representations and agreements, either express or implied, betweenHoefler & Frere-Jones EULAterms and conditions of this Agreement. All rights not expressly granted herein are publications owned or managed by a common corporate parent, and/or affiliated with the parties with respect to the subject matter hereof. The failure of H&FJ to insist uponreserved to H&FJ. the specific publication to which this license has been granted, without the purchase of strict adherence to any term of this Agreement on any occasion shall not be construed an additional license from H&FJ. as a waiver and shall not deprive H&FJ of the right thereafter to insist upon strict3.1. Embedding. “Embedded Documents” are those which contain a copy of the Type- adherence to that term or any other term of this Agreement. If any provision of thisfaces, or data describing the shape or outline of any part of the Typefaces. Embedded 6. NO WARRANTY. THE TYPEFACES ARE PROVIDED “AS IS.” TO THE Agreement shall be held by a court of competent jurisdiction to be contrary to law, thatGOUDY BOOKLETTER 1911 (THE LEAGUE OF MOVEABLE TYPE)Document formats include, but are not limited to: Acrobat (or other) files employing EXTENT PERMITTED BY APPLICABLE LAW, H&FJ DISCLAIMS ALL provision will be enforced to the maximum extent permissible and the remaining provi-
  7. 7. font-family: Helvetica, ‘Helvetica Neue’,Arial, sans-serif;
  8. 8. Serif Sans-serif Monospace Cursive FantasyGeorgia Arial Courier Apple Chancery HattenschweilerTimes Helvetica Lucida Console Comic Sans ImpactTimes New Verdana Monaco Zapfino PapyrusRoman
  9. 9. WorkarounDs Static Image sIFR FLIR Cufon Image ReplacementBLACKOUT TWO A.M. AND MIDNIGHT (THE LEAGUE OF MOVEABLE TYPE)
  10. 10. @font-face 4.0 3.5 4.0 3.1 10.0 3.2 2.2 TrueType/ 9.0 3.5 4.0 3.1 10.0 4.2 2.2 OpenType (ttf/otf) SVG Font (svg/ 4.0 3.2 9.0 3.2 3.0 svgz) Embedded 4.0 OpenType (eot) Web Open Font 9.0 3.6 5.0 5.1 11.1 5.0 Format (woff)http://www.caniuse.com/fontfaceCANTARELL (GOOGLE WEB FONTS)
  11. 11. Self host or use a hosting service?ORBITRON , LEAGUE SCRIPT THIN, AND KNEWAVE (THE LEAGUE F MOVEABLE TYPE)
  12. 12. @font-face { font-family: ‘SortsMillGoudy’; src: url(‘../fonts/GoudyStM.ttf’); font-weight: normal; font-style: normal;}Self-HostingCOURIER
  13. 13. @font-face { font-family: ‘SortsMillGoudy’; src: url(‘../fonts/GoudyStM.ttf’); font-weight: normal; font-style: normal;}@font-face { font-family: ‘SortsMillGoudy’; src: url(‘../fonts/GoudyStM-Italic.ttf’); font-weight: normal; font-style: italic;}
  14. 14. @font-face { font-family: ‘SortsMillGoudy’; src: url(‘../fonts/GoudyStM.ttf’); font-weight: normal; font-style: normal;}@font-face { font-family: ‘SortsMillGoudy’; src: url(‘../fonts/GoudyStM-Italic.ttf’); font-weight: normal; font-style: italic;}@font-face { font-family: ‘SortsMillGoudy’; src: url(‘../fonts/GoudyStM-Bold.ttf’); font-weight: bold; font-style: normal;}
  15. 15. @font-face { font-family: ‘SortsMillGoudy’; src: url(‘GoudyStM-webfont.eot’); src: url(‘GoudyStM-webfont.eot?#iefix’) format(‘embedded-opentype’), url(‘GoudyStM-webfont.woff’) format(‘woff’), url(‘GoudyStM-webfont.ttf’) format(‘truetype’), url(‘GoudyStM-webfont. svg#SortsMillGoudyRegular’) format(‘svg’); font-weight: normal; font-style: normal;}
  17. 17. <script type=”text/javascript” src=”http://use.typekit.com/jsc1yga.js”></script><script type=”text/javascript”>try{Typekit.load();}catch(e){}</script><link href=’http://fonts.googleapis.com/css?family=Cantarell:400,400italic|Lusitana:400,700’rel=’stylesheet’ type=’text/css’>Hosting Options—Sample Code for HTMLTYPEKIT (TOP) AND GOOGLE WEB FONTS (BOTTOM)
  18. 18. p { font-family: ‘SortsMillGoudy’, serif;}Font Family DeclarationTYPEKIT (TOP) AND GOOGLE WEB FONTS (BOTTOM)
  19. 19. Michael Opsteegh octechwr i ter @ya h oo.comLOVERS QUARREL AND CABIN (GOOGLE WEB FONTS)