[00:00] Whether you are designing an HMI or a website, the connections between typography and the user remain very similar. Think back to the last article, instruction manual, or a website you read. Was the content well organized? Was it easy to pick out the important elements? Did it communicate effectively to its target audience? Were you able to read through it with ease? The answers to these questions are dependent on the designers effective use of typography. Typography is the science and art of arranging letters and text with the intent of making the copy legible, clear, and visually appealing. Whether it be type for a website or text on a user interface, typography can push your design from just okay to great. Typography is so much more than just choosing a beautiful-looking font. It's a vital component of user interface design and the overall experience a user has, while using a product or a service. Good typography establishes a strong visual hierarchy, provides a graphical balance, and sets the overall tone for the product or a service.

[01:06] Typography should guide and inform your users as well as ensure an excellent user experience. Let's take a deeper dive into the details of typography and review some of its pivotal components. Readability is the strategic arrangement of letters and words to make a written content flow in a simple, easy to read manner. In other words, readability is how easy it is to read the copy. Several factors impact readability, which we'll take a look at. In typography, the point is the smallest unit of measurement. It's used for measuring font sizes, leading, and other items on a page. A point is 1/72th of an inch or 0.013889 inches. Points are fine for physical content but for a web-based content, you'll likely be better off with pixels, percentages, or ems since they tend to scale. So we have some units, but how are they applied? Well, they're applied to things like kerning, allowing you to adjust the space between two individual letters.

[02:06] Improper kerning can result in the letters in a word appearing too spaced out or too close together. Tracking is adjusting the space uniformly over a given selection of text. Next we have leading or line height, which is the vertical space between the lines of type. When adjusting leading, try to keep letters from touching so that they look visually balanced in their space from varied distances. Line length is the width of a body of text. For printed text, line length is fairly easy to define since you'll usually have physical dimensions, the copy needs to fit within. For electronic texts, things get a little trickier since we now have to account for factors such as scrolling. Long lines are easier for the reader to scan through, while shorter lines are better for texts that's meant to be read thoroughly. Line length is generally measured in characters per line. There are multiple studies on matter, but the general rule of thumb seems to suggest that 45 to 75 characters per line is acceptable and accessible for most users.

[03:08] Although lines can be shorter, such as captions or marginal text. Things you'll want to avoid are widows and orphans. They can create additional and uneven blocks of white space between paragraphs or at the bottom of the page. If a paragraph ending consisting of just a short line falls at the beginning of a new page or a column, that's called a widow. The problem with widows is that they break the flow of text. Depending on where you look, you'll find that orphans can be one of two different things. If the last line of the paragraph is short containing a word or two, that's considered an orphan. The problem here is that they generate additional white space on that last line, which stands out. In addition, if the first line of a new paragraph is at the bottom of a page or a column, that can also be considered an orphan. In that case, the problem is similar to a widow. They break the flow of text. Fixing widows and orphans is easy as there are a couple of ways to do it.

[04:02] First would be to adjust the margins, allowing more characters to fit within each line, as well as preventing new lines from starting at the bottom of the page. Alternatively, you could force line breaks earlier in the paragraph, reducing the length of a prior line so you can relocate the widow or orphan. As a last resort, you could always re-word the copy with the intent of either adding or reducing the number of characters. In type setting and page layout, alignment is the setting of text flow or image placement relative to a page. Alignment should be utilized when trying to maintain a connection between blocks of copy or images. Using effective alignment helps to maintain visual balance and organization amongst the content. You may have heard of the term "Serif" before, but it's possible you don't know what that means. The small features on the end of strokes in some fonts are known as serifs. A well-known serif font would be Times New Roman. Serifs are invocative of typewriters and old printing presses. And as such, they have an "Old World Feel" to them.

[05:03] In contrast, a "Sans Serif" or without serif is a more modern typeface. Common sans serif typefaces would be Arial, Helvetica, and Tahoma. These have a more modern feel to them, and are commonly used in web applications. In review, effective typography helps copy to be legible and readable. Paying close attention to the details can help improve your overall typography. And using effective alignment helps to maintain visual balance and organization amongst the content. Now that we've gone over what typography is, why it's important, and some general terms surrounding it, let's go over some best practices for choosing a typeface. First let's define what a typeface is. A typeface is basically a collection of characters that share a similar design. In the world of typography, typefaces are actually a collection of glyphs, but we won't worry too much about that distinction right now. You've probably heard of the term font. In our modern world, font is more or less synonymous with typeface, although they're technically different. A typeface can and usually does have multiple fonts.

[06:05] Each font follows the same general lettering design while having some other differences. For example, typefaces commonly include a regular font and italic fonts. In both fonts, the characters generally follow the same design, except the italic font has italicized characters. So we know what a typeface is, how do we choose one? It may seem like a simple task to just pick a font that looks cool and use it, but there are some other things to be aware of. Make sure to consider any existing typefaces that your company might be using already. Generally speaking, it's better to just leverage existing systems. It's also important to consider all the places the typeface you choose will be used. Will this be for both printed materials and web or digital content or just just one or the other? Does your project need to account for different languages? If so, there are typefaces that are built with that in mind. So you can design a more cohesive experience across different languages. Most well-designed typefaces families have a multitude of whites and styles that can be used to create a successful visual hierarchy.

