Why is typography important in web design

Webdesign Basix Why typography is important

Typography is one of the most important skills a designer can have. Industry veterans spend years honing their technique, and you could easily spend years in college studying the subject. But where is the best place to really get started? Today, in the latest addition to our Basix series, we introduce typography for beginners by explaining one simple thing: why typography is so important in web design.


What is typography?

Typography is an ancient discipline that can most simply be explained as the art of arranging and creating the written word. The first examples of typography date back to 1800 BC. BC back. with the ancient Greeks, but modern typography is tied to the mid-15th century when the printing press was invented.

I'll keep the history lesson brief here: Typography is important for one reason: because designers can primarily communicate with readers? Regardless of whether the medium is a book, a print advertisement, a billboard or a TV show, typography is important because it is the embodiment of the imagery.


What do we mean when we say "web typography"?

96% of the Internet consists of written information or text. This text is divided into large and small amounts of information, which are spread over different pages with different formats.

The formatting of all this written information in the design of a website is what we call "Web Typography".

Typography is the most important part of any web design as it affects the way a website communicates with readers. From larger headings and bold blocks to small bodies of text, the various uses of text on the web are the most important methods of communication. Hence, it goes without saying that the way a web designer arranges the type on a webpage is critical to the effectiveness of that website.

We see its use everywhere as all websites rely on typography to get their message across to readers. However, there are some web designers who overlook the inevitable importance of typography and only focus on the visual or graphical part of web design.


How is web typography different from print typography?

Using typography for print media such as brochures, flyers, magazines, books, or outdoor media such as pole signs and billboards is different from using it for the computer screen. Typographically, is the screen a completely different medium? And as with any type of design, you really need to consider the medium through which people view your design. Look at the following two pictures:

The picture above is a poster for the band The Black Keys. The picture below shows their website. Same gang, different type of typography. Why? Because the medium (and therefore the message and intent) is different for each design. One is promoting a concert, the other is a portal for all kinds of information about the band.

If you are using the typography in a print design for something like a book, then you can play around with the fonts quite a bit as it will be viewed from a closer environment as it will not affect readability. If you use typography for outdoor communication media such as a billboard or poster, you know that the reader only has a fraction of the time to look at the board and consume the means of communication a lot - instead, one can rely on the first impression a legibility focus of type.

With a website, however, there are completely different goals. Creating typography for computers and the Internet requires the designer to divide a lot of information into different segments and sub-segments (micro and macro typography). In addition, a web page is not constant as it has to be displayed in different browsers, different Internet access devices and with different screen resolutions. Web typography therefore faces a number of problems when compared to other media. When choosing typography for their website, a designer must consider cross-platform compatibility and readability. These are just some of the issues a web designer must consider when approaching a website.


Web typography is "information design"

When it comes to web design, typography is not limited to just choosing a font and how it is arranged. It is the Art of splitting up bundles of information so that the reader has a good chance of finding out what is of interest to him? Here, typography on the Internet is more of an information design.

Typography on the web is not just about converting the type into effective, meaningful layouts, it's also about having a great font.

Bringing attention to a particular block of text, helping users find the content they are looking for, or putting a lot of content on a single page, is all done through typographical skills.

The idea of ​​designing the type should be more than just readable, but also be makes sense is part of what confuses a lot of people about web typography. Anyone can enter a section of text. Fewer people can use things like letter spacing, line height, and font size to give the character a character; However, the best web designers can organize the type across an entire layout so that readers get meaning and are directed across the site.

This is what we mean by typography as information design.


Macro typography and microtypography


From I love typography

It is often helpful to start the typographical system for a design by breaking it down into two distinct segments:

  • Macro typographywhich consists of the entire text structure of the document
  • Microtypography, This includes the smaller and more detailed aspects like font, line height and spacing, etc.

When you first approach macro typography, it can be easy to sketch out the "bigger imagery" elements of the type system in a design. Where will the navigation be? How is the guy designed on the website? A column? Two? More? All higher-level structural rules should be defined first. At this point, can you use almost any font you want? However, you can get a feel for the size and scope of a design.

Once you've sketched the "big picture", it's time to get into microtypography. This is where you will really refine your type system by defining the style elements, e.g. B. Your primary (and possibly secondary) font, size of large headings, default page title size, paragraph text, link color, etc.


