Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196
News

Enhanced typography with CSS3 & JavaScript

Say goodbye to the collection of five or so fonts used by every web designer…

Enhanced typography with CSS3 & JavaScript

tools | tech | trends: Web editor, jQuery and lettering.js plug-in, Google Fonts
expert: Sam Hampton-Smith
(This article first appeared in Web Designer issue 180)

Download the project files by clicking here

For a medium that was created with text in mind, the web has long suffered from an unnecessary restriction in the fonts available for use. This has led designers, keen to avoid bland look-a-like site designs, to seek workarounds involving images and text replacement tricks. While this has allowed for some really creative solutions and happy accidents, we are finally at a point where we can start to use a richer set of fonts to help communicate our messages.

In this tutorial we look at one method for presenting a passage of text in a visually exciting manner, taking advantage of just two fonts (both outside the traditional web-safe font set) and examine how we can reduce the amount of markup required to create customised typography. We’ll achieve our layout by splitting paragraphs into lines, then using a jQuery plug-in to automatically wrap <span> tags around our text.

Along the way we’ll look at what we can do to maximise visual impact, draw attention to particular key words, and create a coherent typographical poster. We’ll also look at a little bit of jQuery, and finally we’ll take advantage of WebKit transitions to add script-free interactivity to our page. The larger portions of code used here are included in full in the project files.

01 Starting off

Open up the start.html file from the CD. We’ve supplied the initial HTML code, and a simple script tag ready for you to insert a few lines of jQuery later on. The first thing you need to do is establish the visual approach you’re going to use. For this tutorial we’ve decided to opt for a typographical poster approach, so no graphics at all – everything will be rendered in HTML and CSS only.

02 Take inspiration
Have a quick browse around the web to see what excites you visually. We found a couple of great looking sites while browsing the lettering js plug-in site (which we’ll use later on). The end result is that we’ve decided to go for a 760px wide design with a graphpaper background. Add the CSS below into a new CSS file, and link to it from the head section of your page.

001 <link rel=”stylesheet” type=”text/css” href=”styles/screen.css” />
 002 --
 003 body {
 004 background:    url(pagebg.gif) repeat top left;
 005 color:    #333;
 006 }
 
 03 Hide everything

As you’re going to be working on each section, it makes sense to hide the content you haven’t styled, so comment out everything after the <h1> tag. With the rest of the content hidden, it’s easy to see how the text fits together. Start by choosing a nice font to act as the title font for your page. Have a look on Google Fonts (http://code.google.com/webfonts). We’ve chosen Lobster, so add the recommended code at the top of your page, before your CSS file:

001 <link rel=”stylesheet” type=”text/
 css” href=”http://fonts.googleapis.com/
 css?family=Lobster” />
×