Web Font Design

Blog Date: 
Thu Mar 29th 2012

Cleveland Digital Publishing Users Group (CDPUG)
Web F​ont Design: You Don't Have To Be Angry Anymore
March 29, 2012

In December 2011, Jan Dregalla (www.ArtByJan.com @JanBits) and I were asked to do a presentation on how to use web fonts. This font design meeting was an outgrowth of a talk that two other CDPUG members and I did on January 27, 2011, called "Web Design, HTML and Beyond." At the end of the January 2011 meeting, there were many questions about the lack of control of fonts on websites, so CDPUG Program Director Spike Radway (@SpikeRadway) solicited our assistance to present: Web F​ont Design: You Don't Have To Be Angry Anymore

The following are the notes and slides from my part of the meeting, plus some links/materials beyond what my presentation time would permit.  If you want a PDF version of my Web F​ont Design: You Don't Have To Be Angry Anymore slides, please select this link. Jan's part of the presentation is the main focus of the talk. This is because while it is now easy to add web fonts, it is now also easy to make bad font choices. Here are Jan's slides as a PDF file.

 

Web Font Design

This talk showed a brief history of font use on websites, and showed how easy it is to add web fonts to websites today. I would be interested in doing a more in-depth talk at a future WebSigCleveland.org meeting in the fall.

 

Web Font Design

During the meeting, I tweeted important links and some resources beyond the talk. I also encouraged others to add to the discussion online via Twitter using the hashtag of #CDPUG.

Here are the Tweets with links for your use: 

Web Font Design

To quote Henry Ford from his autobiography: "Any customer can have a car painted any color that he wants so long as it is black." Thinking of early computers and the first use of the Internet made me think of this quote. The user had to be happy to just have the internet as a new tool; they could not control how things looked.

Monospaced fonts, which had a fixed width between letters, was the standard for the first computers & computer terminals. These early computer screens could fill your appetite for knowledge, but were not as "tasty" (note empty ice cream cone) as today's computers. 

 

Web Font Design

I recommend reading over the History of the World Wide Web section on Wikipedia. I found it interesting to see the orginal writing from August 6, 1991, from Berners-Lee, introducing the idea of the World Wide Web project on the alt.hypertext newsgroup. The focus was on the importance of an easy way to share information. This is way before the ideas of design that are the focus of today's talk. 

The World Wide Web Consortium (W3C) is the organization resonsible for creating the open standards for the World Wide Web.  Its mission: The W3C mission is to lead the World Wide Web to its full potential by developing protocols and guidelines that ensure the long-term growth of the Web.

With the January 14, 1997, recommendation by the W3C for HTML 3.2 to include the <font> tag, website developers now had the abilty to change the fonts used on webites, but...

 

Web Font Design

...the method used by the HTML <font> tag led to very complex markup that was very difficult to manage. With the W3C recommendation, in December 18, 1997 (less than a year since the <font> tag recommendation), the <font> tag became deprecated in HTML 4.0.

Note in the graphic above how the amount of HTML markup to declare the font is more than that of the content it modifies.  The W3C leadership knew that there had to be a better way.

From personal experience, I can remember that for what felt like a long time after the <font> tag became deprecated, it was still being used.  This was because it was supported by the browsers of the day (unlike the newer methods). Also, I remember that products like Macromedia (now Adobe) Dreamweaver still used the <font> tag in the early 2000s. 

 

Web Font Design

Today we use Cascading Style Sheets (CSS) to remove the design elements from the content elements. The W3C states: "Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents." It can be used with the curent forms of HTML (HTML4, XHTML, HTML5). 

CSS has the advantage of making it easy to update the design all your HTML pages from a remote CSS file, plus using responsive website design techniques, a website designer can have the design change based on the device being used. For example, a smartphone, a tablet, and a laptop can all get different design layouts. sosAssociates.com is designed using this technique. 

 

Web Font Design

Isn't it exciting!!! (sarcasm) In the early years of CSS, web designers now had more than one "flavor" of font to pick from that could be controlled in the CSS file. (Designers are never happy -- now that the issues with the HTML <font> tag were gone, they were concerned about the limits of available fonts in CSS.) 

 

Web Font Design

This brings us to where we were at the CDPUG meeting: "Web Design, HTML and Beyond." Designers historically have been limited to the fonts on the local computers of the website visitors, with no control and only a limited number of choices. Luckily, this is no longer the case. 

Here is a 2008 article about fonts common to all versions of Windows & Mac.

 

Web Font Design

In late 2010, a revolution had begun! New font services offered many opportunities! 

 

Web Font Design

Take a look at this article from Smashing Magazine: Review of Popular Web Font Embedding Services

This article provides you with links and reviews of the top font embedding sevices. Thousands of tasty fonts to choose from!

 

Web Font Design

At the CDPUG meeting, I discussed how to use two font embedding services and a font download system: 

 

Web Font Design

Go to Google Fonts to learn the five easy steps to add their web fonts to your website. 

The Google Fonts website makes it easy, but if you want addtional assistance, check out this article: How To Use Google Fonts In Your Next Web Project & Why You Should

Web Font Design

Typekit: has three simple steps to embed web fonts.

 

The following web page in an iFrame demonstrates how the following HTML used Typekit: 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://use.typekit.com/gtr4jem.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<style>
h1 { font-family: "Alpha Echo", cursive;}
h2 { font-family: "GoodDog New", sans-serif;}
</style>
</head>
<body>
<h1>H1 - Alpha Echo</h1>
<h2>H2 - GoodDog New</h2>
</body>
</html>
 

 

Here is an example of Typekit fonts.

 

 

Web Font Design

Font Squirrel lets you download free fonts to use on your website.

 

Web Font Design

CSS3 Font Properties

  • @font-face - A rule that allows websites to download and use fonts other than the "web-safe" fonts

These are not supported yet in most browsers, but hint of future possibilities : 

  • font-size-adjust - Preserves the readability of text when font fallback occurs
  • font-stretch - Selects a normal, condensed, or expanded face from a font family

 

Web Font Design

Here are some CSS1 text properties that now have more significance, since website designers can finally control which fonts are used on websites:

 

  • letter-spacing - Increases or decreases the space between characters in a text
  • line-height - Sets the line height
  • word-spacing - Increases or decreases the space between words in a text

 

Web Font Design

Happy fonting.

Comments

Submitted by Jan D on
Comment: 

Enjoyed different perspectives together. Worked well. Looking forward to trying Google, Type Kit & Font Squirrel.

Add new comment

Optional. Please enter your email address. The current settings will hide your email address from your posted comment, but will allow the administrators for sosAssociates.com to contact you via email if needed.
Optional. Please enter your phone number. The current settings will hide your phone number from your posted comment, but will allow the administrators for sosAssociates.com to contact you via phone if needed.
Please share your Twitter name. This WILL be seen by all.
Please share your website address. This WILL be seen by all.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.