Effective Typography-Driven Web Design

Not every design starts with a strong image. Sometimes a piece of type serves as the dominant art for your design project.

The best text-driven design uses a minimal set of effects to create a word image with impact. Take a look at novelty typefaces, set a clean and limited font palette, play with bold or sharp color choices, make the letters big (or small), make type art and use strong words or catch phrases.

Most text-driven designs are not limited to a single effect, although one effect may be dominant. Designers often use a variety of tools to complete successful projects. Here is a look at each of these design concepts as a dominant effect and websites that are doing it well.

Novelty typefaces

When using type to drive a design project, using an uncommon or novelty typeface can add a lot of visual interest. Think about the purpose the words serve when selecting one of these fonts because readability is always a concern with these often-elaborate typefaces.

Choose something that matches to mood of your site — lighthearted, dark, fun, somber, chaotic – and actually looks good using your words. That’s right, enter your type before settling on a novelty font; sometimes the effect is very different than expected once the words are in place.

Doing it well:

Denise Chandler promotes her design projects with fun typefaces (each word also serves as a link to other pages). The novelty fonts here are her own and really are an effective way to promote her design work and serve as an engine for font sales.

The typeface used on the G’Nosh site works so well because it has the chalkboard feel employed by many small restaurants to showcase daily specials. The typeface is fun, readable at the large size and fits the theme of the site.

Novelty fonts can also be elegant and simple, such as the Viewport Industries Digest. Lettering is clean and interesting. The ligature between the “s” and “t” is quite elegant.

Limited number of fonts

In almost any design project, using too many fonts can be a little overwhelming. This is especially true when dealing with a text-driven design.

Keep your palette simple. Use one or two typeface families to get the most impact in your design. Add emphasis with bolding, italics, sizing and color.

Doing it well:

The highlighter effect on a simple phrase works beautifully for Undercurrent. Right away you know what the company is about and the high-importance words and emphasized. Font choices are simple and consistent.

Jonathan Snook’s clean blog-style design uses a pair of complementary typefaces for each new post. The alternating bold headers and lighter serif body font pair nicely and create a distinct sense of order and hierarchy.

The website of Nicola Potts also uses a type of text highlighting to create emphasis and visual tracking. Again, the site is created using two typefaces allowing size and color to create visual appeal and serve as navigational tools.

Bold, sharp color choices

Color can really bring typography to life. Bright, sharp color choices create contrast and can focus the attention of website visitors. Colors also evoke emotional associations and help a word have additional meanings or feelings when paired with different hues.

Plan color, word and font choices carefully and with awareness of any hidden associations the combinations might infer. Also look for color with pop. Beige is all over the Internet, go bolder for more impact.

Doing it well:

The motto for Miiks, “I create visual beauty,” is evident. The bright green and white combo is striking and immediately grabs your attention (so much so that you find the catch phrase almost by accident). The color is also soothing; image how you would feel if the green were another color, such as red or black.

Happy Cog also uses color as a tool that pairs well with the words on the screen. The bright colors and word “happy” mesh seamlessly. The color choices also draw you in.

Trent Walton’s monochromatic color scheme helps bring attention to the words on the site. The color may get you to pause but then it falls into the background as you move through the words, which have a very distinct sense of hierarchy.

Often color is also used for the words themselves. The bright magenta/purple used by Phase 2 Design Studio adds emphasis to the words they want you to read first – beautiful and passion.

Big (or very small) letters

Using lettering to create contrast can also be beautiful. Super-sized or super-shrunk text can create a high-drama effect.

Large letters make you feel like the words are important. They also create a sense of fullness, by filling much of the space on the site. Small lettering can cause you to zero in on certain words or phrases and create a sense of simplicity. Using small text as your design “catch” also creates a great deal of open space and you must be able to use it effectively in combination with your words.

Doing it well:

Darren Ansley’s site is “Fueled by Design.” The large typography draws you to the center of the landing page and gives you an immediate idea of what the site is about.

Daniele Codega’s site is the definition of minimalistic. But all of the white space leads they eye directly to the small type. Simple, different and efficient.

Hello is an almost-overused website catch phrase. But here the small “header” on Kenneth Cachia’s site works neatly. Because of its size, you read “hello” and it falls into the background as you skim the navigation bar and get into the main text on the page.

Make type art

Sometimes type is more than just letters. Typography can create a visual and piece of art all of its own. There are no real rules for making this work; it is a matter of taste. They key thing to keep in mind when playing with typographic art is readability. Stay away from “over-designing” text that needs to be clearly understood.

Doing it well:

Design Zoom uses circles, the rounding of letters and color to create an overall floating bubble effect. The simple shapes and colors are fun and vibrant. Note that navigational tools and text blocks are left to stand on their own and are easy to read.

Karb Digital Fireworks creates a fireworks effect with type. The fun colors and fonts create an overall effect that really mirrors the word “fireworks.” Some of the words are not super-easy to read but are decipherable and also serve as links.

You almost have to play with this site some to see the beauty in “Sadness.” Mouse over the letters and the dots vanish creating a stunning effect for Web Typography for the Lonely. The word and effect combine to create a feeling of absolute desolation, but you can’t look away.

Strong words or catch phrase

One of the most effective typography tools is the words on the page. Say something with meaning to grab your audience. Catch their attention with fun or interesting words. The No. 1 reason to use type is to communicate a message. Make visitors to your site want to read it.

Doing it well:

Viljami Salminen’s “Responsive Design” grabs you with big text. The words alone are almost enough to reel you in because it is such a big topic. The site design also makes it big with the super-sized novelty font on a bright colored background.

The Barrelhouse Flat used a phrase that can make you feel a variety of emotions. “Torrid affair” draws you in and is an unexpected way for the restaurant to advertise its food special.

Sean Baker uses a lot of high-impact phrases to get your attention. “Winner” and “I make things look good” draw you in because the site showcases what it says in its design. Typefaces are combined and contrasted for emphasis in the right places — how can you miss the “My resume” link?