Benefits of Typography

Good and appropriate use of typography helps in better readability of textual content that also indirectly enhances the user experience. Typography creates an optimal balance between content, tone, and graphics on a website. 
Here are a few benefits that good use of typography brings:

• Building strong brand perception: Through unique typefaces, typography builds a very strong and emotional connection with the brand. Users start recognizing the brand through its visual languages such as color, graphics, and typography.
• Create visual balance: A website is a mix of colors, elements(like cta, tables, etc), images, and textual content. To create better visual hierarchy text comes into the picture. Even with the use of one single font family, one can create aesthetic visual balance using different font weights and styles. A good visual hierarchy of text leads to better scanning of content on screen. 
  For example: Using one dedicated style and weight for a heading, one for paragraphs & normal text, one for a subheading, etc helps in maintaining the visual hierarchy.
• Holds user attention: By holding attention I mean, good typography can decide whether people are clear about the content and find it easy to scan, navigate and make decisions or it is too difficult for them to understand. Basically optimal use of typography can tell whether people would stay or move on after a few mins.
• Encourages better decision-making: When a user is clear about what is there on a page(through crisp content and text), it would encourage better and faster decision-making. The clear text would come on the base of what a user would get on doing a certain action. I know this is more on the UX side including good information architecture but it is equally important to clearly show what can be done and what a user would get by doing so. This would only come by using clear and crisp text on the website/app. 
  For example, rather than just “Submit” on a CTA, if you choose to write “Submit to Subscribe” it gives users a clear picture of what they would get by hitting the action.

So these were some benefits of typography. Now to understand how to align textual content, we need to know about text alignment. There are four basic styles of text alignment, but each style has its own way of usage. Let’s look at each one of them.

• Left Alignment: It is the most widely used default and popular text alignment. Left-aligned text is easy to read long paragraphs and comprehend them. It enhances readability as human eyes move in such a direction while scanning content. 
• Right Alignment: It is not a commonly used alignment unless we are talking in the context of a particular language like Urdu, Arabic, Hebrew, etc, or for a comparatively small sentence.
• Center Alignment: It is generally used for CTA text and short text-like headings. It is only suitable for small text as overuse of center-aligned text can cause difficulty in scanning and reading content. 

Why is it not a good option to opt for centered aligned long text?
It is because after a break in each line, to find another piece of text there is a certain drop in reading that slows down the reading speed. Therefore it is better to avoid using center aligned text or long paragraphs. Use of center aligned text is only acceptable till max 3 lines but not more than that. This point is based on research. So it is good to adapt left aligned text for long text.

• Justify Alignment: This type of alignment is more common for specialized purposes like elegant and luxurious designs. It is very balanced from left to right which makes scanning better but can be an issue if the word count of each line is not the same. Some unbalanced gaps can be noticed. It is a formal way, and this type of alignment can be more often seen in newspapers, books, and presentations.

Sometimes a good mix of different alignments(such as Centered aligned CTA text, with left-aligned paragraphs and heading along with having some quotes right-aligned) can be great. But it depends upon the UI principles, make sure doing a mix is fitting well with the principles.

So far we have covered a lot of things that are essential to know about typography, but to make it readable and legible let’s also look into both of these terms in detail. Let’s know what is readability, what is legibility, and how both of these terms are different.

1. Readability(Appearance of Font)

Readability is something that can be controlled by a designer because it is how a typeface is arranged. It is focused on users but not on any font. It determines the ease of reading, successful comprehension, and how much a piece of text makes sense to the reader. Readability focused on elements such as typeface(its arrangement), typecase, line spacing, contrast, and line length. An important point to consider is that even extremely readable fonts may lack legibility when configured in specific ways. It is because the readability variables are determined by the designer rather than being intrinsic to the text. To be readable it is necessary to be first legible.

2. Legibility(Choice of Font)

It is the capacity to differentiate one glyph(called the particular shape, design, or representation of a character) from one another when reading. While talking about legibility we look into x-height, strokes, and weights. Keep in mind that not every typeface is legible, so picking typefaces wisely is all that a good designer needs to do. Sometimes legibility is not the only consideration designers have, but there are other things as well like colors, overall design tone, and theme. Legibility purely concerns a font being appropriate for readability, Legibility is a necessity for the text to be readable.

3. Line Length(Measure of Characters)

Line length is all about reading efficiency. It refers to the measure of the number of characters per line– called CPL. Line length helps in maintaining better reading speed. According to research, too long or too short line length “decreases the reading speed”. Therefore a good measure of CPL would enhance reading speed. Users actually jump while reading rather than reading line by line, which means most of the user actually skips a lot of content. In such a situation giving limited but crisp pieces of information is a good option. A count of 100 characters per line is efficient for an average reader. Always remember users never read the content they tend to scan information that seems relevant to them.

Typography is the segment of UI Design that falls under the content part of UX Design. Typography is equally important for both UI and UX design and designer to focus. Websites or apps both have content that helps users navigate, interact, and guide them to take action. Organizing the content in a manner that helps ease navigation, interaction and action is a very important part of user interfaces.

Typography is not only about picking the best fonts and their placement, it is the overall visual language used to communicate with users. Typography can effectively convey a product in such a manner one wants it to be perceived, just like any other visual components like color, form, and pattern can. In this article, we’ll look into different elements of typography and how to seamlessly integrate them with designs.