Stories from Dribbble

Courtside

5 online typography exercises to improve your skills

In graphic design, wielding type like a seasoned typographer is no easy feat—it’s a hybrid of art and science that can feel intimidating at first glance. While grasping the nuances of thoughtful typography comes with practice, the good news is that honing your type chops doesn’t have to consist of rote, painful typography exercises.

There’s a wide breadth of typography games and exercises available to discover that will help you flex your typographic knowledge. We’ve gathered a handful of these interactive resources to help you learn and appreciate the subtleties that make masterful typography shine. Whether you’re a seasoned graphic designer, or just getting your feet wet, brush up on your type knowledge with these five exercises.

1. Kerntype

Fretting about kerning—the spacing between individual pairs of letterforms—can be daunting when you’re first learning design. Thankfully, you can sharpen your typographic skills in a fun way with Kerntype
. This game gives you a series of increasingly challenging kerning situations, in which you have to keep a keen eye on the spatial relationships between letterforms. The game scores your attempts against an ideal spacing solution, so you can see how even a few nudges in either direction can make a big impact.

265448bf891293827a0f80c2d44bbead

2. Typewar

Being able to identify typefaces on command is one of the best perks of being a designer that also doubles as a neat party trick. Typewar
 is a fast-paced game that tasks you with identifying common typefaces based on a single sample letterform. It sounds easy, but you’ll quickly see how easy a typographic curveball can be thrown your way.

Whether its Helvetica versus Univers, or Garamond versus Didot, Typewar’s typographic calisthenics will keep you on your toes and help you recognize the discreet, individual traits of different typeface’s letterforms. You’ll see how small changes can change the entire personality of a design, and you’ll bring your typographic appreciation to the next level. Plus, with Typewar you’ll see statistics on how you stack up compared to other players, so you’ll be able to leverage some competitive spirit in buffing up your design process.

Beb9e235d9486630da051e7fe84f9337

3. Shape Type

From the same folks that bring you Kerntype, Shape Type
 is another interactive tool that gamifies typography—this time its focus is the ofttimes arcane skills of typeface design itself. In Shape Type’s exercises, you’re challenged with using Bezier curves to complete the shapes of various glyphs from a series of typefaces. It’s a fun way to absorb the fundamental differences in the DNA of various typeface styles—from sans serif, to old style, to slab serif. You’ll quickly get a deeper appreciation for the skill of type design!

4cb9a0e9e02c88dec01ae44bb1e31356

4. Type Connection

The ability to successfully pair typefaces is an invaluable tool for any designer working with type—whether you’re working in logo and brand design, web design, publication design or anything applicable in-between.

Type Connection
 is a game which frames this task as a dating compatibility test, and puts you in the role of typographic matchmaker. Your job is to not only pick designs that harmonize together, but understand why certain pairings make for the perfect date. This abundance of information is a great way to appreciate why some typeface designs excel as body copy with excellent readability, while others are strongest as bold display faces. Type Connection is also chock-full of informative typographic history; you’ll get background details on each typeface featured, as well as colorful samples of each font pairing in-use.

Ac2149b44e6498be8f78236702d7ce21

5. Typeface Anatomy

If you’re nervous about knowing the difference between leading and letterspacing, x-height versus cap height, or all caps and small caps, you can spend some time brushing up on your basic typographic anatomy and terminology. Ellen Lupton’s Thinking With Type
 is an excellent online companion to her printed typographic primer. A quick Google search will also reveal a plethora of interactive guides
 on typpgraphy to help you learn more about the basics of type anatomy.

4d1e2e618037ebc55ba0f3e39d8d5a85

There you have it! We hope you enjoy playing around with these typographic resources while also improving your skills—no matter the skill level you’re at. For more handpicked design resources, check out our favorite gradient picking websites, color palette picking tools, chrome extensions for designers, and productivity apps for creative focus.

Find more Process stories on our blog Courtside. Have a suggestion? Contact stories@dribbble.com.


Icon shot x light