20 Typography Rules Every Designer Should Know

By on Aug 31, 2018 in How To
20 Typography Rules Every Designer Should Know

Typography is one of the most important and gratifying components of graphic design. Regardless of how experienced a designer you've become, it’s always helpful to recharge your mind about the principles of typography. Try to learn specific things like the origin of a particular font or the structure of a typeface since stuff like this can enrich the meaning of your design. It’s quite impressive, especially to your potential clients, when you actually know your craft. Also, as a designer, it's your responsibility to know the ins and outs of typography. And once you know the rules, it's easier for you to break them!

As with any skill or trade, you need to learn specific rules and guidelines before you can fully develop and expand your skill set. Here are 20 of what experts consider to be the most crucial principles of the art of typography.

1. Learn the basics.

The first step to more effective typography is to study the nitty-gritty of the art. If you’re new to its principles, you may think typography is just a straightforward practice. The truth is, it’s pretty complex because it’s a combination of art and science.

The composition of a typeface consists of specific vocabulary, accurate measurements, and central specifications that should always be identified and taken into consideration. Like with different design forms, you can pull off breaking a rule only if you know it by heart. And it’s only acceptable if you carry it out on purpose to create something of significance.

To get a better grip on the basics of typography, spend time studying and learning the art.

2. Take note of font communication.

Typeface selection is hardly a random process. Merely searching through your font catalog to choose a font you personally like rarely create an efficient end result. This is because there's a psychology linked to certain typefaces.

When designing, you need to make sure your type is connecting to your audience. This is more than just making certain that your copy is impeccably written. It’s also about ensuring that the font you use fits your market.

You wouldn’t use elaborate and rainbow-colored fonts for a law firm brochure, right? That would be better suited for a birthday invitation.

3. Understand kerning.

A sloppy kerning job is one of the cardinal sins in the design world. Needless to say, it’s a pivotal skill you must nail down as soon as possible.

Kerning is the act of fine-tuning the space between characters to produce a streamlined, unified pairing. It doesn’t sound too important, but an excellent kerning job makes a world of difference. Its main goal is to ensure that the space between each character is aesthetically even to create well-arranged text.

Also, programs like Adobe Illustrator can only do so much to automatically fix your kerning blunders. These errors are often subtle, especially with long sentences or paragraphs. But for headlines or logos, a bad kerning job can instantly ruin the whole design.

4. Limit your fonts.

One of the common slipups designers - especially newbies - do is using too many fonts and styles. If you need more than one, make sure to limit your fonts to just two to three typefaces. Use one font and size for the body, another for the header, and another for the subhead. Don’t hesitate to choose fonts from different typeface families, as long as there is cohesiveness in the pairing. Working with two very similar fonts can translate as a mistake on your part. Some would think you’re not careful enough and accidently used the wrong font.

Free Font Pairing Cheatsheet


Download the cheatsheet

img

Download the cheatsheet

15 Pre-designed Font Combinations

We've curated a list of font styles that work well together so you can design interesting type lockups in minutes.

5. Practice correct alignment.

Alignment is an imperative concept in typography. Many non-designers tend to choose between Center Aligned and Justified, which makes paragraphs quite hard to read. If you've used MS Word, you're already familiar with the four key alignment options: Left Aligned, Center Aligned, Right Aligned, and Justified.

Left alignment, aka Flushed Left, is the most common position used in practically everything because it’s easy on the eyes. Using right alignment, aka Flushed Right, to get text nicely arranged on one side only works if it the alignment is used properly. Justified is usually a nightmare for designers.

With both Left Aligned and Right Aligned, watch out for ragged lines. These lines are also quite obvious when Center Aligned is used incorrectly. When you see loads of “bumps” in your text, try adjusting the length of the lines.

6. Bring visual hierarchy into play.

Typographic hierarchy is the way you stress the significance of certain lines of type as opposed to others. As a result, you establish and move the order in which the audience receives information from the design. This is done by guiding the movement of their eyesight through visual hierarchy. Without using typographic hierarchies, it becomes challenging for readers to promptly identify important pieces of information within the whole design.

7. Work with grids.

It can't be emphasized enough how critical it is to understand and use a design grid. Working with a grid ensures that every little thing on the page is put in relation to something else to produce logical and visual harmony. It’s what makes everything look cohesive and interconnected.

