Design: Practical Typography
January 17, 2012Not a Graphic Designer, but need to make your website pop? Aspiring to be a Visual Designer? Here’s 3 essential tips on how to give your in-house creative team a run for their money.
Sometimes, as a developer, we are asked to mock something up, lay something out quickly, or to make a design decision on a web property. Maybe you want to impress your coworkers and fake your Graphic Design prowess. Maybe you know nothing about design, but want to learn how to see with a designer’s eye? Heck, maybe you want to see if the designer you just hired knows the basics. These are all great reasons to keep reading, because I’m going to highlight the top 3 tips that leads to great design work — be it yours, or to spot someone else’s craftsmanship.
1. Choose a Font
There are thousands of fonts to choose from – which one is right for you? A font can say quite a bit about the content upon which they are built. A font can also set a mood and tone. Just as important as its visual appeal, a font can easily make a body of text a easy to read, as it can make it impossible to read. Here’s a quick look into what to look for, and how to use it:
Serif, or Sans Serif – Serif fonts give a hint of sophistication and tradition in reading. Sans Serif fonts introduces clean lines and a feel of modernism.
Each style of font provides their own appropriate usage. Sans Serif lends itself very well to digital mediums, for its cleanliness as well as readability across existing technology. Serif fonts, on the other hand, is a great font for traditional consumption, like newspapers, magazines, and print.[fig. A] The key here is to identify your audience and cater to their needs.
2. Watch Your Spacing
The spacing between each character is called kerning, or letter-spacing. The important thing to remember is to keep things consistent. If you’re designing text-based headers or page titles, keep the fonts and styling the same. Regarding specifics of headers and page titles, if the purpose is that of announcements, try to give some space between characters. This creates a delay to a reader’s eye, and forces them to read and comprehend the subject. We see this a lot with “war” declarations in newspapers, as well as political and societal achievements (think: elections and international shift of powers). [fig. C]
Keep characters densely packed, or close together, to create a logo or something more aesthetically pleasing [fig. B]. Pay close attention to serifs and how they interact with neighboring characters. “Tails” of serif characters may need to be joined or blended together to provide ideal spacing. Vertical characters, such as “i” and “l” should not be as close together as “b”, “d”, and “o”.
One trick I’ve learned is to squint at your text. You should see a uniform band of gray (black text on white background). If you see spots of light or dark, it means there’s too much space, or not enough. Do yourself a favor, and squint at your text-based design work next time. You’ll find, more often that not, that you’ll need to adjust your kerning to achieve that perfectly uniform band of gray.
3. Use a Grid
Now that you have fonts and letter-spacing knocked down, the last tip is probably the most important: layout. The space used (or unused) is just as important a presentation factor as the text itself. As the popular addage goes for real estate: location, location, location. Utilizing a grid layout, you’ll be able to keeps things consistent, and you’ll be able to lay things out logically. Despite popular belief, design is not completely artistic – there are layers of mathematics and scientific patterns involved with creating good design. The golden rectangle and the grid are evidence of this. Take a look at subtraction.com’s website and its clear use of the grid:
With just these 3 tips, you’d be well into the core of Graphic Designdom. Now you know what to look for, and how to approach a design project should you decide to take one on. Good luck!