Principles of typography to beautify your designs

Aesthetics are the main driver of your design. You want something to grab attention and compel people to take action.

This is where typography comes in. Typography plays a huge part in how your designs look and feel, but it only has an impact if you know how to use it effectively.

But what is typography anyway?

A famous Swiss typographer, Emil Ruder, wrote something on his print materials all the way back in 1969 which still makes sense today in the digital world.

Typography can make or break your design. More than 95% percent of information on the web is in the form of written language.

Optimizing typography is optimizing readability, accessibility, usability(!), and overall graphic balance. Organizing blocks of text and combining them with pictures… Isn’t that what graphic designers, usability specialists, information architects do?

In this article I will share some basic principles of typography on how you can optimize your typography to craft amazing user experiences.

These are some fundamental principles of typography which date back to 1992 and are not only limited to web design but can be used for any print matter since type is everywhere. So any designer can read it.

1. Typography exists to honor content

Original post

It is a craft by which the meanings of a text (or its absence of meaning) can be clarified, honoured and shared, or knowingly disguised.

Attention: Typography should be able to draw attention on itself before it is read. And yet it should be able to retain the attention it has drawn.

Durability: It is the traditional goal of typography. It should not be immune to change but in sync with fashion. Typography is a visual form of language linking timelessness and time.

Legibility: Typography is not just about legibility — it has to do with earned or unearned interest, something that gives its living energy to the page. It takes various forms and goes by various names, including serenity, liveliness, laughter, grace and joy.

2. Letters have a life and dignity of their own

Original post

Well chosen words go hand in hand with well chosen letters. They deserve to be set diligently in a well mannered structure. The typographer’s task has always been to add a somewhat unnatural edge, a protective shell of artificial order, to the power of the writing hand.

3. There is a style beyond style.

Typographic style, should be able to free flow in whole domain of typography, being able to function and serve its purpose at every step.

It means typography that can walk familiar ground without getting cliché. Typography which can adapt to new condtitions with innovative solutions which does not frustrate the reader with its own originality in a self-conscious search for praise.

4. Read the text before designing it.

Original post

The typographer’s one essential task is to interpret and communicate the text.

  • The Format: The basic dimensions within which we set type
  • The Grid: Type size, proportion of columns
  • The Hierarchy: How the different type sizes and the formatting relate to each other, its logical structure

These all determine the possibilities of its typographic form. The typographer is to the text as the director to the script, or the musician to the score.

5. Discover the outer logic of the typography in the inner logic of the text.

They are often layered with chapter heads, section heads, subheads, block quotations, footnotes, endnotes, lists and illustrative examples.

Each requires its own typographic identity and form. Every layer and level of the text must be consistent, distinct, yet (usually) harmonious in form.

The first task of the typographer is therefore to read and understand the text; the second task is to analyze and map it. Only then can typographic interpretation begin.

The typographer must analyze and reveal the inner order of the text, as a musician must reveal the inner order of the music he performs.

6. Make the visible relationship between the text and other elements (photographs, captions, tables, diagrams, notes) a reflection of their real relationship.

Original post

Ask yourself these questions when text is tied to other elements.

  • Where do they belong?
  • If there are photographs or other illustrations, should they be embedded in the text or should they form a special section of their own?
  • And if the photographs have captions or credits or labels, should these sit close beside the photographs or should they be separately housed?

When you proactively ask these questions you will start to make sense on what works and what doesn't.

7. Choose a typeface or a group of faces that will honor and elucidate the character of the text.

The moment a text and a typeface are chosen, two streams of thought, two sets of habits, or if you like, two personalities, intersect. They need not live together contentedly forever, but they must not as a rule collide.

A good typographer handles them in intelligent, coherent, sensitive ways. When the type is poorly chosen, what the words say linguistically and what the letters imply visually are disharmonious, dishonest, out of tune.

Typescales is a plugin available in figma which creates consistent different sizes of your type with just one click.

8. Shape the page and frame the textblock so that it honors and reveals every element, every relationship between elements, and every logical nuance of the text.

If the text is long or the space is short, or if the elements are many, multiple columns may be required. If illustrations and text march side by side, does one take precedence over the other?

And does the order or degree of prominence change? Does the text suggest perpetual symmetry, perpetual asymmetry, or something in between?

9. Givefull typographic attention even to incidental details.

The typographer can make poignant and lovely typography from too much information. The ability to do so rests on respect for the text as a whole, and on respect for the letters themselves.

The take away

There may be exceptions as to how one uses typography to serve its purpose. But we can agree that typographer should perform these services to the reader.

  • Invite the reader into the text;
  • Reveal the tenor and meaning of the text;
  • Clarify the structure and the order of the text;
  • Link the text with other existing elements;
  • Induce a state of energetic repose, which is the ideal condition for reading.

Conclusion

Typography cannot be ignored. Bad typography can lead to an unpleasant experience. It is essential to master typography for legible, clear, and visually appealing designs.

If you have an idea you can reach out to me on these other platforms:

Linkedin | Instagram | Twitter | Behance

--

--

Crafting digital experiences. https://instagram.com/avi_ux?igshid=Nzg3NjI1NGI=

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store