Skip to content Skip to navigation

Creating Proportional Typography Using Webfonts on Sites

It's a great time to be a web designer, as we have this explosion of web fonts at our finger tips. Tools such as Google Web Fonts make these available for free, and integrating them is easy on your site, even on sites.stanford.edu! In this tutorial, I'm going to go through adding a webfont to your Drupal site using CSS Injector (available on sites.stanford.edu), and developing a proportional typographic system for your site.

First things first, find a fun font that you like! I use Google Web Fonts extensively, as they make it so easy to add fonts to your site. One thing to look for is how many different styles are available in the web font you are choosing, and select the least number (but enough to be useful) of those styles to import into your site. Every web font style you add increases page load time, so bear that in mind.

For this exercise, I am going to use Source Sans Pro, as it is the recommended sans-serif webfont for Stanford sites. In Google Web Fonts, once you find a font you like, add it to your collection, then go to the "use" step to choose which styles you want to include in your webfont import.

Source Sans Pro

In this example (above) I have selected to include the Book, Normal, Normal Italic, and Semi-Bold styles. To grab these styles and import them into your site, use the @import option to grab the snippet of code to add to your CSS Injector rule (we will create this next).

Import source sans

There is one important thing you need to change in this URL for this to work on sites.stanford.edu! You must change the "http://" to be "https://" for this to work, as Sites relies on a secure connection.

OK! Next, we make a new CSS Injector rule on our site. Log in as an admin, go to Configuration > Development > CSS Injector (see below). If you don't see this module here, then you might need to enable CSS Injector from your Modules page first.

CSS Injector in admin menu

Once you've gotten to the CSS Injector section, create a new CSS Injector rule called "Custom Fonts" (or something to help you remember what it is). Paste the @import code (with the https://) into your rule and "Save and Continue Editing" (see below).

Adding CSS Injector rule

Now that you've imported your font, you can use it! Google provides example code for how to call on this font from your CSS. Here's one way to do it:

body { font-family: "Source Sans Pro", Arial, sans-serif; }

The trick with using CSS Injector though is that you have to be more specific in order to override a theme setting. So, for example, if you wanted to set this font for all header styles and the paragraph text, you will need to add specificity to your CSS. For example:

Instead of saying:
h1 { font-size: 3em; }

You will need to say:
html h1 { font-size: 3em; }

Now the trick to establishing a proportional typographic system is to first establish a base font size in pixels, then use ems to create all the additional font size definitions. Ems base themselves proportionally off of the initial pixel font size, thus you can create a type system that is proportional. That way if you change the base font size later, all the other sizes will scale proportionally. Here is my final CSS Injector rule:

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic,300);

/* set root font size in pixels */
html body { font-family: "Source Sans Pro", Arial, sans-serif; font-size: 12px; } 

/* set font for all headers */
html h1, html h2, html h3, html h4, html h5, html h6 { font-family: "Source Sans Pro", Arial, sans-serif; } 

/* set proportional font sizes in ems */
html h1 { font-size: 3em; }
html h2 { font-size: 2em; }
html h3 { font-size: 1.5em; }
html h4 { font-size: 1.25em; }
html h5 { font-size: 1em; }
html h6 { font-size: 0.9em; text-transform: uppercase; }
html p { font-size: 1em; }

/* minimal extra styling */
html h1, html h2, html h3, html h4, html h5, html h6 { color: black; font-weight: 600; }
html h4, html h5, html h6 { letter-spacing: 0.02em; }

And here's how it turned out:

Proportional Type system

Categories: