The Fresh Egg blog

Latest digital marketing news

The Future of Typography on the Web

Intern

BlogSeries WebDesign banner1 The Future of Typography on the WebPart two of the design team’s favourite tools and technologies turns the spotlight on fonts, and the various ways they can be implemented in a website.

Fonts are the different styles of typeface used by a computer to display text.  Many of the well-known fonts, such as Arial and Verdana, come already installed with your computer’s operating system.  However, there are many available fonts which web developers like to use on their sites which don’t come pre-installed.  These are known as non-standard fonts.

What if you are looking at a website that is meant to display text in a font that you don’t have installed on your computer?  If the developer of the site hasn’t taken this into account when building it, then your computer will choose a ‘default’ font (usually Arial) in which to display the text.  This can make the site look very different to the way it was intended to.

So what can a developer do to ensure all users can see the text in the correct font?  In the past, there was limited flexibility in implementing non-standard fonts onto a website.

Images using CSS

If there was only a small amount of text displayed in a non-standard font, for example, titles or headings, then the developer could make this text display in a CSS background image instead of HTML text.

The HTML text would still be available in the source code for SEO and accessibility purposes but it would be hidden using the CSS text-indent attribute and replaced with the image.

This technique was useful in that it is fully browser compliant.  However, creating images can be a lot more time consuming than typing HTML text and every time the text changed, a new image would need to be created.  Multiple images also increase the average page load speed.

Advantages

  • Any font available to the developer could be used.

Disadvantages

  • Images increase the number of requests to the web server and therefore the time it takes for the site to load;
  • If the text needs to change, a new image would have to be created.  This can be time-consuming for multiple images.

SIFR (Scalable Inman Flash Replacement)

Another popular technique used in the past was SIFR.  SIFR is an acronym for Scalable Inman Flash Replacement and utilises Javascript, Flash and CSS to create text in a non-standard font.

SIFR logoOne advantage over creating an image is the text renders like HTML text and is therefore selectable.

The obvious disadvantage is that it relies on the users’ browser having the Flash plugin installed and Javascript enabled.  It also requires the developer to have an understanding  of Flash in order to implement it.

Advantages

  • Text is selectable in the same way as HTML text;
  • Text updates can be done in the HTML source code.

Disadvantages

  • This technique relies on the users’ browser having the Flash plugin installed and Javascript enabled;
  • The Flash and Javascript files increase the number of requests to the web server and therefore the time it takes for the site to load.

Over the past few years, other techniques have become available which are more efficient than the image and SIFR techniques.

Cufon

Cufon is a technique which uses Javascript and vector graphics to write fonts from a font file to your browser.  It involves going to http://cufon.shoqolate.com/generate/, selecting which font to use and creating the relevant Javascript files dynamically.  These files are then included in your site along with the Cufon Javascript framework.  The final step is to select which text elements are going to use this font by adding the code below.

For example, if you wanted to include all text contained in a tag with a class name of ‘my-font’, then you would add:

Cufon.replace(‘.my-font’) ;

You could also specify an id name or an HTML tag.

Cufon logoCufon offers flexibility because you can use any font style installed on your computer.  It is fully compatible in all major browsers but it does require that the users’ browser has Javascript enabled in order for it to work.

Advantages

  • Any font available to the developer could be used.

Disadvantages

  • This technique relies on the users’ browser having Javascript enabled;
  • The Javascript files increase the number of requests to the web server and therefore the time it takes for the site to load.

The following techniques are more efficient than those described above and are used by the design team here at Fresh Egg:

Typekit

Typekit is a service from Adobe which allows developers to include fonts which are hosted on their Content Delivery Network (CDN).

The process involves setting up an account and specifying which domain names these fonts will be used on.  You are then given access to two Javascript files from the CDN which need to be included in your site.  By specifying which ids, classes and/or tag names are going to use this font, the relevant text is correctly rendered on your site.

Typekit logoTypekit limits the font styles which can be used to only those hosted on their CDN and, as with Cufon and SIFR, it relies on the users’ browser having Javascript enabled in order for it to work properly.

Advantages

  • Uses a Content Delivery Network, which increases the speed at which content is delivered to the user.

Disadvantages

  • Available fonts are limited to those hosted by the Content Delivery Network;
  • This technique relies on the users’ browser having Javascript enabled.

Google Font API

Google Web Fonts logoThe Google Font API is similar to Typekit in that it also uses a CDN to host the font files.  However, the crucial difference is that it relies on CSS and not Javascript to render the font.

The process involves going to http://www.google.com/webfonts and selecting the font you want to use.

For example, if you select Advent Pro as your font of choice, the Google Font API will give you the following line of code to include in your site:

<link href='http://fonts.googleapis.com/css?family=Advent+Pro' rel='stylesheet' type='text/css'>

All that remains is for you to add the name of the font to the CSS attribute font-family in your stylesheet in the same way you would do for a standard web font:

font-family: 'Advent Pro';

As with Typekit, Google Font API limits the font styles which can be used to only those hosted on their CDN.

Advantages

  • Uses a Content Delivery Network, which increases the speed at which content is delivered to the user.

Disadvantages

  • Available fonts are limited to those hosted by the Content Delivery Network.

CSS3 @font-face

An alternative to using a Content Delivery Network to host your font files is to host them on the same server as your website.

By using the CSS3 attribute @font-face, you can link to the font files and then use the font-family attribute to specify which ids, classes and tags are going to use this font.

The example below shows how to link to the Perspective Sans font files within the assets/fonts directories of the website:

@font-face{

font-family:'Perspective';

url('/assets/fonts/persans.ttf') format('truetype');

src: url('/assets/fonts/persans-webfont.eot?#iefix') format('embedded-opentype'),

url('/assets/fonts/persans-webfont.woff') format('woff'),

url('/assets/fonts/persans-webfont.ttf') format('truetype'),

url('/assets/fonts/persans-webfont.svg#HelveticaNeue57Condensed') format('svg');

font-weight:normal;

font-style:normal;}

You may notice that the @font-face attribute is linking to four different file types of the same font.  This is to achieve cross-browser support.  Internet Explorer 8 and below supports only the .eot (embedded open type) format, whereas Firefox, Chrome, Safari and Opera all support the .ttf (true type) format.  The .svg (scalable vector graphics) format is used by Safari for iPhone and iPad while the .woff (web open font) format is supported by Firefox 3.6+, Chrome 6+ and IE9.

Font Squirrel enables developers to download hundreds of pre-packaged @font-face kits and, as with the Google Font API, this technique only relies on CSS.

Advantages

  • Any font available to the developer could be used;
  • This technique only relies on CSS making it more lightweight than other techniques.

Disadvantages

  • Four different file types of the same font are required for cross-browser support.



Share this post


comments powered by Disqus