Carsonified » Fonts

Getting Started with Typekit

Keir Whitaker — Thu, 30 Jul 2009 06:58:56 +0000

[Editor’s note: Dan Cederholm will be teaching Progressive Enrichment with CSS3 at FOWD NYC.]

Back in May Jeff Veen (previously of Adaptive Path and Google) announced Typekit, a subscription based service that will allow web designers to use licensed fonts on their own web sites. As Jeff himself explains:

“We’ve built a technology platform that lets us host both free and commercial fonts in a way that is incredibly fast, smoothes out differences in how browsers handle type, and offers the level of protection that type designers need without resorting to annoying and ineffective DRM. As a Typekit user, you’ll have access to our library of high-quality fonts. Just add a line of JavaScript to your markup, tell us what fonts you want to use, and then craft your pages the way you always have. Except now you’ll be able to use real fonts. This really is going to change web design.”

… Introducing Typekit

We were lucky enough to have been given a preview invite to Typekit and in this mini tutorial we will be taking a quick look at how to actually implement Typekit in our own demo page.

Step One: Create an HTML Page

To get started I simply created an HTML document with a few simple CSS rules, an H1, an H2 and two paragraphs of text.

View the demo page

Step Two: Creating a Kit

Next it’s time to head over to the Typkeit web site to create our “kit”. This kit will ultimately produce a JavaScript file which will contain the necessary code and fonts to render our chosen typefaces. The two fields are: Name (you are allowed to create a number of kits) and Domains. Each kit is individual and related to a particular domain or domains, e.g. I could use the same kit on both carsonified.com and keirwhitaker.com.

Step Three: Choosing Your Fonts

Once we have created our kit it’s time to select the fonts we want to use on our web site. For this demo I chose Bello Pro and Proxima Nova. Once you have selected your fonts by clicking the “add” button it’s time to launch the “kit editor”.

Step Four: Configure your Kit

The Typekit Editor allows you to apply your chosen fonts to any HTML element, class or id. In the example above I have selected the Bello Pro font (highlighted in green) and specified that I would like it to be applied to the h1 and h2 elements as well as any element with a class of “keir”. You can also target any element by id, for example I could have added #header which would result in the text in my #header element being rendered in Bello Pro.

Unlike Bello Pro the Proxima Nova font has additional weights and styles associated with it. Typekit allows you to choose which ones you would like included in your kit., however adding additional weights and styles will increase the size of your kit considerably. For the demo I have just selected “Regular” and specified that I would like all “p” elements to be transformed into Proxima Nova.

For non @font-face enabled browsers you are able to specify “font fallbacks”. For our demo I chose the default “sans-serif” but you could be more specific. Once you have specified your selectors, weights and styles and CSS stack settings it’s time to “Publish” your kit. Due to the fact that all kits are unique it may take a few minutes before it is ready to be served from the Typekit servers.

Step Five: Adding the Kit to your Web Page

The last thing we need to do is add the JavaScript that references our kit to our web page. To do this we simply click on “Kit Settings” and copy the code from the pop up window. This window will also allow you to edit any of the settings you specified in step one. Finally it’s time to head on over to your HTML file and paste the script references into the section of your HTML page.

Step Six: Preview your Web Site

As you can see from the screen shot the headers and paragraphs are now styled in our chosen fonts.

View the demo page

Summary

Typekit was very easy to use and the interface is very intuitive. My kit was relatively small and as a result the transformation of the fonts was relatively instant, however I imagine as you add fonts to your kit initial loads may take longer. There’s no word yet on the pricing model for Typekit but if they get that right I have no doubt that the service will be extremely popular.

White Space: How to Get it 'Right'

Mark Boulton — Tue, 24 Mar 2009 16:02:48 +0000

Space is important in layout. Space can be created by content, such as text, images, lists, logos etc, or it can be created by the space in-between content, called negative space, or whitespace. Space can be passive; a by-product of the layout process. Or, it can be active; there for a reason, to guide the user’s eye, or help them make a decision.

Shapes are elements that can communicate ideas, for example, the BP logo. Unusual shapes can attract attention, whilst conventional shapes when combined with colour convey meaning. Take a red triangle for example. From computer software, to road traffic signs, a red triangle means warning. Something’s wrong. Whereas a green circle, means everything’s good. Proceed.

