GWDA223 Intermediate Web Page Scripting :: Art Institute

Week 7: Web Typography

System Fonts

There are some basic fonts found on all Windows machines, and others found on all Macs. These should be included near the end of your font stack if they are not your first choice.

  Windows Mac
Serif Times New Roman Times
Sans-Serif Arial Helvetica
Monospace Courier New Courier

Font Stacks

Font stacks are prioritized lists of fonts, defined in the CSS font-family attribute, that the browser will cycle through until it finds a font that is installed on the user's system. This means that you can use a lesser-known font such as Gill Sans—make that your first choice—but also control to some degree what the browser shows if a user does not have Gill Sans installed on their machine.

  • A font stack is comprised of two or more fonts separated by commas.
  • Fonts with more than one word in the name need double quotes around them.
  • The fonts are ordered by first choice followed by lesser-desired choices.
  • The font stack typically ends in a generic call to the type of font desired, such as "serif" or "monospace". This is a last-chance effort to control the font style.
  • There are operating systems other than Windows and Mac, such as Linux. They may have the fonts you specify earlier in the stack, but will certainly have some basic serif, sans-serif and monospace fonts.
Example

body {
    font-family: "Gill Sans", Arial, Helvetica, sans-serif;
}

Article

Better CSS Font Stacks

Web Fonts

Exercise: Using Google Fonts

A Google font is used for all of the headings on this website. Google fonts are free, are very easy to use, and can assure that everyone can see just the font you chose. There are hundreds of fonts available, and more are added all the time.

The drawback? You cannot use just any old font you want to with this technique.

Download
  1. Download and unzip the basic site folder linked below. It contains a page of content about web fonts. The page is linked to a stylesheet that has two rules with no declarations yet, one for body and one for all the headings. You will be selecting a Google font for each of those two purposes and implementing them in your HTML and CSS.
  2. Rename the site folder as google-fonts.

Web Font Exercise Files

Selecting Google Fonts
  1. Check out the link below and navigate around to appreciate the variety of fonts available from Google. You'll notice that as you scroll down, more are added to the bottom of the list.

Choose a Google Font

Google Fonts home page

  1. Go through and look at a bunch of the available fonts. Select a decorative one for your headings, and click the blue Add to Collection button for it. Select a plainer, more legible font for your main body copy, and add it to your collection.
  2. Click on the Review button in the bottom-right corner of your browser window.

Google fonts review of two fonts

You have the option to display either one as Paragraph or Headline text.

If you don't like what you've chosen, click the Choose button, remove a font or two, and select other(s).

Getting the Google Font Code and Installing It on Your Site
  1. When you have two great fonts that work well together, click the Use button in the bottom right. Don't simply use the same fonts I chose.
  2. Scroll down and look at boxes 3 and 4.

oogle Fonts use the fonts

  1. Copy the line of code from box 3 and paste it into the <head> element of your index.html file. This code links to the stylesheets for your fonts on Google's web server.

Google Font link element stylesheet

Google Fonts add link element to head element

  1. Create a site definition for your google-fonts folder in Dreamweaver.
  2. Define a font stack for each of the CSS rules in your stylesheet. Use fonts which are similar to your Google Font choices. Remember to use quotes around font names with more than one word in them. Don't simply one the ones in my example. Try the Font Stack Builder in the link below.

Tool: Font Stack Builder

font stack for body and headers CSS

Using the Google Fonts in Your CSS
  1. Add your Google Font names at the beginning of your font stacks.

Google Fonts added to font stack in CSS

  1. Test index.html in a browser.

testing web page with Google Fonts in a browser

  1. Adjust your font sizes, colors and margins so that your fonts look really good. Again, don't simply use my settings. Decide what looks best for your font choices.

adjust CSS sizing box model for Google Fonts

final web page layout with Google Fonts

Using @font-face

The @font-face CSS technique allows you to upload font files on your own site and refer to them in your stylesheets. There are many ways to accomplish this, so I will just show you a couple.

FontSpring

FontSpring sells typefaces, and you can buy them in packages with or without the webfont files. Below is a link to the display page for Primca Nova, one of the fonts they sell which is currently very popular with web designers:

Proxima Nova

If you purchase the webfont files, you get the font with the following file extensions (as well as the OpenType files for print):

  • eot—Embedded OpenType, for Internet Explorer
  • svg—Scalable Vector Graphic, for Safari, Chrome and Opera
  • ttf—TrueType Font, for Firefox, Safari, Chrome and Opera
  • woff—Web Open Font Format, for most modern browsers, but not the older ones

These are the file formats you need to upload for each of the font faces you intend to use. They provide @font-face support for most versions of most browsers in use today. I keep them all in a folder named webfonts within my site folder.

@font-face web fonts folder

Then you need to do two things in your stylesheet. First, write the @fon-face rules for each of the typefaces you plan to use. The @font-face rule for each typeface has a declaration for each file type available for the browsers.

@font-face rules declarations CSS