Having said that, you don't have to use grids every time you create something. However, it benefits you a lot if you understand how and why grids are used, particularly when typography is involved.

8. Practice smart pairing.

It is possible to make your layout a lot more compelling through typeface pairing. Then again, using too many fonts at the same time can result in everything turning into a distraction. Not to mention, multiple fonts can confuse the audience on which elements of the design are the most important.

In general, you should only use a maximum of three fonts per design: the title, the subhead, and the body of the text. You get an exception if your design text is long. In this case, you can choose one or two more fonts.

9. Pick an excellent secondary font for pairing.

Font pairing is important to the readability of your design. When you have both a heading and a subhead, use two different typefaces that complement each other to establish visual hierarchy. The challenge with font pairing is to avoid using two contradictory fonts or two very similar fonts where you can barely see a distinction. The second font must be as captivating as the primary typeface without losing the overall uniformity or consistency of the design.

10. Learn to measure.

Typographic measuring is used to illustrate the full width of a block of text. Measurement is particularly important when designing a website. Not all fonts are equal to one another, which means different fonts take up different space rations on a web page.

The height of a character is referred to as its “x-height." When you pair fonts, make sure that they have the same “x-height.” The width of a character is called the “set width.” This is what covers the entire body of one letter, plus the space right after it. A “point system” is the arrangement generally used to measure fonts.

11. Prioritize readability.

Whatever you design, make sure people can easily read your message. This means dark text on a dark background is a big no-no. Even worse, avoid using a small font over a high-contrast image. You can have a striking design, but all your efforts will go to waste if your text is unintelligible.

12. Choose your font palette wisely.

Color is one of the most powerful tools of a designer. It only makes sense that a carefully set up color scheme is needed to complete a design.

When putting together a font palette, dig into the color theory to pinpoint the right colors intended for your design. For example, orange is thought to increase appetite, which explains why the said color is a widely used in fast food design.

There are specific rules and guidelines in terms of colors. And while playing around and thinking outside the box can produce a one-of-a-kind, punchy design, make sure your font colors are not too distracting, making your message confusing.

13. Get a handle on "widows" and "orphans."

One of the easiest ways to take your design to the next level is to identify and wipe out widows and/or orphans. A typographical widow is a line of text that is part of a paragraph, but has shifted over to the next column. An orphan is basically the same with an exception that there's only a single word left on its own. It's almost inevitable for widows and orphans to show up in any type-centered designs, so you must know how to correctly deal with them.

There are several techniques to manage widows and orphans. You can do a manual text edit to modify the length of the lines to completely eliminate the problem. You can also adjust the text box or the column size to enable the type to maneuver around the orphans and widows.

14. Avoid stretching fonts.

This is a very simple rule often overlooked by many designers, even the pros. In general, fonts are created with meticulous attention to the details (shapes and measurements) of every letterform. Stretching a font takes away its efficiency and value.

A common reason people stretch their fonts is to make them a bit taller or wider. There's a way to do this without distorting the typeface. You can choose tall or wide fonts from the seemingly endless supply of fonts online. Some come with a price, others are for free.

15. Keep in mind that white space is NOT an empty space.  

White space is a distinctive and valuable tool that can bring out something special from your design. A smartly-used white space provides several beneficial effects. It helps put more focus on a particular part of your composition. It lets the design ‘breathe.’ It stabilizes design components. It adds a level of sophistication to the design effortlessly.

Without adding a new element, white space can convey multiple meanings to the design. Let’s say you’re designing a poster for noise-canceling headphones. By simply placing the headphones on the canvas without additional elements, the white space highlights the gadget. It lets the headphones be the sole focus of the design. More than that, the white space visually translates how the gadget cancels outside noise because there are no other elements added.

16. Use and treat typography as art.

Quit thinking of typography as just the font(s) used on the text complementary to your design. Fonts are carefully fashioned and thus requires a level of artistry that becomes a valuable advantage to your design toolbox. This is beyond constructing plain text. It’s about treating fonts as a form of art. In order to produce a one-of-a-kind, text-centered design, think of how you can make eye-catching fonts as the design hero.

Also, don't feel like you’re limited by the composition of existing typefaces. Explore and expand your search to find the perfect one that will suit your needs. Then add swirls, textures, lines, and anything else cool, quirky, or fun to elevate the look and feel of the font.