In classical design, there are three types of shape: geometric, natural, and abstract. Geometric shapes are what you’d expect: circles, squares, triangles, rectangles and diamonds. Natural shapes are derived from what we see around us. Abstract shapes can be both representative impressionistic or they can be expressionistic. Like the art movements, impressionistic abstract shapes are meant to represent something else. Expressionistic shapes convey meaning, or emotion.

Shape and size are two of the basic elements of graphic design that determine space. If I change the shape of something, then I’m changing the space around it. If I increase the size of the shape, I decrease the space around it. Now, all of this is quite abstract at the moment. How can you apply this theory to your every day work? How will knowing the difference between abstract and geometric shapes make any difference to you? Well, it’s about learning how to look.

Throughout art school, then through design school, my lecturers and professors would encourage me to view things differently. To simplify my environment into shapes. To look at the space in-between things. To have an appreciation of shape, size, and tone. By looking at the world this way, you can start to understand the richness and complexity of design all around us.

Typographic Colour
Typographic colour refers to the density of type on a page – either a physical page, or on screen. The ‘shade’ of typographic colour can have an impact on legibility – too dark, with no typographic hierarchy, and your content will be difficult to read. Too light a shade of typographic colour, and your content will also be diffcult to read with readers finding it hard to read line to line. But there’s plenty you can do to make things easier for your readers. Let’s look at some examples of dark typographic colour:

The first paragraph here is set in Helvetica. Clearly, the leading or line height is set too small. The second paragraph uses correct leading but italic, serif typefaces generally have letterforms set too closely together.

To correct these two paragraphs, we need to add more leading to the first, and add some letter-spacing to the last. But remember, don’t add too much. Type designers have carefully crafted the distances between letterforms. To disrupt that distance is to tamper with the very ‘feel’ of the typeface, and can have disastrous consequences.

Now, let’s look at some examples of light typographic colour:

Using the same typefaces as before, this example shows that by setting a paragraph with too much leading, or too much letter spacing, can also result in an uncomfortable reading experience. Typefaces themselves can also have a bearing on typographic colour. Some typefaces have wide, open counters, and large spaces between the letterforms, (called kerns). Whilst others have tight counters, with minimal open space in the letterforms. Even the choice of typeface can play a significant role in the typographic colour of your final design.

White Space
My first design job was based in a small studio in Manchester city centre in the UK. It was mostly a print design agency that produced work for various large and small clients alike, in varying media: packaging, publications, marketing support material etc. One of the avenues of output for the studio was direct mail.

Designing for Direct Mail is actually quite tricky, for one simple reason: it goes against the fairly sophisticated graphic design principles, which is standard fare in college. Instead, designing direct mail is about as sophisticated as a small lump of concrete. Direct mail clients want to appear down market, there is no getting away from the fact that it works as well: big, bold and brash design is the order of the day. And in the words of one client, words that I will never forget as long as I’m a practicing graphic designer; ‘white space is empty space’. However, for the most part, he couldn’t have been further from the truth.

Definition white, or negative space is the space in-between elements in a composition; be that a web page, a web app or a spread in a magazine. Actually, that’s only a part truth. The space between major elements in a composition is micro white space. Micro white space, is, yes you’ve guessed it, the white space between elements such as list items, the space between a caption and an image, or the space between words and letters.

Legibility
A while ago I was lucky enough to go and see Erik Spiekermann give a lecture. Part of his talk was about his redesign of The Economist magazine. He mentioned that one of the primary reasons for the redesign was that the Economist thought their design was too heavy. The content was difficult to read. In newspaper design, which has so many parallels with web design, information is dense. Sometimes, as in web design, it’s difficult to add white space because the content makes it hard to do so. Newspapers often deal with this by using a typeface for the body, which is quite light and has plenty of white space within, and around, the characters. This was part of Erik’s solution for the redesign of the Economist. He redesigned the typeface slightly, whilst retaining the quirkiness of the original. He added more whitespace to the individual characters. He set the type slightly smaller I believe, with more leading. All of this was adding micro white space to the design. The overall result was subtle. The content was more legible and the overall feeling of the magazine was lighter, yet there was still the same amount of content.

I learnt from Erik that day that, in order to achieve a lightness and an increase in legibility in a design, and this especially applies to the web, you don’t have to look at the design at a macro level. Looking at the space between the tiny stuff, at the micro level, can have a big impact on the effectiveness of a design.

White Space Helps Position Brands