Having given each of your typefaces a name in the @font-face rules, go ahead and start using those names in your regular CSS font stacks, as you would with any other font name.

@font-face rules declarations CSS

Because you have theoretically purchased and now own these fonts, you avoid any typeface piracy or licensing issues.

Font Squirrel

Font Squirrel has two main features which are free. One feature allows you to download any one of over seven hundred fonts for commercial use.

FontSquirrel home page

FontSquirrel individual font page St. Marie

Each one has a distinct license arrangement so be sure to read up on them.

FontSquirrel icense agreement for St. Marie

Several of these fonts have a link for the @font-face kit. You would get to download each of the font file types recommended for cross-browser support.

FontSquirrel @font-face kit for St. Marie

If you want to view only the fonts they have which offer @font-face kits, click the @font-face Kits link in the main menu.

FontSquirrel @font-face kits page

You may also upload fonts from your own computer. Click the @font-face Generator link in the main menu.

FontSquirrel @font-face generator page

To stay on the safe side of the law, make sure to only upload fonts from your machine that you know you have licensing for.

Exercise: Using Font Squirrel
Download
  1. Download and unzip the basic site folder linked below. This is the same file you downloaded before for Google Fonts, so if you still have that ZIP file, unarchive/extract it again. You will be selecting fonts on your computer and implementing them in your HTML and CSS.
  2. Rename the site folder as fontsquirrel.

Web Font Exercise Files

  1. Find two fonts on your computer which you would like to use, one for headings and one for paragraphs. One way to do this is to open Microsoft Word and experiment with how fonts look there. Make note of the names of the fonts you want to use.

selecting fonts with Microsoft Word, Bodoni and Candara

  1. Go to the @font-face Generator page at FontSquirrel.com.
  2. Click on the Add Fonts button, navigate to one of the font files you have chosen, and click OK.
    • On the PC: fonts can typically be found in C:\Windows\Fonts. You may need to copy-and-paste from here onto the desktop so that FontSquirrel can see the files.
    • On the Mac: fonts can typically be found in /System/Library/Fonts/.

FontSquirrel @font-face generator add font

In some cases you may need to select a different font because the copyright holder has not agreed to this kind of licensing:

FontSquirrel font blacklisted by copyright holder

When you've successfully uploaded a font for conversion, it will be listed under the Add Font button.

FontSquirrel font succesfully uploaded for webfont conversion

  1. Get both of your fonts uploaded, select the Optimal radio button, and check the Agreement checkbox (in the real world, make sure you are on the right side of the law.)
  2. Click on Download Your Kit.

FontSquirrel download your @fnt-face generator kit

  1. Wait for the fonts to be generated, then save the ZIP file that is offered for download.
  2. Unzip the ZIP file and take a look at the files you've been given.

FontSquirrel @font-face kit contents on windows

  1. Note that you've also been given a couple of HTML files and a stylesheet as demos. Take a look at the HTML files in a browser, and stylesheet.css in Dreamweaver.

FontSquirrel web font demo Constantia

FontSquirrel web font demo Candara

FontSquirrel demo code CSS stylesheet

  1. Create a site definition for your fontsquirrel folder in Dreamweaver.
  2. Copy the two @font-face styles from the stylesheet.css file provided by Font Squirell into the styles.css file located in your fontsquirrel folder.
  3. Locate each of the .eot, .svg, .ttf, and .woff files provided by Font Squirrel. Copy and paste them into a new folder named webfonts in your fontsquirrel folder.

webfonts in windows explorer

  1. Back in styles.css, add the webfonts folder name to the paths of the font files (look for the url() values.)

FontSquirrel @font-face rules with updated paths

  1. As before, create font stacks for your body and headings. Then add the respective font names from your @font-face rules at the beginning of each stack.

@font-face fonts stacks in CSS

  1. Test index.html in a browser. Make sure your web fonts are appearing. If not, fix your code.

@font-face web fonts in action in the browser

  1. As before, add some CSS to make your text look really good.

@font-face plus nice type styles in browser css

Typekit

Typekit is a service similar to Google Fonts. It is a hosted font service, meaning that they keep the font files on their servers.

Tyepkit has a free plan which has a limited number of fonts available, limited usage, and you have to display a Typekit badge on any site that uses Typekit fonts.

Typekit also has subscription services that do not require this badge and which allow for more font choices and more website uses.

Typekit pricing

After you sign in and find a font you like, you click the Add to Kit button.

Typekit font page add to kit button

Once you've selected your fonts, use the Typekit Editor to fine-tune your choices. Do this for each of your fonts listed on the right side.

Typekit editor

When you click on the Publish button, click the Embed Code link to get the markup to paste into your HTML pages. Typekit creates an external JavaScript for you that renders your fonts as requested.

Typekit embed code JavaScript link

Finally, click on the Using fonts in CSS link. You will given some examples of what to call the font in your stylesheet. Do this for each of your fonts.

Typekit using fonts in your CSS

Other Web Font Systems

