Typography 101: The Basics

Text is the main method of internet communication, making web typography important to understand by traders. This article will include several basic typography and provides several things to consider when working with text.

I will assume that the reader is quite familiar with the processing of words to miss the basics, such as alignment of text and tilted and thick fonts. Instead I will discuss the concept that is less well known, which may be familiar, even if the term is new. Learning terminology will help you identify and control what happens when you work with text.

Typefaces vs. Fonts

General misunderstanding in typography is that font is the same as typography. In fact, the type of letter is a set of fonts, or “font family,” which contains all the variations of the fonts. For example, in Arial letters, you will find Arial fonts, thick arial, narrow arial, narrow thickness and so on.

In connection with the web, certain typography is considered “safe web,” while others do not. In other words, there are certain font families that will be displayed in all browsers while other font families do not. Remember this when working with text for the web.

Serif vs. Sans-Serif

Serif and Sans-Serif illustrate whether the font has additional serifs at the end of certain characters. I call Serif “feet.” Naturally, the Serif font will have a serif while the Sans-Serif font “Sans” is the French word for “without”-not. Arial is an example of Sans-Serif font and Times New Roman is an example of the Serif font.

Serif and Sans-Serif fonts are more than just fonts with or without “legs.” For most readers, Serif fonts are easier to read in print material than sans-serif fonts, because Serif helps guide your eyes from character to character and from word to word.

However, the opposite is generally true when dealing with digital texts, making the selected fonts that are preferred for the body of the web body.

This does not mean that the Serif font should not be used on the web or sans-serif font should not be used in print form. You only need to consider what you plan to use fonts. If you publish all copies of your website’s body in the Serif font, you might want to reconsider.

Kerning, lead and track

The first and simplest concepts are leading “ledding.” Leading is the vertical distance between the text line. Leading can be adjusted to increase readability or add aesthetic value to the body of the text.

Tracking, as I mentioned is often confused for kerning, is the distance between the characters in the text line. You can think to track like leading, but dealing with the character in the row instead of the line itself. Tracking is a good way to balance a few lines of text without losing the desired font size, as seen below.

Kerning is similar to tracking except just adjusting the space between certain letters. This can be confusing, but I think the example of Wikipedia below does a good job in describing the difference between tracking and kerning. Most of the upper class typography will have kerning that has been determined in the font. Note that even though they are different, tracking can be used to manually reach kerning.

General use principle

Now I have discussed several basic typography, it’s time to see how typography can be used in a design.

Contrast

An important thing to consider with typography, especially with web typography, is contrast. Because the computer monitor uses light to produce images, displaying text with too little or too much contrast can filter the eyes.

Think back to the days of the web when the text is colored on a popular black background. Remember how to read something on the sites is difficult? That is an example of too much contrast.

There are no universal rules that determine contrast and typography. Maybe there are examples where you want to use a white text with a dark background. My advice is to consider how much text you face and if too little or too much contrast will cause additional tension in the eye.

Typography Hierarchy

Another important part of the text and design is “typographic hierarchy,” systematic size, weight, distance and placement of text to emphasize or eliminate information on the page. This is something we see all the time with text and is very important in web design.

The purpose of the typographic hierarchy is to make a flow in all documents or pages while attracting attention to important information. This is done using a consistent format for the same important information.

For example, in web design we define the H1, H2, and H3 HTML tags to make text to a certain level of our hierarchy. The H1 tag will be at the top of our hierarchy. All H1 tags have the same font, weight, color, and style tag on the given web pages. H2 will follow, have different aesthetic fonts, weight, color, and styles of H1.

Not only the typographic hierarchy of the best way to handle the importance of information, good hierarchy will guide readers through the page by creating a natural path to follow their eyes. Look at any newspaper today and you should be able to see a typographic hierarchy.

Consistency
Consistency runs with a hierarchy, but it needs to be handled here, just because of some misunderstandings. You may have heard that you only have to use one font for your site. Although there is a little wisdom here, this is not the whole truth.

Many new designers fell into the trap using too many fonts on the page. Even with specific fonts assigned to specific levels in the hierarchy, too many fonts start to compete with each other and disrupt the pages. However, it is not to say that you should not use more than one font on the site. The goal is not to have a competitive font.

Working in letters is a good place to start. This will give you a lot of variations of fonts to start building your site. It’s okay to use some typography as long as they do not interfere with the continuity of the site. For example, flower script fonts can be too contrast with blocked sans-serif fonts. At the same time, avoid using two or more typography that is too similar, because this can also cause confusion.

You can escape by using more unclear fonts for the title of the site or logo without reducing the flow of the rest of your site. When you start paying attention to several fonts of several types that run throughout your site, you might want to consider things that simplify.

Once again, there are no universal rules for dictating fonts. For example, here are sites that use several fonts without disturbing the overall site flow.

If this all seems confusing, I recommend limiting the number of fonts that you use for now and only try to feel the flow and hierarchy of your site because it is related to typography.

Beautiful Type World
The world of typography is very broad. We just scratched the surface here. Meanwhile, pay attention to the typography on your ecommerce site. Very important for good design – and communication.