For years, designers have been using White Space in their designs to create a feeling of sophistication for upscale brands. This is where the Direct Mail client was actually correct in his view on white space for his product; adding white space to his design would position his product more upscale than it was. Coupled with a sensitive use of typography and photography, a careful use of White Space is seen all over certain brand markets to align themselves with their competitors. Take cosmetics for example, in fact most luxury goods, use white space in their marketing material to ‘tell’ the reader that they are sophisticated, of high quality and generally expensive. The opposite can be said of most Direct Mail you get through your letterbox; Red, white and black, bold typography and very little white space. The result is a down-market impression.

The content is the same on both designs, as are the elements such as photography. The design elements differ however, to create two designs which are at opposite ends of the brand spectrum. Of course, this is a very simplified view of the world and there’s a lot more that goes into brand recognition than simply White Space. But what I’m trying to get at is if a brief lands on your desk for a luxury brand, I’ll bet the client and audience of that product expects white space in their marketing material and plenty of it to align it with their competitors.

Active and Passive White Space

White Space is often used to create a balanced, harmonious layout. One that just ‘feels’ right. It can also be used to take the reader on a journey through the design. In the same way a photographer leaves ‘looking room’ in a portrait shot, by positioning the subject o! the centre of the frame and having them looking into the remaining space, a designer can do this to increase the effectiveness of their design. Another way of looking at white space is by how a reader, or user, reacts to it. White space can not only be used by the designer to create harmony and balance in design, or to help position a brand, but it can be used to lead a reader from one element to another. This is called Active White Space. Let’s take the following example before any active white space is applied:

So, everything is pretty cramped here. We then need to add some white space to create the harmony and visual comfort in the design. Here, I’m adding margins, changing the type family and weight and also adding some leading, (or line-height as it’s also known).

The white space that has been added here is passive white space. There is a theory that passive white space is white space that is present within a composition that is unconsidered. I disagree: that’s just bad design. Passive white space still has an important job to do; it’s there to create breathing room and balance. Now, within this content is something that I want the reader to see, the second quote. I could highlight it with a different colour or make the type size larger. I could do all of those at the same time. In this instance however, I’ve added white space around the element to draw the users eye, in addition to reducing the white space of the type, not the tracking, but actually making the type bold. This is active white space. White space that is added to a composition to better emphasise or structure information.

Practice, Practice, Practice
Sometimes, the only way to get to grips with a concept that can be as arbitrary and subjective as white space, is to practice. In the same way martial artists have to spend hours upon hours of drilling simple techniques, graphic designers have to do the same. For many designers, this part of the craft is all but forgotten once you leave high school and replaced with classes on lateral thinking and design history. Working under the pressure of real clients demanding real work leaves little room for the time needed for these design ‘drills’. If you do find yourself with a spare hour or two though, I have a great place to start. Graphic design students have conducted these types of compositional exercises for decades and luckily for us, some of the design legends of past years have documented the process.

One of my favourites has to be Emil Ruder. Emil Ruder was a Swiss typographer who died in 1970. After 21 years of teaching typography, he produced a book called
‘Typography: A Design Manual’ (ISBN: 3 7212 0043 8).

‘The book is deliberately restricted to pure typography, to working with prefabricated types which are subordinated to a precise system of measurements. Its purpose is to make apparent the laws of typography and — in spite of certain common features – the contrast between it and graphic design which in both the selection and means of their application, is freer and more complex.’

So, in that sense, Ruder’s teachings are fairly black and white. There is a focus on typography and the subtlety of designing with letterforms. Ruder takes you through the rights and wrongs, which is a great place to start learning the fundamental principles. There are some great exercises in there covering not only white space, but also other compositional devices. It’s chock-a-block with drills. It’s expensive, but I urge you to buy this book and follow the examples. White Space is not about the space in between things; the space ‘left over’. Knowing how to design and manipulate the space outside, in and around your content will not only give your readers a head start, or your product the right market positioning, but will perhaps make you see your content in a new light.

This extract is taken from Five Simple Steps: A Practical Guide to Designing for the Web, written and published by Mark Boulton.

Main image courtesy of Themis Chapsis.

Looking at Type

Mark Boulton — Wed, 27 Sep 2006 08:00:45 +0000

Have you ever been somewhere where you couldnâ€™t speak the local language? Surrounded by signage, newspapers, shop fronts – everywhere you look there are letters, but you donâ€™t understand what they mean. Itâ€™s even worse if theyâ€™re not Roman characters.