There are a number of other systems out there for creating custom web fonts. The ones below are old and now considered out-of-date, but you should know about them.

sIFR

Scalable Inman Flash Replacement (sIFR) dates back to 2005. sIFR embeds a font in a Flash element that displays the text, pre-empting the need for a font to have been manually pre-installed on a user's system. Unlike graphical text (for example, an image file created by Photoshop,) sIFR text can be scalable withour pixelation, and it can be selected on the screen.

sIFR requires not only CSS, but Flash and JavaScript to generate custom fonts in the browser. Both Flash and JavaScript must be enabled for the fonts to be viewed. Some people disable JavaScript, and iDevices (such as iPhone) don't support Flash.

Cufón

Cufón converts font paths to vector graphics and then renders the fonts in the browser using JavaScript. This was used extensively until @font-face had broader browser support.

A disadvantage in using Cufón is the requirement that the embedded font's license allow its distribution in unencrypted form, which many commercial fonts expressly forbid.

Styling Your Web Type

A very important part of designing web sites is creating beautiful typography. Typography principles for web are similar to print, but the control for the typefaces resides in a separate document from the content.

The Reset Rule

The goal of a reset rule or stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. All browsers seem to use differing measurements for these building blocks. To get better cross-browser consistency, you reset various measurements in two steps:

  1. Set all paddings and margins to zero, and put in some basic across-the-board szing for other properties.
  2. Specify new measurements for selectors in your stylesheet one-by-one.

Eric Meyer has provided a generic set of reset rules at meyerweb.com which is very popular with web designers. Take a look at the rules, and get a feel for what they accomplish. As Erci states, " I don't particularly recommend that you just use this in its unaltered state in your own projects. It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline." So for your own web design project, you would begin with these and then build up.

Styling Basic HTML Selectors

All stylesheets should have CSS rules controlling the basic CSS selectors for text-containing markup. At the very least, you should define the font-family, font-size, font-weight, margins, padding, text-align, and color for each of the following HTML elements:

  • body
  • h1, h2, h3, h4, h5 and h6
  • p
  • ul, ol, and li
  • blockquote
  • th, td, and caption
  • a:link, a:visited, a:hover, and a:active

Styling Type in Different Page Sections

You may find that your styles for content in different page sections needs to be different in some way. This is when we start using compound selectors in our CSS to create more specificity.

For example, you may have your page divided into header, sidebar, main, and footer areas. You can create each of these inside its own div with a unique ID.

<header></header>
<aside></aside>
<article></article>
<footer></footer>

Each of these section might have headings, paragraphs, lists, etc. You can define distinct type styles for each area by starting your selector with the div's ID name. Let's say I wanted paragraphs to look different in the main section from how they look in the sidebar. I would define them something like this in the CSS:

aside p {
    font-family: Courier, "Courier New", monospace;
    font-size: 12px;
}

article p {
    font-family: Verdana, Arial, sans-serif;
    font-size: 14px;
}

Exercise: CSS Boilerplate

In this exercise you're going to really concentrate on creating a page with beautiful typography and no images.

Download
  1. Download and unzip the css-boilerplate file linked below.

css-boilerplate

  1. Go into the example folder, and open index.html and form.html in a browser. Notice how bland but highly organized they are.
  2. Study the HTML code for each page in Dreamweaver.
  3. Study the CSS in each of the stylesheets located in the example folder, including those inside the lib folder. Notice that there is a reset stylesheet similat to Eric Meyer's.
  4. Get a really good grasp of how the stylesheets currently control various aspects of the two HTML pages.
Style the Two HTML Pages
  1. Create a site definition in Dreamweaver for the example folder inside the boilerplate folder.
  2. Select two or more fonts to use across both HTML pages (index.html and form.html.) You may use the standard font stacks, or—better yet—use Google Fonts or @font-face to incorporate more specialized fonts.
  3. Set up font styling for all of the text-containing elements in each of the page sections. Make sure that your styling for form elements goes into the forms.css file, and all other CSS rules go into typography.css. This means that you will be added considerably to the existing CSS but not touching the HTML.
  4. Your final two page designs should look quite different from the originals, look b gprofessional, and have some consistency between them. Do not add any imagery. Spend some quality time and do a great job on this one.
CSS Examples

The page linked below leads to myriad examples of how you can adjust the typography in your pages. Don't simply use what you find here, but use it for expolation and reference.

CSS Examples

Dropbox go to eCompanion

Upload the following by midnight of our next class day:

Week Assignment File Name
7 Google Fonts google-fonts.zip
FontSquirrel fontsquirrel
.zip
CSS Boilerplate boilerplate
.zip

Assignment Details

Google Fonts

Complete the activity described to the left under "Exercise: Using Google Fonts." ZIP up the google-fonts folder.

FontSquirrel

Complete the activity described to the left under "Exercise: Using FontSquirrel." ZIP up the fontsquirrel folder.

CSS Boilerplate

Complete the activity described to the left under "Exercise: CSS Boilerplate." ZIP up the boilerplate folder.