[07:08] These instances can include headlines, hyperlinks, quotes, captions, footnotes, and so on. We recommend picking typeface families that have at least a couple of different weights, things such as thin, medium, and bold. So you have some options for your various interfaces. When choosing a typeface, you should also consider where you might obtain it. System fonts and fonts built into products you're using are easily accessible, but you can also find free and open-source options. If you're looking for something in particular, you might wanna try a paid type foundry. You'll get exactly what you want, but you'll need to consider the licensing fees that are involved. Try to use only one or two different type typefaces, one for headers and another for the bodies of text. Restricting the numbers of typefaces prevents the content from becoming visually complex, which in turn maximizes the communication elements of the content. When using multiple typefaces and make sure you don't select two that are very similar. Having some noticeable difference amongst the typefaces is fine and helps create a delineation between the two.

[08:07] Stay away from "Candy Jar" display typefaces that is try to steer away from the more flashy or overly decorated typefaces that can detract from the overall professionalism or communicate a focus of the content. If you're looking to browse different typefaces, there are a couple of great resources on the web. Google Fonts is a free resource, which works great for things like applications and websites. Adobe Fonts is a paid resource, but it's generally included with many of their subscription options. In review, use brand typefaces first before researching alternatives. It's important to consider all of the places the typefaces you choose will be used. Keep it simple using at most two typefaces, simple and clean over complex and decorative. Now that we've gone over things to consider when choosing a typeface, let's go over how to build out a type system. A type system is a collection of type styles that are used across an application or design and is used so that said design has a consistent look and feel across all pages and screens.

[09:06] Let's create a type system step-by-step and end with a few thoughts to keep in mind when refining a type system as it matures. And of course, this is an iterative process. Just because you set a size and weight at the beginning of the project, doesn't mean you'll end up being the same once everything's finished. One of the most important things to keep in mind when creating a type system is typographic hierarchy. This refers to a system for organizing text that establishes an order of importance within the content, allowing the reader to easily find what they're looking for, while navigating the content simply and effectively. Beyond contrast and colors, one of the easiest ways to create contrast in a type system is by using different type sizes, weights and styles. Just by changing a headline from a regular to bold can do wonders in creating a more user-friendly design. Let's start building a basic type system. This will include headlines, subtitles, bodies, captions and over lines, and buttons. We can always add in more styles to a type system, but remember to keep it simple, adding too many similar styles can create a messy and hard to manage system.

[10:09] Headlines span from numbers one to six, and are often abbreviated as H1, H2, H3 and so on. It's fairly common for headlines to use a larger size, mostly because making things larger helps them stand out more. For our example, we'll create a headline one and headline two. We'll use headline one for page titles and headline two for subheadings. The size you choose are dependent on a lot of different things, such as the intended screen size and overall look and feel of your design. The main goal here is to have a visual separation between the two. So your users can quickly determine their place in the hierarchy. Now, we might wanna add something for subtitles. These are smaller than headlines and are generally reserved for a medium emphasis text, that's shorter in length. Let's (indistinct) a subtitle styling that is smaller than both headline one and headline two and easily distinguishable between them. Body text refers to the informational blocks of copy that store important information relating back to the headlines and subtitles of page.

[11:08] These provide extra details that give users more information based on the context or purpose of the content being displayed. It's usually helpful to have two sizes of body, a standard size, so body one and a small size, body two. This will give you greater flexibility when creating different levels of hierarchy in your design. Captions and overlying texts or text with a line above it are the smallest font sizes. They are used sparingly to annotate imagery, or to introduce a headline. Consider alternate styles for different levels of hierarchy to make it easier to know which things are primary and which things are secondary. We'll select the smallest type size for both of these. I like the easily distinguishable italic styling for captions, so let's use that. For over lines, it's nice to use all caps and a little more weighty style to make them stand out even though they are small. "Button Text" is used to call action, two different types of buttons and tabs and so on.

[12:05] Use caution when having button text appear distinct from non-interactive text. The goal here is to make something that is clickable look clickable. Normally it's good to create a primary and secondary type style for both a button and a text-only application. This way you have two ways to create buttons in your hierarchy. Let's create a button with all capital text in it, and then a text-only version without the surrounding button. Now that we have a general type system set up, we begin to refine it as necessary during the design process. Making any typeface bolder or thinner is another quick way to create hierarchy, followed by styles of italic or underlined. These various styles should be used sparingly, so try not to use too many at once on a single page or a document. When using multiple weights to achieve visual hierarchy, use a rule of thumb to pick a weight, then skip a weight. Doing so will allow you to create a stronger visual contrast between type sections, thus, making it easier for a user to tell them apart from one another.

[13:02] Looking at our system, we can see that there is already a nice use of style throughout, so I don't think we need to change anything here. With the vast amount of different screens floating around these days, it's important to remember that one single type size will not fit all screens. If an application is designed to run on different devices, then those different perspectives should be considered once selecting type size. The screen size of a smaller device simply can't display the same amount of information as a larger display. So to make things easier, we suggest you scale content down. And this is okay because screens that are smaller are likely to be closer to your face, allowing you to still be able to read the content without issue. In our example here, we resize a few of the items from our type system we created earlier. Headline ones are usually something that needs a slight adjustment because on a large screen, there is more room for a larger impact, but on a smaller screen, there's only so much space to accommodate that larger type. Body text can sometimes be consistent across screen sizes, but there are times when it needs to be scaled down too.

[14:05] For our example here, the body text needs to be scaled down slightly to fit the screen comfortably. These are just a few examples, but when designing a full type system, be sure to take into consideration each item for small, medium, and large screen sizes. Typographic hierarchy establishes in order of importance within the content, allowing the user to navigate simply and effectively. Consider ultimate styles for different levels of hierarchy. When designing for multiple display sizes, remember one type size will not fit all of them. Stepping back, you can see just how many decisions can be made when designing with type and how they can drastically affect the user experience and visual hierarchy of a design. The important thing here is to at least be thinking about them as you move through the process. As we said on many occasions, keep it simple at the start and build on your system as the project progresses.