One of the things that terrifies me most about a new project is the starting point. How is the content laid out? What colors do I pick? Once things like that are decided, it becomes significantly easier to continue design, but it’s the blank page where I spend the most time.
To that end, I often start by choosing type. I don’t need to worry about colors or layout or anything else… just the right typefaces that support the art direction. (This article won’t focus on how to choose a typeface, but there are some really great resources if you interested in that sort of thing.)
And just like that, all your work is done. “Hold it just a second,” you might say. “All I’ve done is pick type. I still have to do the rest!”
To which I would reply, “Silly rabbit. You already have!” You see, picking the right typeface gets you farther than you might think. Here are a few tips on taking cues from type to design interfaces and interface elements.
Perfecting Web 2.0
If you’re going for that beloved rounded corner look, you might class it up a bit by choosing the wonderful Omnes Pro by Joshua Darden. As the typeface already has a rounded aesthetic, making buttons that fit the style should be pretty easy.
I’ve found that using multiples helps to keep your interfaces looking balanced and proportional. Noticing that the top left edge of the letter “P” has about an 12px corner radius, let’s choose a 24px radius for our button (a multiple of 2), so that we get proper rounded corners. By taking mathematical measurements from the typeface, our button looks more thought out than just “place arbitrary text on arbitrarily-sized button.” Pretty easy, eh?
What’s in a name(plate)?
Rounded buttons are pretty popular buttons nowadays, so let’s try something a bit more stylized.
Have a gander at Brothers, a sturdy face from Emigre. The chiseled edges give us a perfect cue for a stylized button. Using the same slope, you can make plated-looking buttons that fit a different kind of style.
Headlining
You might even take some cues from the style of the typeface itself. Didone serifs are known for their lack of bracketsーthat is, a gradual transition from the stem to the serif. Instead, they typically connect at a right angle. Another common characteristic is the high contrast in the strokes: very thick stems, very thin serifs.
So, when using a high contrast typeface, you can use it to your advantage to enhance hierarchy. Following our “multiples” guideline, a 12px measurement from the stems helps us create a top rule with a height of 24px (a multiple of 2). We can take the exact 1px measurement from the serif—a multiple of 1—to create the bottom rule. Voilà! I use this technique a lot.
Swashbucklers
And don’t forget the importance of visual “speed bumps” to break up long passages of text. A beautiful face like Alejandro Paul’s Ministry Script has over a thousand characters that can be manipulated or even combined to create elegant interface elements. Altering the partial differential character (∂) creates a delightful ornament that can help to guide the eye through content.
Stagger & Swagger
What about layout? How can we use typography to inform how our content is displayed?
Let’s take a typeface like Assembler. We might use this for a design that needs to feel uneasy or uncomfortable. In design terms, that might translate into using irregular shapes and asymmetry. Using the proportional distances and degrees from the perpendiculars, we could easily create a multi-column layout that jives with the general tone. And for all you skeptics that don’t think a layout like this is doable on the web, stranger things have happened.
Background texture generously offered by Bittbox.
Overall Design Direction
Finally, your typography could impact the entire look of the site, from the navigation to the interaction and everything in between. Check out how the (now-defunct) Nike Free site’s typography echoes the product itself, and in turn influences the navigation.
Find Your Type
With thousands of fonts to choose from, the possibilities are ridiculously open. From angles to radii to color to weight, you’ve got endless fodder before you. Great type designers spent countless hours slaving over these detailed letterforms; take advantage of it! Don’t feel like you have to limit yourself to the same old Helvetica and wet floors… unless your design calls for it.
Happy hunting!
Comments
Got something to add? You can just leave a comment.
07/12/2009
Fantastic article. You are spot on. But I do have one question. When you wrote that the radius for corners should be a multiple of 2, why not say multiple of the largest base number 12? I only ask because I would think a multiple of two is to small a number. You could use 6, 12, 14, 18, etc. and I would think that the variances would be too small to notice drastically, but still not the same number so it may give an unbalanced feel? So this way I could go 13 and 26 and still get that nice rounded feel without being disjointed.
And of course only I would pick up on numbers like that ( its just how I design ) But I was recommended this blog and from the articles I read so far it’s great for a seven year in the business new guy like myself. Let me know Thanks07/12/2009
Quite inspiring—I’m not designing much, but when I do, I tend to e.g. just tweak a more or less random border width till it feels right. Math is no bad idea at all, at least it can provide a better or more consistent starting point for that ‘tweaking and feeling’ process.
I also like that you’re pointing out that an outer border’s radius should be greater than an inner’s—a lot of people seem to miss out on this particular detail, making it look weird and ugly.
07/12/2009
Wow, great stuff and a level of detail that I’ve never visited. I have wanted to perfect rounded edges approximate to rounded corners. Thanks!
07/12/2009
Great article; good to get the reminder about how much typography plays into the design process. Never really thought about picking fonts before working on the rest of the design, but I’ll have to give it a shot!
07/12/2009
Why don’t you try the golden ratio technique instead of multiplying?
07/12/2009
Very helpful and a new perspective for me. It’s good to see more focus on principles of graphic design and how they can be used effectively on the web.
07/12/2009
What a wonderful read, Dan :)
really enjoyed this article ~ the focus on details and your examples – just wonderful.
Thanks :)
07/12/2009
@Anonymous first commenter: One thing I should have emphasized more is that you can use mathematics as a base, not a hard and fast rule. Think of my suggestion of multiples or Daniel’s suggestion of the golden ratio more as guidelines or starting points. Like a lot of graphic design, there are times where you’ll have to bend the “rules” a bit to get an element to feel right. Great question!
07/12/2009
Lovely.
07/12/2009
Really excellent article Daniel. I appreciate articles like this way more than your standard “10 Best Web 2.0 Practices!”
Up-and-coming designers need to know WHY to do something, not just HOW. The “Black & White” sample is really the clearest example of that. The type and the strokes just feel like brothers, they belong together.
Wonderfully done.
07/12/2009
Very interesting article & something that I’ll try on my next project. Designing around a font may be easier than trying to choose a font to fit a design!
07/12/2009
Great article Dan. This will surely help me in my upcoming projects.
07/12/2009
Great read! There are several pointers I’ll take away from your article. i like the idea of starting your design based on the font. Thanks
07/12/2009
Very cool article. Neat take on designing “WITH” the typography rather than just an afterthought.
Thanks!
08/12/2009
Very well written
Thanks!
08/12/2009
Amazing, some of these techniques are ingenious. I’ve used the ratios between font size and things like line-height before, but never thought about using the ratios within the characteristics of a typeface.
09/12/2009
Great points. These are the type of details that make an average design exceptional.
09/12/2009
A beautiful article and technique, I have never thought of that in this way, I am sure going to try it.
Btw I cant seem to run 24ways on google chrome its damn too slow to scroll even though I have latest hardware but not so great GPU may be thats the issue :(
12/12/2009
@Anonymous first commenter – I was puzzled by this too, but I decided that when Dan said “a multiple of 2”, he didn’t mean just any multiple of 2, but “2 times the measurement you’re trying to relate to” – in this case, 2×12=24. I think that’s what you were getting at.
14/12/2009
I like this angle, something I haven’t even thought of before. Coming from a Graphic Design background I’ll definitely be trying this out on some future web projects, thanks!
15/12/2009
nice article. i love every details on type design and its clearly emphasizes in this post.
18/12/2009
Good article. I love the fact that you mentioned the font, Brothers. I’ve been a fan of that font since a friend of mine was kind enough to introduce me to it.
13/01/2010
great read- Dan. this is great insight to Creative when coming from the dev side of things.
well done.
Commenting is closed for this article.