14 Typography Skills Every Graphic Designer Should Have

Friday, January 18, 2019

Typography is an important part of web design. Its impact on the overall design of the website can’t be stressed enough. To create harmonious and readable web pages, designers should pay attention to two main factors — font size and space. By changing these variables, you can create an engaging experience for the reader. Designers have to also pay attention to how typefaces are going to look on various devices. By keeping aesthetics and functionality of the typefaces in mind, web pages can be designed to draw in a customer to read the content. Let us dive deeper into the factors that influence typography and learn some tips and tricks to make your content more readable and engaging.

1. Font Size

As designers, you have to know the appropriate font sizes when designing to multiple screens. Typefaces that work on desktops need not necessarily work on mobile devices. For example, font sizes on a desktop vary anywhere between 11pt-14pts. When the same size is used on mobile screens, it will appear too big or small. For mobile screens, typefaces should be readable when held at a natural distance. So knowing the right/appropriate font sizes will help create a better reading experience for the user. For body text, font sizes fall anywhere between 14-16px while secondary or less important fonts can be anywhere between 13px-14px. It is advised to view your typographic choices on the actual device before committing to a standard. This will help you communicate your message with clarity.

2. Measuring Units

For font sizes for mobile devices, ems is considered to be the basic standard. Designers are able to easily scale the sizes of the typefaces because it is based on percentages.

3. Choose contrasting colors

By placing text on a contrasting background, designers are able to add visual interest to the layout. Contrast can be applied to the heading or sub-heading or in relation to text underneath it. If the background color is dark, you can choose a light colored text that can help make the content more readable.

4. Selecting fonts

It is important to choose the right font to ensure readability of the content. When choosing a font, it is better to pay attention to the overall legibility more than the style of the typeface. For example, headings and sub-headings are usually used to draw visitors to the content. So it would make sense to use stylized or decorative fonts for this section. The body of the text should be more readable, it is better to set it to a classic style. This will make the reader read through the entirety of the content.

5. Alignment

Readers prefer to read the text in blocks, especially on a small screen. Text on a small screen should be designed such that the words on the line are spaced equally. This will help eliminate rags on either side of the block. Left justified alignment often ends up being the best choice since it leaves no room for inconsistent white spaces.

6. Leading

When designing for mobile screens, it is better to stick to consistent leading. Leading refers to the space between the lines. Bu tightening the space between lines, you are able to improve the overall readability on a mobile screen.

7. Combining fonts

Finding the right combination of font size and leading will you create an effective block of text. Experiment with font styles and find the perfect combination that ensures readability and minimizes distortion.

8. White Space Visualization

Use space to enhance the design of web pages. By adjusting the space between lines, letters and graphics and paragraphs, you can create a layout that is easy to grasp and in turn, make it more readable. For example, in the case of CTA buttons, the space that surrounds them makes these specialized buttons and links pop.

9. Screen Width and Typography

Screen widths play an important role when designing to devices. For mobile screens, both vertical and horizontal widths must be taken into account to figure out the best alignment and spacing.

10. Use unique font styles

Headings and sub-headings usually have to draw the crowd in. Use decorative or stylized fonts here. This will make the content more distinguishable. Adding some form of visual interest here will enhance the overall visual experience for the user.

11. Functionality

Keep the functionality of the application into account when designing for a mobile web page. Set a particular text to execute a certain function – This will help the users distinguish the text from the other elements on the page and perform specific actions, like send a message or make a call.

12. Font Weight

Experiment with font weights to find the perfect font for your screen. If the trend is all about using big, multiple font weights– text it across different resolutions to ensure minimum disruption.

13. Background

If the background is light, use a darker shade of text color to create the right contrast. For video or for a moving image, try experimenting with color and style. If your page is text heavy, try to minimize the use of interactive elements. If your page involves more hovering, typing, and editing, try to adjust your text and its placement accordingly.

14. Pairing multiple fonts

Combine multiple fonts when designing text for headings, sub-headings and body text. By doing this, designers can create contrast and emphasis to the content that is being designed. This will not help make it readable but also make the overall reading experience a lot more interesting.

Text being one of the primary ways of communicating, designers often end up devoting their entire careers to type. When choosing and selecting a font, it is important to identify the purpose of your design, as it would have to align with the purpose of your project. We hope that these tips will come in handy the next time you take on a typography project.