• Home
  • /
  • Blog
  • /
  • 7 Basic Typography Design Elements Explained to Kids

7 Basic Typography Design Elements Explained to Kids

typography design

This post is also available in: हिन्दी (Hindi) العربية (Arabic)

Words and written text play an important role in our life. Whether it’s in books or on websites, on our phones, we all use them in our daily lives. Have you ever wondered what all goes behind the scenes to create these beautifully designed texts? The art of presenting text in a pleasing and appealing manner is called typography. Typography design plays an important role in the overall quality of the product, especially in animations.

What is Typography?

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed to the user. The arrangement of types involves many things like

  • Selection of typefaces
  • Point sizes
  • Line lengths
  • Line spacing (Leading)
  • Letter spacing (Tracking)
  • Adjusting the space between pairs of letters (Kerning)

It is also applied to the style, arrangement, and appearance of letters, numbers, and symbols created by the process.

Importance of Typography

Typography has two main purposes in graphic design. The first is to promote legibility, and the second is to help communicate the message. We’re drawn to visually attractive designs that are clean and easy on the eyes. Thus, it’s in our best interest, and our clients, to learn how to effectively use typography in graphic design. Furthermore, typography has a profound effect on the way that users digest and perceive information conveyed by the text.

Basic Typography Design Elements

Here are seven basic design elements to keep in mind when working with visuals and creating graphics.

1. Typeface

A typeface is the design of lettering that can include variations, such as extra bold, bold, regular, light, italic, condensed, extended, etc. Each of these variations of the typeface is called a font. There are thousands of different typefaces in existence, with new ones being developed constantly.

The first and foremost object behind effective typography is the clarity with which the content is being displayed. However, some of us make use of too many typefaces in our text. Doing so may make the content appear cluttered and unappealing to the eye. Moreover, a reader may get confused while reading some text.

It’s better to use only two or three typefaces – where one typeface is used for writing the headings and the for the body text, while the remaining one under special cases.

2. Hierarchy

One of the main roles of hierarchy is to help keep your ideas organized so that viewers can always identify which category of information they are reading. Hierarchy isn’t sizing alone but has more to do with the prominence of your typographic elements relative to each other. This could be achieved by using a different typeface, a contrasting, colour, spacing, or size.

A typographic hierarchy is a system for organizing type that establishes an order of importance within the data, allowing the reader to easily find what they are looking for and navigate the content. It helps guide the reader’s eye to where a section begins and ends, whilst enabling the reader to isolate certain information based on the consistent use of style throughout a body of text.

3. Contrast

The contrast makes text interesting and can help you communicate which ideas you want to emphasize. Varying size, typeface, weight, colour, and style can give your designs a big impact as well as make your ideas organized.

When we talk about contrast in typography, it can mean several things:

  • The contrast between large and small font types.
  • The contrast between different typefaces, for example, a script font used for a heading and a sans-serif font used for body copy.
  • The contrast between the font colour and the background it appears on.

4. Consistency

Consistency is a key principle for all typography. Consistent fonts are especially important, as using too many can lead to a confusing and messy look. Always use the same font styling for the same information. Decide on a hierarchy of styles and stick to it.

5. Alignment

Alignment refers to the “line”, that the text-oriented towards. It can apply to a whole body of text, individual words, or even images. Alignment should be as consistent as possible and every element of your design is meant to align to one of the other elements in some way, to create equal sizes and distances between objects.  For example, you may want the logo to align in size with your header, and you may want your body text to align with the same margins the header falls in.

6. Space

Space (Whitespace) is the space between graphics, text elements, and between columns on a page. It’s one of the most important elements in layout and design. It’s essential not to think of the space around your type (or graphics) as just blank space. Space is actually a design element all of its own and is used to create a classic or elegant appearance. 

A page with very little white space can appear too busy and may be difficult to read and focus on. However, some simple ways to increase the amount of white space around your type, are to use

  • bulleted items
  • headlines and subheadings
  • padding around images
  • margins

7. Colour

In typography, colour is a term with two meanings. 

First, typographers will sometimes speak of a font as creating a certain color on the page – even when it’s black. Used this way, the word encapsulates a set of hard-to-quantify characteristics like darkness, contrast, rhythm, and texture.

The second meaning is the usual one – color as the opposite of black & white. This was once an irrelevant topic, as most of us had to be satisfied with monochrome laser printers. These days, color printers are ubiquitous and more writing is delivered on screen. So color has become a practical consideration.

Image Credit: Watercolor vector created by vikayatskina – www.freepik.com

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>