Web Typography 101

Getting non-Web-safe fonts a Web page

Typography is a powerful artistic tool to impact your audience. It can completely change the look and feel of a layout and set a specific mood. Unfortunately, the Web has had a long struggle with Typography due to both technical and legal issues. However, very recently, some powerful break-thoughs have been made to free up Web designers to be more expressive with their use of type on the Web.

Web Fonts, Typography, and SEO

 

Typography is a powerful artistic tool to impact your audience. It can completely change the look and feel of a layout and set a specific mood. Unfortunately, the Web has had a long struggle with Typography due to both technical and legal issues. However, very recently, some powerful break-throughs have been made to free up Web designers to be more expressive with their use of type on the Web.

Before delving into the specific issues, I'd like you to read an excellent article on Web-based typography. Reading through this should help us to realize our end goal.

Here it is: Choosing the Right Font: A Practical Guide to Typography on the Web

The Web Font Issue

In 1996, Microsoft headed a project that created a standardized list of Web-safe fonts. Below is a list of some of those fonts. You may recognize most of or all of them.

  • Arial
  • Comic Sans
  • Times New Roman
  • Verdana
  • Georgia
  • Impact
  • Courier New

So why create this standard? As you know, there are thousands of fonts out there, but when it comes to the Web, there are two main issue preventing all of those fonts from being freely distributed. One has to do with licensing - the terms of use of a particular font - and downloadability - actually getting fonts downloaded onto your computer in order to view them in the context of a Web page. I'll explain these two issues a bit more in detail.

Licensing

Just because you have a font on your computer, it doesn't necesarily mean you have legal permission to distribute it or use it on the Web. Some fonts can be purchased for personal use, others purchased only for commercial use, but may not be resold, others are free to obtain, but only for personal use, others are just plain free. As a result, we are not technically allowed to post whatever font we want on a Web site. It's a similar situation as using Google images in our reports or presentations. That is technically copyright infringement, but the likelyhood of running into a legal confrontation is very slim. However, if you are doing any commercial work, in which you are being paid, it is not at all a good practice to use any materials in your design work that you do not have the rights to or give proper credit to. So therefore, when creating a Website, the standard the Microsoft set about provides us with some base fonts that are licensed for all to use.

Downloadability

The other issue is that, even though you may have a font on your computer, and you decided to create a web page with that font, it does not mean someone else viewing your site from another computer will have that same font installed. In order for that person to see your site the way you intended it, he will need to download a copy of that same font onto his local computer.

Past Solutions

To solve this issue, many solutions have been implemented in the past and even today, but all having their own unique limitations. Some more popular methods, pior to some recent breakthroughs, were image-based fonts and Flash-based Fonts.

Image-based Fonts

With image-based fonts, the text would actually be rasterized, meaning, the text would be converted into an actual image. This means the text you see isn't true, authentic text, but just an illusion. But why does that even matter? Well, there are several short-comings, but editability tends to be the main one.

DISADVANTAGES OF IMAGE-BASED TEXT

  1. In order to edit that image based text, you will need to edit the original design file (usually a PSD or AI) and re-exporting the image and then uploading it to the web. This take several minutes, whereas true text on the Web can be edited in a matter of seconds.
  2. Another short-coming is that you cannot highlight and copy the image-based text. That means you can copy and paste it into another document. Also, if you are using a text-to-speech program (which is a way of having the computer read out-loud text that is highlighted) you will not be able to read the image-based text.
  3. Image size is another factor. Raster-based content will almost always take up more memory than text-based content. For those of us who remember the days of dial-up, it was a common occurrence to have pages take over a minute, just to load all the images on the page. You can still see today, even on high-speed, larger images load vertically down the screen. Audio and video are even bigger memory hogs.
  4. And the fourth strongest disadvantage has to do with SEO (search engine optimization). I will discuss this later on, but in short, the less true text you have in your document, the weaker it will be in terms of SEO.

BENEFITS OF IMAGE-BASED TEXT
So are there any benefits to using image-based text? Yes, but the list is short.

