9 rules of typography that can make your mobile advertisement more notable

Go Mobile shares typography rules that you should remember about while making banners for mobile advertisements.

The biggest part of the successful advertising campaign is a good banner. Creativity in mobile advertisement is limited by the size of the device screen. A visual should be eye-catching, the typography should direct the user’s attention on features of the product.

We will talk about 9 rules of mobile typography that can help to build a visual hierarchy and concentrate the user’s attention on your advertisement.

The layout of the text

Rule №1. Put the important information in the upper part of the banner

We go through the screen from top to bottom. So the best place for the most important information is in the upper part of the banner.

Rule №2. Use alignment on the left side or in the center

Most of the audience read the text from left to right. In the end of the line the user’s look goes back and only then goes down, so the alignment at the left edge is your assistant.

On the contrary, the alignment on the right makes reading more difficult. Users can quickly lose interest in the banner, that’s why I don’t recommend this option.

If there is a couple of lines, you can align them in the centre. Try to separate the text by the lines like «pine tree» or «rhombus» but avoid splitting text by «sandglass» — this format is harder to perceive.

Rule №3. Take into account safe zones of the platforms

For some advertising formats (like stories on Instagram or videos on TikTok) there are safe zones where you can’t insert important information, because it will be covered by the interface of the app. If you break the border of safe zones, you can mess up even the most beautiful banner.

Size of the text

Rule №4. Remember about visual hierarchy

Large text attracts attention at first. Use headings and subheadings to create a visual hierarchy of elements on the banner.

The smaller the banner is, the smaller the font size contrast should be between the heading and the subheading. It’s better to use one font size on the smallest banners to create a visual hierarchy. There are also other tools to do it, for example, a colour or weights of fonts.

Cut the text if it’s hard to read it in a small format.

Fonts and tracings

Rule №5. Use grotesques

In printed materials, antiquities are used more often (fonts with serif). On banners it’s better to use grotesques (fonts without serif) — it will be easy to read them even in small formats, because they don’t have small elements.

Avoid manuscript fonts because they are harder to read. In mobile ads the user has little time to read the text, that’s why it should be perceived automatically, without reflecting.

Rule №6. Use tracings to create a visual hierarchy

If the size of the banner doesn’t let create a visual hierarchy using one font size, then use different tracings (the style of fonts: slope, thickness etc.) or other fonts. They’ll help highlight the important meaningful elements. But be careful — thick tracings can lead to the text being lost and unnoticed.

Rule №7. Don’t use a lot of different fonts and tracings

Another extremity to avoid is abundance of different tracings and fonts. It has been proved that it is best to use not more than two fonts and three font sizes. More than that is more difficult to perceive.

Work with space

Rule №8. Remember about the «space» between elements

The common mistake of beginners is the desire to fill all the editing areas of the banner. But every piece of content needs space. Space between meaningful elements helps them to open up and draw attention.

If you put the details too close, they will mix with each other. The message won’t be readable, and the advertisement will be quickly forgotten without leaving the brand name in memory.

If you want to highlight the object on the banner, then leave some space around it.

Colour

Rule №9. Color is one of the ways to create a visual hierarchy

When the size of the banner doesn’t allow you to enlarge the heading, a color can help to create a hierarchy in the text.

For example, we can make more important details brighter and eye-catching and less important (for example, disclaimer) dim and unnoticeable.

Bonus!

Some advices that will help you to avoid common mistakes:

• Don’t mix up the dash « — » and the hyphen «-». The dash separates parts of the sentence, and the hyphen separates parts of the words.
• Don’t leave conjunctions and prepositions alone at the end of the line unless the composition requires it.
• Don’t use Caps Lock if the text is long. It will be more difficult to read. You can use Caps Lock only if you have a short text of three words. This way you can increase the space between letters.
• Don’t put a dot in headings. Instead of it you can use exclamation points, ellipsis. Or you can leave the phrase without any punctuation mark.
• Use only these quotation marks «». If you need to put something inside them, you should choose inverted commas „ ”.

We’ve prepared a short checklist for you — use it in your work and users won’t ignore your eye-catching banner.

Of course, you may not follow all of these tips and rely on your taste and experience. Rules are made to be broken, the main thing is to do it consciously. If you are sure that your vision will make the creative better, then do it!