Web typography tips

If you're just starting out as a web designer, looking at the wild and crazy things that happen to web typography can be a challenge. You may have a number of questions like: Where do I start? What is right and wrong? Are there any rules that I have to follow? The good news is that at its core, web typography actually has some consistent rules that you should know about. Here are some useful tips for creating effective type systems for the web:

Clean and clear hierarchy


Thinking with type

The hierarchy of typography is very important for a web design. Think of all the different places you use text on a website: navigation, headings, paragraphs, captions, sidebars, etc.? Chances are there is a lot of text! How can you make all of this into a logical type system? By developing a type hierarchy.

A well-developed hierarchy allows you to know where to start reading, how to continue reading, and the difference between the most important and the less important information on a page. With an effective type hierarchy, you no longer have to rely on text placement to highlight what your readers need to go through first.

Read more about the hierarchy


Cascading Typography - Be Consistent

The lack of consistency in typography is one of the most common and repeated mistakes web designers make today. A print designer often meticulously designs every letter on a page? but that is not necessary with webdesign.

Instead of trying to manually design every single element on a website, consider the idea of ​​Cascading Style Sheets (CSS). Take advantage of CSS and set the font, size, color, line spacing, height and other characteristics of your typography across the site.


Go through the text

I've mentioned this before, but I want to stress the point: Great web designers do more than just place images and add text to a web layout. It takes good professional habits to create a successful website design. One of the best professional habits a web designer should have is this read the text before inserting it into the web layout. If you have access to the text content you want to use, avoid blindly entering that text. By going through and reading the actual text, you can make a better connection between content and design.

When you have finished adding the text and other elements in the design, you should revise the text as proofreading to avoid mistakes or things that are left out. It's amazing how often designers forget to design simple things like bulleted lists because they have gone through the design phase.


Macro and micro typography - both matter!

For a successful web design, a web designer should consider both macro and micro typography. Even the best layouts can fall apart if things are missing on the "micro" side? and even the best microtypography is of no use to readers unless it is laid out along the lines of macro-typography. Both is important!

Many designers are particularly good at one or the other? Take some time to consider what your strongest color is: macro or micro? Then do your best to strengthen your skills (through practice and attention to detail!) In your weaker skillset.


Colors and typography

This goes without saying for many designers, but the color of the text is also important. There are hundreds of websites that take this point for granted and use font colors that either:

  • Make the typography immensely difficult to read
  • or? are boring! (and dull colors are wasted colors)

You don't have to splatter the entire rainbow all over the page, and you don't have to use something terrible like red text on a green background. Just use simple and meaningful color theory to choose colors for your legible and interesting fonts. Remember that in most cases links should be colored. It tells people they can click on it!

Read more about web design color theory.


Design with the "Live Text"

Stop Using Lorem Ipsum! The actual text cannot be replaced when designing a website. You can use dummy text to get an idea of ​​how things will look in layout. Once your web design is complete, try to use the actual text that you or your client want to use on the live website. Only then will you be able to sync the design with the text and determine what the entire website will look like. Even minor omissions in this process can lead to weaknesses in a design. So take the time to use Live Text before declaring a project "complete".!


Show your typographic personality

The wonderful thing about web typography is that there are so many approaches - every designer has their own style, and there really isn't a single "right" type of layout on the web. Type has a personality just like you or the client you work for. So don't worry about playing around with your own creative variations once you have the basic idea behind a website design.

Read more about choosing the right font


Conclusion: practice makes perfect

For web design, you need to master a few things to create a really great layout. Typography is definitely one of those things. A web designer who really understands the importance of typography can hit the success factor more often than usual? and all it really takes is practice to train your head to find the best possible way to lay out a particular piece of the type! Typography isn't rocket science, but it takes a lot of work to figure out the best course of action for a given project.

Take some time each day to practice. Take an item you really like and redesign it. Design your own resume, portfolio, whatever you can find? Just use all sorts of ideas to practice with and you will get better in no time! Trust me, once you understand the basics it will be a breeze!

This article was co-written by Arfa Mizra and Brandon Jones. Thank you for reading!