DOCSLIB.ORG

How to Make Browser Download Fonts How to Add Fonts to a React Project

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
How to Make Browser Download Fonts How to Add Fonts to a React Project How to make browser download fonts How to add Fonts to a React Project. Traditionally, adding a font to a website meant downloading the necessary font files into your project and creating the necessary @font-face css code to adapt to different web browsers requirements. Table of Contents. Using @font-face Using Hosted Fonts Using Web Font Loader. The above approach works just fine and is probably one of the best solutions if your app or website will need to run within an intranet with no Internet access. But what if its an online website being accessed by thousands or millions of visitors everyday. You would probably look for a solution that can provide better performance and less load to your servers. Using Hosted Fonts. The recommended solution is to load your font from a Hosted Fonts Provider like Google Fonts. The logic behind this recommendation is that browsers usually download web page resources in a sequential order before it can fully construct a page for rendering. However, if some of the page resources are on a different server, it can download them in parallel, hence a page can be loaded much faster. Let's quickly get started with a basic react project which we shall add a font from Google Fonts. We are going to use the create-react-app tool to quickly kick-off the project. You can easily install it by executing: After you have installed the tool, we can now go ahead and create our project: When you the run the project, you will be greeted with a page like this: Let's add some content in the src/App.js file within the existing "App" div. The web page should now look like this with the default fonts. Let's now pick some fonts from Google Fonts. Select any font that hasn't been installed in your machine, in my case I chose Titillium Web. I also added 2 more font weights that I like. To quickly add the fonts to our react project, simple open public/index.html and paste the embed code provided within the tags. Save the file and edit the src/index.css and add this: After saving the above file, the web page should now look like this: Using Web Font Loader. The above approach is the simplest method of adding fonts to your web app. However, if you were to run your site on Google Page Speed to check for performance issues, that line we added in public/index.html will get flagged for the following reason: Render Blocking CSS. The best solution I found to fix this was to use Web Font Loader, a product that is co-developed by Google and Typekit. You can use this tool to load self-hosted fonts or fonts provided through APIs. To use it, simply install it as an npm package in your project: Go to your public/index.html and comment the link we added. Open src/index.js and add the following code: Save the file and restart the react app. The site should appear exactly the same. However, I must warn you that when users first launch the web app, they will experience a few seconds of FOUT(Flash of Unstyled Text). Luckily, most modern browsers have caching mechanisms and this phenomenon won't occur again on subsequent reloads unless the user clears or disables the browser's cache. If you would like to access the code used in this tutorial you can access it here. CSS Web Fonts. Web fonts allow Web designers to use fonts that are not installed on the user's computer. When you have found/bought the font you wish to use, just include the font file on your web server, and it will be automatically downloaded to the user when needed. Your "own" fonts are defined within the CSS @font-face rule. Different Font Formats. TrueType Fonts (TTF) TrueType is a font standard developed in the late 1980s, by Apple and Microsoft. TrueType is the most common font format for both the Mac OS and Microsoft Windows operating systems. OpenType Fonts (OTF) OpenType is a format for scalable computer fonts. It was built on TrueType, and is a registered trademark of Microsoft. OpenType fonts are used commonly today on the major computer platforms. The Web Open Font Format (WOFF) WOFF is a font format for use in web pages. It was developed in 2009, and is now a W3C Recommendation. WOFF is essentially OpenType or TrueType with compression and additional metadata. The goal is to support font distribution from a server to a client over a network with bandwidth constraints. The Web Open Font Format (WOFF 2.0) TrueType/OpenType font that provides better compression than WOFF 1.0. SVG Fonts/Shapes. SVG fonts allow SVG to be used as glyphs when displaying text. The SVG 1.1 specification define a font module that allows the creation of fonts within an SVG document. You can also apply CSS to SVG documents, and the @font-face rule can be applied to text in SVG documents. Embedded OpenType Fonts (EOT) EOT fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages. Browser Support for Font Formats. The numbers in the table specifies the first browser version that fully supports the font format. Font format TTF/OTF 9.0* 4.0 3.5 3.1 10.0 WOFF 9.0 5.0 3.6 5.1 11.1 WOFF2 14.0 36.0 39.0 10.0 26.0 SVG Not supported Not supported Not supported 3.2 Not supported EOT 6.0 Not supported Not supported Not supported Not supported. *IE: The font format only works when set to be "installable". Using The Font You Want. In the @font-face rule; first define a name for the font (e.g. myFirstFont) and then point to the font file. Tip: Always use lowercase letters for the font URL. Uppercase letters can give unexpected results in IE. To use the font for an HTML element, refer to the name of the font (myFirstFont) through the font-family property: Example. @font-face font-family: myFirstFont; src: url(sansation_light.woff); > div font-family: myFirstFont; > Using Bold Text. You must add another @font-face rule containing descriptors for bold text: Example. The file "sansation_bold.woff" is another font file, that contains the bold characters for the Sansation font. Browsers will use this whenever a piece of text with the font-family "myFirstFont" should render as bold. This way you can have many @font-face rules for the same font. Test Yourself with Exercises! CSS Font Descriptors. The following table lists all the font descriptors that can be defined inside the @font-face rule: How to Install and Use Web Fonts. Jo here with little bonus for you this week! You’ve already had a couple of tutorials for some inspiration on how to use the resources in the current 30 Best Selling Creative Fonts (With Web Fonts and Extended Licensing) deal, which we hope you’re enjoying. One of the great features of this bundle is the inclusion of desktop fonts and webfonts allowing you to utilise them not just to make your print/graphic designs stand out, but your web designs too. After several community members asked about exactly how to use the web fonts available in this bundle, we decided to put together a helpful guide, for all you guys who are new to working with web fonts. There’s no need to be intimidated or put off from using web fonts, and as this guide will show you, they’re quite easy to use once you understand the basics. Ok, lets get started! There is a full text version of this tutorial below, but I’ve also put together a short video walking you through each step of the process. You’ll be using your new web fonts in no time :). Step 1: Select your webfonts. Here we have our basic webpage: As you can see, it could do with a little webfont love to liven it up. The first step is to decide which fonts you want to use (there’s a list of resources on how to match fonts in ‘Step 9’ in my previous tutorial). In this example we’re going to use ‘Atlas Slab’ and ‘Polly’ as our fonts: Once you’ve decided on the font, navigate to the webfonts folder within it, and you should see something like this: You’ll notice there are a variety of different formats that webfonts come in: WOFF Stands for: Web Open Font Format. WOFF fonts were created specifically for web use, and often load faster than other formats because they use a compressed version of the structure used by OpenType (OTF) and TrueType (TTF) fonts. This format is generally preferred because it can also include metadata and license info within the font file itself. SVG / SVGZ Stands for: Scalable Vector Graphics (Font) An SVG is a vector re-creation of the font, which makes it a smaller file size, and is also great for mobile use. This format is the only one allowed by version 4.1 and below of Safari for iPhone. Currently SVG fonts are not supported by Firefox, IE or IE Mobile. SVGZ is a zipped version of SVG. EOT Stands for: Embedded Open Type. This format was created by Microsoft and is the only format that IE8 and below will recognize when using @font-face (we’ll cover this in Step 3) within a stylesheet.
Load more