17. Refrain from using design fads.

At times, design is like fashion with its never-ending fads and gimmicks. Trends come and go. Today, they are hugely popular; tomorrow, they are forgotten. And once the luster of the trend is gone, everything curated around it quickly becomes outdated and ineffective.

New design styles and/or methods fluctuate too. Some designers are quick to jump on the bandwagon since a new trend is exciting and easy to copy. But as quickly as trends dominate the design world, they also leave abruptly. So the logo you just created a year ago that’s supposed to last for many years is now considered dull and old-fashioned.

Having said that, you must also be aware of the font trends that dominate your niche. Monitor the popular ones and study them to understand why they become prevalent. Studying the trends means learning how to analyze design components. Try to size them up, but avoid jumping aboard any bandwagon without careful consideration.

18. Work with the right tools.

In the same way that a carpenter wouldn’t use a screwdriver to hammer a nail, a designer must know what tools fit the task. Even more importantly, you must know what tools you shouldn't touch. There are a lot of typography programs available online to help you determine the best tools for certain procedures. The most popular ones are designed by Adobe. Keep in mind that paid tools can be a bit pricey, so make a product comparison to know which tools you need to buy and which ones you can bypass.

19. Adhere to grammar rules.

Grammar can be a confusing and tricky design component since there are tons of hidden rules you may not be aware of. Making the effort to find out and learn the design-oriented grammar rules can help you create a professional-looking design. The three grammar pitfalls you must pay extra attention to are ampersands, double spaces after punctuation, and hyphens and dashes.

There are various guidelines for design-specific sentence structure. And while it may seem like a trivial thing to know, most designers would claim otherwise. Correct grammar is a subtle but potent tool that can elevate your design to a completely new level of professionalism as it displays keen attention to detail.

20. Find something that inspires you.

Just like everything else in life, having inspiration goes a long way. The best way to learn how to create efficient and appealing typography is to study existing typeface illustrations. Figure out what makes them engaging and effective.

You can find tons of articles online about design inspiration. But the World Wide Web is not just the only place to get you inspired. You can spark the flame of your passion with your surroundings. Try to spot fonts — and graphics — that catch your attention, things that make you want to step up your game.

Bonus tip: practice, practice, and practice some more.

Constant practice sharpens your skills. Knowing typography rules and guidelines can improve practically everything you design that has a key typographic component. Practicing these rules over and over helps you to easily master them. It’s only through actual training that you get to fully understand how each rule works.

Keep in mind that these rules are meant to guide and help you produce great typography. As you go along, you’ll discover that you can create magnificent work by blatantly breaking one or more of these the principles. It’s when you can push the boundaries to create something spectacular.

The time you completely understand a design rule is the time when you have the permission and authority to break it. Just be absolutely sure that the disregard is far from being random, but rather, carried out with a purpose to attain a specific typographical goal.

Free Font Pairing Cheatsheet


Download the cheatsheet

img

Download the cheatsheet

15 Pre-designed Font Combinations

We've curated a list of font styles that work well together so you can design interesting type lockups in minutes.

3 Comments

  1. RE: Widows and Orphans:

    Bringhurst describes W&O this way (which I read as different than your post):

    "Isolated lines that *begin* on the *last* line of a page are known as *orphans.* They have no past, but they do have a future, and the need not trouble the typographer. The stub-ends left when paragraphs *end* on the first line of a page are called *widows.* They have a past, but no future, and they look foreshortened and forlorn. It is the custom--in most, if not in all, the world's typographic cultures--to give them one additional line for company." (* used to indicate Bringhurst's italics). Bringhurst, Robert, The Elements of Typographic Style, Fourth edition (version 4.0), Twentieth-anniversary edition.

    So, your definition of orphan, and his, aren't the same. I've always heard it Bringhurst's way (and I worked at a newspaper, a million years ago).

    Offered for what it's worth.

You must be signed in to post a comment.

Made with Creative Market

Browse a gallery of inspiration made with design assets from Creative Market.

Explore the Gallery →

Meet the Creative Market Authors

Learn more about the talented writers behind the articles.

Meet the Authors →

Download Our FREE Branding eBook

Get a FREE, fun, and friendly guide to design your own brand.

Get your eBook →