Skip to content Skip to navigation

Overriding Open Framework Styles: Customizing your typography

In this post, I continue my series on how to override Open Framework's default styles to get a more custom look-and-feel on your site. Last time we looked at how to override the main menu styles. Today, we'll look at how to customize your typography.

Typography is one of those things that can really make your site stand out from the crowd. By spending time adjusting font size, weight, line height, and letter spacing, we can get a really beautiful website, even when the site is mostly composed of text. We can also explore using custom web fonts to add that special flair to our site.

Before we dive in, make sure you are familiar with the steps we took last time in using Firebug (or Chrome dev tools) and CSS Injector. Here's another post I wrote that introduces CSS Injector and Firebug in more detail.

Getting set up

In order to customize your typography, you'll want to first create a page where you can see all the examples of your typography in one place. This will help aid you in theming your site. I like to set up headings, paragraphs, and links in a somewhat realistic pattern to simulate an actual page. Here's the code I typically use to test out all my custom typographic styles (in Drupal, the <h1> would be automatically created for you as the page title):

<h1>Typography Demo</h1>
<h2>Heading Two</h2>
<p>Duis mollis, <strong>example bold text</strong> luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus.</p>
<h3>Heading Three</h3>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus.</p>
<h4>Heading Four</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus.</p>
<p><a href="http://people.stanford.edu/meganem">Example link</a></p>
<p><a class="btn" href="http://people.stanford.edu/meganem">Example button</a></p>

And here's what that looks like by default on my site:

Typography demo page - default

Create your CSS Injector rule

Because typography applies to my site as a whole, I might just want to add the styles for this into a "General Styles" CSS Injector rule. Either open your existing CSS Injector rule or create a new one. I like to first add a comment outlining what I am adding to my rule, like so:

/* Typography and Links */

By including descriptive comments, you will stay organized as your CSS grows.

Choosing a custom web font

For my site, I'd like to use a custom web font to add that special sauce to my look-and-feel. The easiest way to do this is to visit Google Web Fonts. This is such a great resource, and it's free!

What I like to look for in a web font is flexibility of style options within the font. For example, what we are looking for should be a font with multiple styles at different weights (bold, semibold, regular, light). This will give us the most flexibility in our design. As you browse, add fonts you like to your collection. Once you have a few fonts you like collected, review your collection and decide which one(s) you want to use. For this example, I am going to use a font called Lato.

Now, when you click on the "use" tab, be careful how many different styles you include so as not to increase your page loading time. I am going to include the Light, Light Italic, Bold, and Ultrabold styles to get started.

To use your font and call it from CSS Injector, you'll need to grab the @import code:

import code for custom font

BUT there is one important thing you will need to change! Because Stanford Sites is a secure server (https://), you need to add the "s" to your http:// as such:

@import url(https://fonts.googleapis.com/css?family=Lato:300,900,300italic,700);

OK. Paste your @import line at the top of your CSS Injector rule and save. Now you are ready to call this font in your CSS.

Set your custom font as the base font

In your CSS Injector rule, you now want to set your custom font as the base font for your site. To do this, refer to the Google Web Font documentation for how to call your font. You'll want to set this as a property of the body of your site, defining the font-family and the default font-weight, as such:

body {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
}

Without much of any styles at all, we now see our typography demo page look different:

Custom font

Define your typographic hierarchy

Great! We now have set our custom font as the base font for our site. Now we want to make it look great. The first thing to think about when styling typography on the web is creating a hierarchical typographic system. This means that all our headings and base font are proportional and balanced, so that the eye sees the hierarchical difference between a major heading and subheadings and the body font.

To get started, we first need to set a base font size for the whole site in pixels. For example, on my site, the Lato font is a bit small by default, so I am going to increase it:

body {
    font-family: 'Lato',sans-serif;
    font-weight: 300;
    font-size: 17px;
}

The problem is we also need to define a line-height to give our text more breathing room. See how the lines are so squished?

To do this, we will define line-height proportionally using em units. An em unit is a relative unit, where 1em is equal to the base font size set in pixels. This lets us create more proportional font sizes. For example if we wanted a ratio of 1:2 between our paragraph and heading, we could define the size of the paragraph (by setting a base font size on the body as we have done) to 17px, and then set the heading font size equal to 2em (i.e. 2*17px). So, we can do the same with line height.

body {
    font-family: 'Lato',sans-serif;
    font-weight: 300;
    font-size: 17px;
    line-height: 1.5em;
}

And this is what we get:

Much nicer!

So, I'm going to do the same thing with all my heading styles to establish a proportional typographic system using em unit measurements, in addition to setting a default font-weight for all my headings, as such:

h1, h2, h3, h4 { font-weight: 700; }
h1 { font-size: 2.5em; }
h2 { font-size: 2em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.25em; }

Styling your links

Another thing that really can make your site stand out is creating a custom link style. For example, I want my links to be bold and purple, and I would like my button styles to be flat and not the default Bootstrap 3D effect. When styling links, the only trick is you have to style the default link and the link states (hover and focus), so that your link changes when you hover or tab to it. Here's what I've come up with:

a {
    color: #a41eb3;
    font-weight: 700;
}
a:hover, a:focus {
    color: #333333;
    text-decoration: underline;
}
a.btn {
    background: #a41eb3;
    padding: 0.5em 1em;
    color: #ffffff;
    border: none;
    -moz-text-shadow: none;
    -webkit-text-shadow: none;
    text-shadow: none;
}
a.btn:hover, a.btn:focus {
    background: #333333;
    color: #ffffff;
}

And here's what that looks like in the inactive and active state:

link styles

Now, you can go a little crazy with link styles, defining rounded corners, borders, etc. Have fun, but remember, links are your primary call to action. They should be easily distinguished from your body text, and not be hard to read.

Our final CSS Injector rule

Here's what our complete, final CSS Injector rule looks like:

/* Typography and Links */
@import url(https://fonts.googleapis.com/css?family=Lato:300,900,300italic,700);

body {
    font-family: 'Lato',sans-serif;
    font-size: 17px;
    font-weight: 300;
    line-height: 1.5em;
}
h1, h2, h3, h4 { font-weight: 700; }
h1 { font-size: 2.5em; }
h2 { font-size: 2em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.25em; }

a {
    color: #a41eb3;
    font-weight: 700;
}
a:hover, a:focus {
    color: #333333;
    text-decoration: underline;
}
a.btn {
    background: #a41eb3;
    padding: 0.5em 1em;
    color: #ffffff;
    border: none;
    -moz-text-shadow: none;
    -webkit-text-shadow: none;
    text-shadow: none;
}
a.btn:hover, a.btn:focus {
    background: #333333;
    color: #ffffff;
}

Going further

This is just a basic set of styles to help you get off on the right foot with your typography. Here are some things you could consider doing to customize your typography even further:

  • Make sure to define line heights for all your headings (test this out by trying really long headings and see how they wrap to two lines on a small screen)
  • Adjust margins above and below your headings (add more spacing to make it easier to scan the sections of your page)
  • Adjust font weights or colors for your headings
  • Try a different but complimentary font family for headings vs. your body font (adds some variety, and can be a cool, bold look)
  • Define styles for other text classes in Open Framework: descriptor, caption, credits, summary

What's next

In the next post, we'll look at a grab bag of other common components in Open Framework, like block styles, sidebar menus, and the general page regions.

Categories: 

Comments

Nice article..
Thanks for shares :)

Regards
Francesca

What are your thoughts on CSS Injector for handling fonts versus @font-your-face? The latter provides several options for using fonts; does one module have less demand on the page (loading the fonts)?

Thanks. I love your OF project & am converting all my sites to use it.