The Art & Science of Typography – 4 Basic Principles

Typography, like any other art, has some set of principles. Let’s explore some of the basic ones today.

typography principles

Ok, with a few tikka tikkas (remember, Courage the Cowardly Dog!) you can type away your message conveniently to anyone, connected to you in a digital space. However, along with such conveniences comes the lack of curiosity to pry into the sciences of “Typography”.

Typography is, in itself, an art that entails its own rules, elements and aesthetical principles. Learning what makes it so important to communication (be it print or digital) is necessary to produce an effective result.

So, here in this post I’ll present some key principles of digital typography, and empower you to add subtleties to your content, and make it clear and appealing.

Wait! Before moving forward, wouldn’t it be better to take a quick look at the importance and elements of typography? You wouldn’t mind refreshing your know-how of the basics of typography, would you?

Importance of Typography

Typography is the art that never gets old, although it may refine with the nuances of the new era. It is what that adds power to our communication. It galvanizes us to mold the content by arranging type and personifying the language we use, and ultimately define the flow of the thoughts and expressions emitting from our mind.

typography deadpool

In all, typography isn’t just a set of stylish fonts with elegant curving or aesthetics, but a tool that lets you carve the content in a way that ensures readability and thus effective communication.

The Elements of Typography

Every art is bound by some elements and principles, and the art of typography as well doesn’t get to make any excuse here.

Typography contains a wide list of elements that allow designers or professional typographers to ensure equilibrium in the content and the design. Take for instance Kerning, which is used to attune the horizontal spaces among the characters of a word. It not only allows more balancing between the characters, but adds more clarity to the content.

kern me

Play around and kern the words on this amazing website, Kern Me, to see how spacing affects the readability of the content.

The Principles of Typography

Readability is the core focus of a great typography. However, achieving it can sometimes be quite arduous, unless it closely follows a defined set of industry-approved principles.

Undue Color Contrast Is Poison to the Eyes

Colors are important as they add life and joy to the text. However, using the contrast to extreme levels often end up driving the eyes (users) away from the content. You can’t achieve readability if you force your users to narrow their eyes to see what’s being communicated.

True readability can only be assured if the text can be scanned easily, i.e., in one go. If it isn’t, then you need to rework on your color contrast.

color Contrast

As you can see in the above image, the text in the first row is although readable but it also hurts the eyes with its extra sharp contrast. Likewise, the text in the second row is also a big fat NO, NO as it appears barely visible to the eyes.

The third row features the right contrast of text and background color as they not only resonate well with each other but appears smooth and appealing.

Clever Use of White Spacing

White spaces not only add a minimalistic look to the visuals of the content, but it also encourages clarity. It adds sufficient spaces between the lines or paragraphs that leave no room for any type of clutter.

When it comes to content, cluttering can considerably cut back the readership of the content. The shrunk or too narrowed text and line spacing make the content look ugly and sometimes illegible.

white space finch

The above image of a website, Finch, is a great example that shows a dynamic combination of proper color contrast and white spacing. The contrast makes the content look fascinating while the white space makes sure that each segment of the content is easily legible.

Scan-ability Encourages Readability

When a user first lands to a page, he never starts reading the content first. He skims it and scans the important areas that meet his interest for which he has visited the site. Therefore, taking scan-ability and readability as synonymous would be a great misunderstanding.

Easy scan-ability leads to readability, not the other way around. Scan-able content is one that puts emphasis on having neat hierarchy, engaging headers and clear focus points.

typographic hierarchy

The hierarchy allows you to present a neat content with each section clearly presented in order. Appealing headers, as it sounds, engages the wondering eyes of the users, while focus points seize their attention with clear call-to-actions, offers, deals, etc.

Refrain From Contorted Typefaces

Each typeface is created with some purpose in mind, as well as the needs of the users. When creating typefaces, type-masters know it well where the typeface would fit perfectly, where it can perform well by being paired up and where it may not work at all.

Stretching the typeface to fill the whitespaces or squeezing it to fit a box would not only distort the typeface but also make the entire text seems dull, ugly or incomprehensible. Keeping the appeal-factor aside, users want clear typefaces that they can skim or read with ease. By doing the opposite, you won’t only kill the purpose of that typeface but also lose the attention of the readers on your site.

Plus, it is also important to use other sorts of emphasis like bold, italic or other types of styling sparingly.


Learn, learn and learn. As I said earlier, typography is an art, and you can’t master an art when you’ve a vague understanding of it. So, learn more about it online or from an experienced type expert you know. But for now, start with the 4 aforementioned points and see where it leads you.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>