Friday, March 22, 2013

Tips on how to use your fonts - For beginners

Now you have picked your fonts, it's time to use them. Below are some tips to a good typography design, and at the end of the post there is a link to another page that will explain further on typography pairing. (for beginners!) However, please note that my rules are not the holy grail to typography design. Rules can be bent as you see fit, these are just my rules, for myself.

Please note that I use Adobe Photoshop for my designs for the 30 Days of Lists. Photoshop is pixel-based and great for digital use, but if you want to make something to be printed out or to be sold, it's best to use a vector-based program like Adobe Illustrator. To learn more about the difference between vector and pixel, you can read about it here, or you could google it up yourselves to do research.

  • SPACING
    This is a basic rule to any design. Adequate spacing is needed so that your texts or graphics wouldn't feel too cramped or suffocating. The first thing to do is set a perimeter around the design, like the red lines in the image above. The green lines are called 'leading' in typography terms, or the distance between two lines. It is most important to keep a consistent leading throughout the design.
    ....
  • ALIGNMENT
    If you look at my lists, you'd notice that they are all arranged in neat little horizontal rows with consistent leading. Even when there are different fonts in the same line, or more than one point, I always keep their sizes similar in terms of height. This keeps the design looking neat.
    ....
  • EMPHASIZE YOUR POINT
    Use fancy fonts as the emphasis in your sentence, to emphasize on the important points or words. Good fancy fonts that I often use are Mesquite std, Metropolis 1920, (as shown in the picture above) Homestead, (display and inline) among the few. However, some less fancy fonts can be good emphasis too, such as heavy fonts like Impact.
    ....
  • CONSISTENT BODY FONT
    Don't use fancy fonts for your ENTIRE design, that will make it too... gaudy, in some cases. You need a good, quality body font too to tie it all together. Body fonts are the not-so-fancy fonts, mostly sans serif fonts like the ones I use to explain or expand the main points made with the fancy fonts.

    My personal favorite is Helvetica, which unfortunately, is not a free font. But Arial is a good replacement, although it lacks in weight variety compared to Helvetica. Not to fret though, there are tons of great sans serif fonts out there free for you to take. Such as League Gothic, (that I used above) Franchise, and even Homestead (regular) are great body fonts. Not to mention the fonts that already came default with Microsoft Windows such as Times New Roman and Tahoma, those are great too!
    ....

  • VARY THE WEIGHT AND HEIGHT OF FONTS
    Use fonts of different shape, size, weight and height to make it visually interesting. Even if the 3 sentences above were in the same color, it would still look interesting. Here is a sample of it if all 3 sentences were of the same font. (and in same color)

  • Okay, admittedly it still doesn't look too bad, only because of the size difference. So format or 'layer' your sentences nicely so you could allow a range of font sizes for your design. Keep some lines long and some short.
The most important thing is to practice and experiment. Try out different font combinations and see how they work together. Trial and error is the key here, and practice makes perfect. The more you do, the better you get. (don't be lazy like me sometimes!) And as promised, here is the link to a Beginner's Guide to Pairing Fonts, for some extra reading on typography. :) Enjoy!!

2 comments:

gleestormont said...

you are so sweet to do this. thank you thank you!

amel said...

Helpful guide for beginners. Don't forget the most important thing ever though, it's called "kerning", hun. Not just print, web based work need good kerning too. And btw I got tons of free fonts following that "high quality fonts" link off your site... Thanks for that. Cheers :)

Post a Comment