Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Fonts on the Web - a guide to web fonts


Published on

Web fonts offer great flexibility for brands and designers to use a wider range of fonts online.

Using a custom font on the web was only achievable through various techniques, all with certain limitations. Most designers opted to stick with Web Safe Fonts – which are fonts that are already installed by default across different operating systems.

Published in: Design, Technology, Art & Photos
  • This is a clear and great presentation that perfectly matches its title.
    Thank you Prototype Interactive
    Are you sure you want to  Yes  No
    Your message goes here

Fonts on the Web - a guide to web fonts

  1. 1. W fo
  2. 2. Web Safe Fonts Web FontsWhy should you use web fonts
  3. 3.  The pastUsing a custom font on the web was only achievable through various techniques, all with certain limitations. Most designers opted to stick withWeb Safe Fonts – which are fonts that are already installed by default across different operating systems.  The Web-Safe fonts Arial Georgia Verdana Courier New Times Trebuchet
  4. 4. Some previously popular techniques to use custom fonts on the webUsing images Cufon – Using Javascriptinstead of text – sIFR (Scalable Inman Flash code to render SVG font paths Replacement) – Requiring Javascript and via VML technology, thisThis technique Flash, which makes it heavily dependent on technique works very good inrequires images to be a browser plugin – usually slow and most aspects and is widelyplaced instead of text, seemingly unreliable. This technique was popular and very simple todifficulty for web very popular before improved techniques implement. However it stilldevelopers, making like Cufon came along, however, its suffers from limitations like non-the website not implementation was not always selectable text and undesirableSearch-engine friendly straightforward and it also made web pages effects on body copy (text slow to load due to the amount of separate paragraphs).and the text not web requests needed.selectable. This alsocauses many smallweb requests to go Background Image Replacement – Very similar to using imagesback to the server for instead of text, however this technique is using CSS background-image properties in order to hide the actual text from display and show instead an image containingeach piece of text, the desired text. This technique although SEO friendly, still poses difficulties formaking web pages to developers – the text is not selectable and is not a practical method. It also slowsload slower. down a website’s load time, just like its image replacement counterpart.
  5. 5. WEB FONTS are h o w do they work
  6. 6. Web fonts allow designers to chose from a wide variety of fonts as well as1. More creative freedom convert their own fonts to web fonts. 2. Easier to implement This also allows brands to use corporate fonts on their online3. Is using plain text properties, this especially was a 4. Search engine friendly challenge previously where most brands had to chose from the limited5. More accessible for screen readers number of web safe fonts. 6. Easy to select, copy and paste Web fonts further offer a lot more7. Can be scaled without pixilation advantages such as being search 8. Easier to translate into languages engine friendly, are easier to translate to other languages as well as the9. Licensing made easy by using availability of many font services thatweb services make licensing much easier than before.
  7. 7. WOFF (Web Open Font Format) SVG (Scalable Vector Graphics) EOT (Embedded Open • Emerging standard format – Type) developed by Mozilla and several other font foundries. • XML Language used to create vector graphics. • Font format developed by • Adopted as standard by W3C in Targets mobile platform. Microsoft. Targets Internet 2010. Explorer (IE) • Supported by Mozilla Firefox 3.6+, Google Chrome 5+, Opera Preso and IE9 (since March 2011). • Not supported by Safari.Combining all three formats, web fonts are currently supported by over95% of web browsers which makes it available to large number of users.
  8. 8. Traditional WayFonts were designed for print media – therefore not optimized for screen display. Forward Slide for the Web Fonts way ---->
  9. 9. The Web Fonts DifferenceWith the use of Web Fonts, improved rendering techniques and font optimization for theweb, web pages can now benefit from a much improved rendering approach, and canalso make use of the operating system’s Text Anti-aliasing engine.This means a more readable text display and seamless rendering performance for WebFonts on any web page. Text Anti-Aliasing Each operating system uses their own algorithm for text anti-aliasing. At the moment, MAC OS X renders text using Sub-pixel anti-aliasing, however Windows using different techniques depending on their OS version, of which the DirectWrite algorithm is the newest one, available on Windows 7.
  10. 10. Several services currently help web designers and developers to access a huge collection of fonts and implement on their websites and Compare and Decide ! web applications The site “@font-face faceoff” ( ) provides a useful comparison of different Web Font delivery services, depending on their payment model, collection size, technology use, etc.This comparison site excludes and
  11. 11. ools below will help anyone get started with embedded Web Fonts on their web sites :      (browser samples)If you already have a web license for your font, you can try the @font-face generator service at
  12. 12. Current Limitations Challenges Practical Arabic web fonts limited on Windows Arabic written from right-left – poses challenges to rendering to Arial, Tahoma, Andalus & Arabic engines and libraries. Typesetting. On Mac – Geeza Pro Arabic fonts require reshaping, i.e. determining and selecting Font design is compromised with images used shape of a letter depending on its location in the word. for major headlines & default Arabic font for larger bodies of text Arabic rendering engines also need to support diacritics – accents and marks that are inserted around the letter to help the reader in pronouncing words. Hefty price to meet all these requirements. The Future Apart from technical issues – Arabic font is not as well Once support for Arabic font rendering is developed as its Latin counterparts. consistent across all browsers – we shall see explosion in services and foundries offering Getting Arabic to the web quality Arabic web fonts Past methods: Image replacement techniques, Cufon and sIFR Improvement in Arabic font rendering might Recent methods: CSS3 @font-face property, Firefox4 and IE9 also encourage Arabic web content to flourish. render Arabic web fonts – Chrome soon to followAn example of mainstream use of @font-face on an Arabic website can be seen on BBC Arabic the website on Firefox 4+ and Internet Explorer 9+ yields satisfying results. The headlines and body text are bothutilizing an Arabic font specially created for BBC Arabic called BBC Nassim.