A couple of years ago, on my honeymoon in Thailand, I was astounded by the myriad of typographic design styles. Not only was it a language I didnâ€™t understand, the letterforms, to my eye, were little more than squiggles. Yet somehow I was often able to understand the meaning of some signs. How? Good typography, thatâ€™s how.

On a recent trip to Portugal, I took some time to find some signage that illustrates my point:

If you just ignore the crab on the bottom left corner for a second, what do you think this sign is for? I donâ€™t speak Portuguese so Iâ€™m relying on the typography to help me out here â€“ and it does quite a good job: itâ€™s a seafood restaurant.

Hereâ€™s an example of not so great typography:

Iâ€™ve absolutely no idea what this is for, but the use of the typeface in the poster headline is incredibly ill-chosen. Unless this is a conference about 1960s science fiction (which I doubt) then why use a typeface which has so many cultural references to that era? Terrible.

The next sign is fantastic:

Itâ€™s a sign for a local doctors. Even though itâ€™s in another language, itâ€™s so well designed I donâ€™t need to read the language to understand what itâ€™s all about. The Swiss influence is a good idea: red, black and white and sans-serif typography.

Choosing the right typeface

So what do my observations while travelling mean for you? Of course, good typography is about more than just fonts, but Iâ€™d like to start there. Typeface selection is vital for the reasons Iâ€™ve just given: type communicates more than the words. Keep that thought in your mind for a moment.

In typography, there is no wrong and right typeface. There is just appropriate and inappropriate. So, how do you go about choosing a typeface for a particular project for a website to make sure itâ€™s sending out the right signals? Here are some simple questions you should ask yourself every time you select a typeface

Message: Does the typeface youâ€™ve chosen communicate what you want it to in the context of the brief?
Context: Is the typeface for body copy or headlines? Is it a logo? Is it to be used on the web as well as a 48 sheet poster? Where else will you need to use the typeface going to be used and for what?
Balance: Does the typeface risk actually overpowering the words? You should never let the font get in the way of the words – they need to support each other, not compete.

Once youâ€™ve chosen a suitable typeface, how do you know for sure itâ€™s the right one? You need to get on to the next step in the process: testing.

Testing your type

Testing the hell out of your typeface is vital to ensure itâ€™s 100 per cent right. If youâ€™re designing a corporate identity, which covers everything from stationery to fleet livery, then test your typeface on the letterheads and the side of lorries. Seriously. If the budget will allow, get some vinyls printed and stick them on the side of a van.

Set the typeface in a multitude of ways. Lowercase, uppercase, mixed-case, lists, tables, headlines, two-line headlines etc. etc. The list can be as big, or as small, as you like. The important thing is you dedicate time to testing and looking at the type. Through this testing process, youâ€™ll become familiar with the typeface,. Youâ€™ll see it in different ways. Youâ€™ll get to know the way the cap â€˜Tâ€™ looks when set next to a lowercase â€™râ€™. Purely by accident, youâ€™ll become a student of that typeface.

What does this mean for the web?

Well, in terms of fonts that we can be certain are on most usersâ€™ machines, weâ€™re restricted to a limited font set of Verdana, Times and Arial. It really doesnâ€™t have to stop there though.

A List Apart, even though it uses HTML text throughout, has stunning typographic attention to detail. Similar in style is Coudal Partners. Great attention to detail in the typography and art direction. It may not come as a surprise that the designers of both of these sites come from traditional graphic design backgrounds and demonstrate a thorough understanding of their craft.

Using image replacement techniques with web standards, we can create accessible designs which have beautifully considered typography with any font we want. Yes, there are some limitations with these techniques, but those trade-offs have to be considered in the context of each product or brief.

But this is all technical implementation stuff. Iâ€™m sure in the near future, the web as a medium will be able to display whatever typeface a designer chooses and if there arenâ€™t designers who are working the medium who are passionate and schooled in typography, where does that leave typography for the web?

With that in mind, designers today on the web have no excuse at all. We can no longer, I believe, fall back on the â€˜well, we canâ€™t be sure the userâ€™s have that fontâ€™ excuse. Itâ€™s a platform issue. A delivery issue. Focus on the core design skill and, I really hope, the platform will catch up. Sure, be mindful of the current problems, but donâ€™t be dictated to by them.

Like this article? Digg it!