With image-based text, you can use any font you'd like, in any format, with any kind of spacing, and with any kind of effect you'd like. You can apply gradients, drop shadows, bevels, semi-transparency, and so on to the text. It is not bound aesthetically to the limitations of CSS and HTML.

Flash-based Fonts

Using Flash as a solution for Web text may pose even more issues than image-based. But it is still used so I think it's fair to mention it. As we have discussed in past lessons, Flash has been an issue of contention, especially since the Flash-banning iPad has been declared the "best web experience around" by Apple.

DISADVANTAGES OF FLASH-BASED TEXT

  1. This solution obviously requires Flash, both on the authoring side and the user side. For the author, he/she must have a copy of either Adobe Flash or Dreamweaver. Dreamweaver offers the ability to create Flash-based text without having the Flash program. However, if you don't own Adobe Dreamweaver, you must create the font in Flash.
    On the user end, you must have the Flash plugin installed on your browser. If you are using a mobile device such as an iPhone, iPad, or Android, Flash content will not appear, thus, your text will not appear.
  2. SEO, has been a long time issue with Flash-based content and sites, mostly because search engines are not able to scower the inner contents of Flash elements, and thus cannot index their findings. The more text that is contained inside of Flash elements, the less that is visible to the search engines.
  3. Like with image-based text, you will need to make your edits within a proprietary program, which could take several minutes after editing, saving, and re-uploading.

BENEFITS OF FLASH-BASED TEXT

So, are there any advantages over image-based text or plain text? Actually, yes.

  1. Animation effects can be easily achieved using Flash. And these animated effects can be as complex as you'd like, including particle effects, lighting effects, transformations, blurs, and the list goes on.
  2. Since Flash is vector based, you may actually get smaller file sizes than image-based text, even with animation.
  3. And like image-based, you have the option of choosing whatever font you'd like, in any arrangement.

SEO

As a Web designer, SEO should be a high priority. SEO stands for Search Engine Optimization, which basically means applying techniques that will get your site to show up higher in search engine results. Since search engines are all text-based, having relevant, searchable text on your site is extremely important. That is why we want to avoid containing our text inside content such as images or Flash, where the search engine crawlers are unable to read.

Although there are hundreds of rules and tricks that can help your search engine score, one of the best ways to score higher is to place important text inside <h1>,<h2>, and <h3> tags. Since people tend to use image or Flash-based text as headers, they tend to avoid placing that content inside <h> tags.

So, if possible, use the <h> tags for important text and just use CSS to style it whoever you'd like.

Web Font Breakthroughs

So, with all the pros and cons of image and Flash-based solutions, you'd think there would be some better options out there. Well, as of the past year or so, there have been several true text based solutions for displaying non-Web-standard fonts.

Webdesign Tuts has posted an article with several new non-image or Flash based solutions for displaying non-Web-standard fonts on your Web page. Although they list many solutions, the main ones I recommend are the Google Font API and Font Squirrel.

Here is the article. Please read through it, but don't worry about following any of the links or installing any yet. Just read about the basics of each.

Google Font API

Google has offered a spectacular solution to the Web font dilemma, by licensing a growing list of fonts that you can embed directly into your website that will be viewable on all browsers without the use of images or Flash. Awesome, right? The only catch is that your are limited to their list, and there is just a bit of coding involved.

Net Tuts has provided a great video tutorial on how to implement these fonts into your site. Please watch and follow along with the video. The video is short and sweet, so don't worry.

Here is the video tutorial.

Please use jsbin.com to type up your code and post your link in the Blackboard discussion board "Week 6 Google Fonts".

Have fun and email me if you have any questions! -> jearley1@ivytech.edu

HOMEWORK

  1. Read the article Choosing the Right Font: A Practical Guide to Typography on the Web
  2. Read the article The Web Designer’s Guide to Font Replacement Methods.
  3. Follow the video tutorial Quick Tip: Google Fonts API: You’re Going to Love This and code it out using jsbin.com.
  4. Go onto the Week 6 Discussion board on Blackboard and follow the instructions there.

Questions?

As always, please email me if you have any questions! jearley1@ivytech.edu