Let Your Type Do The Talking

You might think a graphic designer’s job is just to make things look good. That’s partly true—but it’s much bigger than that. Good design communicates: it tells users what they need to know, what’s most important, and how to proceed from one piece of information to the next.

On the Web, a big way we use design to communicate is through typography. Print designers have always known this, of course: a large, bold headline signals the theme of a story. Subheadings between paragraphs chop ideas into chunks. This idea is no less important for website design.

When used right, type gets organized into hierarchies, which tell your user what to pay attention to. Hierarchies can be established in plenty of ways: you can use text that’s big or small, bold, italicized, underlined, all caps, in color, in a different font, indented, bulleted—or any combination you want.

Take this example: the column on the right uses type hierarchies, while the one on the left doesn’t. Which one would you rather read?

No matter what visual signifiers you choose, make sure your chosen hierarchy stays consistent from one page to the next. For example, if you go for a large-font headline, followed by italicized subheadings and regular (roman) body text, don’t change that up. Once users learn how your hierarchy works, making a switch will cause confusion and take away from the meaning of your content.

When it comes to the design process, it can be tempting to save something like hierarchy choices for last. But here’s my advice: figure out hierarchy first, then worry about aesthetics. If users can’t find what they’re looking on your site, it won’t matter how pretty it looks—they probably won’t be back.

Want to make sure your type says all the right things? Contact Atomic, and we’ll make your message clear.

, ,

Tip-Top Typography For All

If you’ve used the Internet in the past, like, three years, you’ve probably noticed something: Fonts are looking good these days. Custom web typography is huge, and it’s a trend that’s here to stay. Here’s why.

  • It’s insanely easy to implement. Plenty of free services can help you get beautiful fonts up and running on your site. Typekit and Google Web Fonts are great online apps. You can also use CSS3’s @font-face query, which lets you upload custom fonts to your site’s server. Even visitors who don’t have the font installed will be able to view the font in all of its typographic glory.
  • It doesn’t limit designers’ creativity. Quite the contrary. Advanced typography multiplies what web designers can do. For us at Atomic, it allows us to create more beautiful websites, and better represent our clients’ brands.
  • It’ll only get better with time. Back in the day (you know, 2008), if you wanted to use a special font, you had to apply a Flash plugin. But Flash is no good on mobile devices, and now there are easier ways to flaunt your fonts. Plus, font libraries will continue to grow, and fonts themselves will become more standardized. As a designer, that’s a lot to look forward to.

 

But there’s a catch: even as gadgets and programming languages surge ahead, advanced fonts can still mess with layout on older browsers. That’s where responsive web design comes in. Programs like Modernizr can sniff out compatibility issues, and input queries to tell a site to switch the font based on screen size, browser version, and so on.

Custom typography is making the web more beautiful. And it can really add value to your site. It’ll set you apart from the rest—and look awesome while doing it.

Still stuck in a Times New Roman time warp? Contact Atomic and we’ll get you up to speed.