Recommended publications
  • Downloadbaar Met Een ‘Worry-Free’ Licentie
    Afbeelding 1: Gestileerde kaart van Gent met daarop het logo van Architectuurbibliotheken Gent Connect to thrive . LAROY Kathy - CVO VSPW - Graduaat BDI - Architectuurbibliotheken Gent LAROY Kathy - CVO VSPW - Graduaat BDI - Architectuurbibliotheken Gent WOORD VOORAF Ik ben mijn faculteitsbibliothecaris Bart Vancoppenolle, diensthoofd prof. dr. Tom Verguts, voormalig decaan prof. dr. Geert De Soete en huidig decaan prof. dr. Ann Buysse zeer erkentelijk. Zij hebben mij namelijk de kans en ruimte geboden om deze studie te combineren met mijn job als bibliotheekmedewerker in de Faculteitsbibliotheek Psychologie en Pedagogische Wetenschappen, UGent. Ook mijn collega’s Kristof De Bruyne, Annemie De Vuyst en Franky Maes verdienen hiervoor een woord van dank. Ik heb zeer veel gehad aan de kruisbestuiving tussen mijn praktijkervaringen op de werkvloer en de theoretische onderbouw die de gedoceerde vakken mij boden. Ik grijp deze gelegenheid dan ook graag aan om alle docenten van CVO VSPW hartelijk te bedanken voor de geboden kennis en inzichten. Ook de praktijkervaringen tijdens mijn stages voor de modules Beroepspraktijk A, B, C en D bleken zeer leerzaam. Voor de module Beroepspraktijk A in het eerste studiejaar van de opleiding liep ik stage in de Openbare Bibliotheek Deinze. Dit werd een zeer gevarieerde en leerrijke ervaring. Ik werd er enthousiast opgevangen en voortreffelijk begeleid door de bibliothecaris-diensthoofd mevr. Trui Galle, de adjunct- bibliothecarissen en de overige medewerkers. Ik wens hen allen dan ook heel erg te bedanken. Voor de modules Beroepspraktijk B, C en D en Projectwerk 1 en 2 in het tweede en derde studiejaar mocht ik stage doen in de Faculteitsbibliotheek Ingenieurswetenschappen en Architectuur, UGent.
    [Show full text]
  • Advancements in Web Typography (Webfonts and WOFF)
    Advancements in Web Typography (WebFonts and WOFF) Aaron A. Aliño Graphic Communication Department California Polytechnic State University 2010 Advancements in Web Typography (WebFonts and WOFF) Aaron A. Aliño Graphic Communication Department California Polytechnic State University 2010 Table of Contents Chapter I: Introduction………………………………………………………….…………..2 Chapter II: Literature Review……………………………………………………….………5 Chapter III: Research Methods………………………………………………….…..…....18 Chapter IV: Results………………………………………………………………….……..24 Chapter V: Conclusions……………………………………………………………….…..38 References……………………………………………………………………………...…..41 1 Chapter I: Introduction When it comes to the control one has in designing and creating content for the World Wide Web, typography should be no different. Print designers have had the advantage for a long time over their ability to choose exactly how type is printed, limited only by their imagination and the mechanical limits of setting and printing type. Web designers, on the other hand, have been held back by the inherent hardware and software limitations associated with web design and font selection. What this means is that web designers have not been able to control type exactly the way they want. Web designers have been limited to fonts that can safely be displayed on most computers and web browsers. If web designers wanted to display type with a special font, they had to resort to a workaround that was not always effective. Web designers should have the same absolute control over typography as print designers. Control of web typography has gotten much better compared to the early days of web design, but 2 considering how powerful and robust computers and web browsers are now, it seems unfortunate that control over web typography is so primitive That has changed now.
    [Show full text]
  • Webtypogrphy Inforgraphic.Graffle
    THE NEW WEB TYPOGRAPHY #1 WHAT IS A WEBFONT? + Although it is estimated that there are more than one hundred fifty thousand different digital fonts, that does not mean you can 150,000 legally use them in your web designs as webfonts. Fonts are small pieces of software subject to End User License Agreements (EULAs) which control what you can and can not legally do with them. Most fonts do not include the right to use the font with ✗ALL DIGITAL FONTS@font-face, so you should not use them. If in doubt, check with the font manufacturer before using as a webfont. f f 10! 182! 40,000@+ ! ✔CORE WEB FONTS ✔WEB SAFE FONTS ✔WEBFONTS Microsoft licensed ten typefaces to be installed on all PCs. Both Mac and Windows computers have a list of fonts that Webfonts are downloadable font file that can be used by a Apple also provided the same fonts, making them the most are always installed. Additionally, commonly installed Web browser to display text. Webfonts come in different commonly available typefaces, and thus the default choice software such as Microsoft Office and Apple iLife include formats which are supported by different browsers, but for most designers. The list originally included 11 typeface, more fonts. From this, we can derive a list of one-hundred virtually all browsers support Webfonts now, including but Microsoft no longer includes Andale Mono. eighty-two additional fonts that are commonly installed on Internet Explorer. Of the 100K digital fonts, around forty most computers. For the full list, visit http://bit.ly/web- thousand have been licensed for @font-face usage and the safe-fonts .
    [Show full text]
  • Web Type: the Next Big Thing NYC Web Design Meetup July 19, 2010
    Web Type: The Next Big Thing NYC Web Design Meetup July 19, 2010 Jaron J. Rubenstein Rubenstein Technology Group http://www.rubensteintech.com/ Overview Technology Licensing Foundries and Distributors Code Results Issues Conclusion References Copyright © 2010, Rubenstein Technology Group, Inc. All Rights Reserved. Evolution of Web Type Web Fonts – Arial, Times New Roman, etc. – Verdana, Georgia, Tahoma, Trebuchet MS, etc. Scalable Inman Flash Replacement (sIFR) – JavaScript/Flash text replacement – Requires Flash plugin – Limitations for animation, dynamic text, Cufón – Replaces text with VML (MSIE) or SVG (everything else) – Rather slow, complex, has some issues with text selection and screen rendering CSS and @font-face – Method of specifying and downloading fonts – Not “HTML5” , introduced in CSS2 in 1998, standardized in CSS3 – Works with MSIE4+, Firefox 3.5+, Safari 3.1+, Opera 10+ and Chrome 4.0+ – Specification: http://www.w3.org/TR/css3-fonts/#font-resources Copyright © 2010, Rubenstein Technology Group, Inc. All Rights Reserved. @font-face Font Formats TrueType (TTF) – Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+ Embedded OpenType (EOT) – Microsoft Internet Explorer 4+ Web Open Font Format (WOFF) – Firefox 3.6+, Internet Explorer 9+, Chrome 5+ Scalable Vector Graphics (SVG) – iPad and iPhone Scalable Vector Graphics, gzipped (SVGZ) – Compressed SVG files (via gzip compression) – iPad only Copyright © 2010, Rubenstein Technology Group, Inc. All Rights Reserved. Format Browser Compatibility Browser TrueType WOFF EOT SVG SVGZ MSIE 4 - 8 Yes MSIE 9 Soon Yes Firefox 3.5+ Yes Firefox 3.6+ Yes Yes Safari 3.1+ Yes Yes Yes Chrome 4+ Yes Soon Yes Yes Opera 10+ Yes Soon Yes Yes iPhone Yes iPad Yes Yes Source: http://www.fontspring.com/fontface Copyright © 2010, Rubenstein Technology Group, Inc.
    [Show full text]
  • Fontcreator Review
    Version 8.0 Released 5th June 2014 • Updated 21st July 2014 Download Page • Version Comparison Chart Web Designers can now create their own fonts since FontCreator supports the Web Open Font Format (WOFF) • Test Page (View in Firefox) Export of CFF (Postscript) outlines is also supported now. The Kerning dialogue has been replaced with the “OpenType Designer” to support the use of glyph positioning data for kerning. If a font with only the old style KERN data is opened in FontCreator, it is converted to GPOS data, which can be edited in the new dialogue. The OpenType Designer (on the Font menu) opens a dialogue for modifying kerning adjustment pairs, as well as other OpenType GPOS features. This change required a change to the Project file format. Projects edited in the latest version may lose data if opened in the previous version. Copy your project files to a new folder, and edit the copies while learning the new version. Then, if you should encounter problems, you can revert to the previous version by opening your previous project files. On exporting a project for the first time you will need to select the options in the Font Export Settings. Browse to choose a path for the font, enter the filename, choose the Outline format from TrueType or CFF (Postscript), select the kerning tables to include, and select from the Hinting options. To export a Web Font, select the options for that. When ready to export the font, select the export type from the File menu or use the shortcuts Shift+Ctrl+E (TTF/OTF), Shift+Ctrl+R (CFF), Shift+Ctrl+W (WOFF), or Shift+Ctrl+A for All.
    [Show full text]
  • Glyphs Handbook from July 2016 for the Application Version 2.3
    Handbook July 2016 Glyphs 2.3 Create – Produce – Release Font Editing for Everyone You are reading the Glyphs Handbook from July 2016 for the application version 2.3. Please download the latest version of this handbook at: glyphsapp.com/get-started © 2011–2016 glyphsapp.com Written by Rainer Erich Scheichelbauer and Georg Seifert. Thanks to Jeff Kellem, Rob Keller, Toshi Omagari and Claus Eggers Sørensen for their invaluable input. Contents 1 Glyphs 8 3.3.11 Resegmenting Outlines 24 1.1 A Tool for Creating 3.3.12 Controlling Path OpenType Fonts 8 Direction 25 1.2 Installation 8 3.3.13 Extremes and Inflections 26 1.3 Community 9 3.3.14 Duplicate Nodes 27 1.4 Updates 9 3.4 Anchors 27 1.5 Glyphs Mini 9 3.4.1 Compound and Positioning 1.6 Keyboard Shortcuts 9 Anchors 27 1.7 Crash Reports 10 3.4.2 Ligature Carets 27 3.4.3 Adding, Editing and 2 Preferences 11 Removing Anchors 28 2.1 Accessing Application 3.4.4 Mark to Base Positioning 29 Preferences 11 3.4.5 Mark to Mark 2.1.1 Updates 11 Positioning 29 2.1.2 User Settings 12 3.4.6 Cursive Attachment 2.1.3 Sample Strings 13 Anchors 30 2.1.4 Sharing 14 3.5 Guidelines 30 2.1.5 Add-ons 14 3.5.1 Magnetic Guidelines 30 3.5.2 Local and Global 3 Edit View 16 Guidelines 30 3.1 Editing Glyphs 16 3.5.3 Glyph-Specific Undo 3.2 Drawing Paths 16 History 31 3.2.1 Draw Tool 16 3.6 Glyph Display 32 3.2.2 Pencil Tool 17 3.6.1 Zooming 32 3.2.3 Primitives 17 3.6.2 Panning 33 3.3 Editing Paths 18 3.6.3 View Options 33 3.3.1 Selecting Nodes and 3.6.4 Glyph and Layer Colors 33 Paths 18 3.7 Background 34 3.3.2 Moving
    [Show full text]
  • HTML5 HTML5 Designing Rich Internet Applications
    HTML5 HTML5 DESIGNING RICH INTERNET APPLICATIONS MATTHEW DAVID AMSTERDAM • BOSTON • HEIDELBERG • LONDON • NEW YORK • OXFORD PARIS • SAN DIEGO • SAN FRANCISCO • SINGAPORE • SYDNEY • TOKYO Focal Press is an imprint of Elsevier Focal Press is an imprint of Elsevier 30 Corporate Drive, Suite 400, Burlington, MA 01803, USA The Boulevard, Langford Lane, Kidlington, Oxford, OX5 1GB, UK © 2010 Elsevier, Inc. All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or any information storage and retrieval system, without permission in writing from the Publisher. Details on how to seek permission, further information about the Publisher's permissions policies and our arrangements with organizations such as the Copyright Clearance Center and the Copyright Licensing Agency, can be found at our website: www.elsevier.com/permissions. This book and the individual contributions contained in it are protected under copyright by the Publisher (other than as may be noted herein). Notices Knowledge and best practice in this field are constantly changing. As new research and experience broaden our understanding, changes in research methods, professional practices, or medical treatment may become necessary. Practitioners and researchers must always rely on their own experience and knowledge in evaluating and using any information, methods, compounds, or experiments described herein. In using such information or methods they should be mindful of their own safety and the safety of others, including parties for whom they have a professional responsibility. To the fullest extent of the law, neither the Publisher nor the authors, contributors, or editors, assume any liability for any injury and/or damage to persons or property as a matter of products liability, negligence or otherwise, or from any use or operation of any methods, products, instructions, or ideas contained in the material herein.
    [Show full text]
  • Web Fontfont User Guide
    version 3 | February 2011 web fontfont user guide sections a | About This User Guide b | Web Developers c | System Administrators d | User Settings section a ABOUT THIS USER GUIDE This Web FontFont User Guide contains information aimed at different groups of people: web developers, system adminis- trators and website visitors. Section B is for web developers. It shows how to get started using Web FontFonts for display on your website. Section C contains information for system administrators about which configuration changes may be necessary to suc- cessfully serve webfonts from your web server. Section D outlines some issues visitors of your website may experience in connection to webfonts and may assist site owners in answering webfont-related support requests. For more general information about Web FontFonts, e. g. language support, please refer to the OpenType User Guide. © 2011 FSI FontShop International. All rights reserved. All information in this document is provided ‘as is’ with- out warranty of any kind, either expressed or implied, and is subject to change without notice. All trademarks mentioned in this document are the trademarks or registered trademarks of their respective holders. Mac OS and Safari are trademarks of Apple Inc., registered in the U. S. and other countries. Text typefaces: FF Nexus Mix, Sans, Typewriter a | 1 WeB FontFont UseR GUiDe section B WEB Browser Support DEVELOPERS Web FontFonts come in two formats: Embedded OpenType ® (EOT), which is a legacy format for Internet Explorer ® versions 4 – 8, and the new Web Open Font Format (WOFF). Browser Web FontFont support (as at 24 February 2011) Internet Explorer EOT from version 4; WOFF from version 9 Firefox WOFF from version 3.6 Google Chrome WOFF from version 6 Opera © WOFF from version 11.10 Safari ® – Browsers which do not yet support WOFF are expected to when WOFF has become an official Web standard.
    [Show full text]
  • En 303 560 V1.1.1 (2018-05)
    ETSI EN 303 560 V1.1.1 (2018-05) EUROPEAN STANDARD Digital Video Broadcasting (DVB); TTML subtitling systems 2 ETSI EN 303 560 V1.1.1 (2018-05) Reference DEN/JTC-DVB-375 Keywords broadcast, digital, DVB, subtitle, TV ETSI 650 Route des Lucioles F-06921 Sophia Antipolis Cedex - FRANCE Tel.: +33 4 92 94 42 00 Fax: +33 4 93 65 47 16 Siret N° 348 623 562 00017 - NAF 742 C Association à but non lucratif enregistrée à la Sous-Préfecture de Grasse (06) N° 7803/88 Important notice The present document can be downloaded from: http://www.etsi.org/standards-search The present document may be made available in electronic versions and/or in print. The content of any electronic and/or print versions of the present document shall not be modified without the prior written authorization of ETSI. In case of any existing or perceived difference in contents between such versions and/or in print, the only prevailing document is the print of the Portable Document Format (PDF) version kept on a specific network drive within ETSI Secretariat. Users of the present document should be aware that the document may be subject to revision or change of status. Information on the current status of this and other ETSI documents is available at https://portal.etsi.org/TB/ETSIDeliverableStatus.aspx If you find errors in the present document, please send your comment to one of the following services: https://portal.etsi.org/People/CommiteeSupportStaff.aspx Copyright Notification No part may be reproduced or utilized in any form or by any means, electronic or mechanical, including photocopying and microfilm except as authorized by written permission of ETSI.
    [Show full text]
  • @Font-Face the Web Open Font Format (WOFF) Is Supported By
    PAGE 1/3 ............................................................................................................................... @font-face BROWSER SUPPORT The Web Open Font Format (WOFF) is supported by Mozilla Firefox 3.6+, Google Chrome 5+, Opera Presto, by Mac OS X Lion's Safari from release 5.1 and is supported by Internet Explorer 9 (Version 4 and higher can use web fonts in Embedded OpenType (EOT) format). WOFF2 is supported on Safari 10 on OS X Sierra, and all actual versions of Chrome, Firefox and Opera. All OpenType features are supported according to this last browser versions, like Kerning (kern), Ligatures (liga/clig), Contextual Alternates (calt), Numerators (numr), Oldstyle Numerals (onum), Proportional Numbers (pnum), Tabular Numbers (tnum), Small Capitals (smcp), Case-Sensitive Forms (case) and finally Slashed Zero (zero). USING WEBFONTS WITH CASCADING STYLE SHEETS (CSS) Upload the font files to your web server. You need the files EOT, WOFF and WOFF2 for each font style you want to use in your site. Use the CSS code example below to address your webfonts. Replace the example font file URL with its appropriate path on your server. @font-face { font-family: 'FontName'; ............................................................................................................................... src: url('/fonts/fontname-webfont.eot'); src: local('‚ò∫'), url('/fonts/fontname-webfont.woff2') format('woff2'), url('/fonts/fontname-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } You can then reference your font family by the name you gave it in CSS font stacks as you would any other font. CONTROLLING KERNING AND LIGATURES VIA CSS You can use the non-standard CSS property text-rendering to control the usage of kerning and ligatures in Firefox (version 3+).
    [Show full text]
  • Richard Rutter
    The Future of Web Typography Richard Rutter I’m cofounder of Clearleft, a user experience consultancy in Brighton. I’m an user experience designer by day and a web typography evangelist by night. In fact I’m also that by day now because I’m cofounder of Fontdeck, and webfonts service. ÿ Typography is important because most of the content on the web consists of words. And if those words are to be read, and for that reading experience to be good, then it’s the details that count. I’m going to go through some of the upcoming CSS3 features that provide more control over the details, and later on I’ll do a quick demo of Fontdeck. Ultra light Museo Slab Light Museo Slab Regular Museo Slab Bold Museo Slab Black Museo Slab Ultra black Museo Slab Let’s start with some CSS 1. Font-weight. Here’s regular and bold of Museo Slab Ultra light Museo Slab Light Museo Slab Regular Museo Slab Bold Museo Slab Black Museo Slab Ultra black Museo Slab Not just regular and bold, but also light, ultralight, bold, black, ultrablack. h1 { font-family: “Museo Slab”, Georgia, serif; font-weight: bold; } You’ll be familiar with this: using font-weight with the ‘bold’ keyword. h1 { font-family: “Museo Slab”, Georgia, serif; font-weight: 200; } But to set a weight lighter than regular, or indeed heavier than bold, we need to resort to a numerical scale. Values for font-weight property 100 Ultra Light, Extra Light 200 Light, Thin 300 Book 400 Normal, Regular 500 Medium 600 Demi Bold, Semi Bold 700 Bold 800 Heavy, Black, Extra Bold 900 Ultra Black, Extra Black, Fat, Poster Scale roughly matches to this.
    [Show full text]
  • For Digital Advertising
    HTML5 FOR DIGITAL ADVERTISING VERSION 2 DRAFT RELEASED FOR PUBLIC COMMENT SEPTEMBER 28, 2015 IMPORTANT DRAFT RELEASE NOTES: This is a draft for Public Comment, please provide feedback to [email protected] by October 30 at 5pm Eastern Time. ​ ​ ​ You should take no reliance or action on this draft. Please wait for the final document to be published. DRAFT FOR PUBLIC COMMENT FROM September 28, 2015 to October 30, 2015 This document has been developed by the IAB Ad Operations Council and the Mobile Marketing Center of Excellence The HTML5 for Digital Advertising (HTML5_DA1) document was created by a working group of volunteers from IAB member companies. The HTML5 Digital Advertising Working Group was led by: ● Sarah Hunt (Adobe) ● Luke Wilson (Millenial) ● Cory Hudson(AOL) The following IAB member companies contributed to this document: ● Adobe ● AOL ● CBS Interactive ● Celtra ● Flashtalking ● Google ● Monotype ● Pointroll Following IAB members were part of the HTML5 Digital Advertising Working Group: AOL Flite PGA TOUR Aarki FreeWheel PointRoll Adobe Gamut SpinMedia Amazon Google SpotXchange AOL Hearst Magazines Digital Media The Business Insider Belo Hipcricket The Weather Channel BrightRoll InMobi Time Inc. CBS Interactive Mansueto Ventures Tribune Company Celtra Medialets TruEffect Complex Media MediaShift Turner Broadcasting System Cox Media Group Monotype Vdopia ESPN.com Mixpo Xaxis FindTheBest.com NBCUniversal Yahoo Flashtalking Pandora YuMe The IAB lead on this initiative Shailley Singh. Contact [email protected] to comment on this document. Please be sure to include the version number ​ ​ of this document (found on the bottom right corner on this page). © 2015 Interactive Advertising Bureau 1 HTML5 for Digital Advertising DRAFT FOR PUBLIC COMMENT FROM September 28, 2015 to October 30, 2015 ABOUT THE IAB’S AD OPERATIONS COUNCIL AND MOBILE MARKETING CENTER OF EXCELLENCE The Ad Ops Council is dedicated to improving the operational efficiency of interactive advertising.
    [Show full text]