Typography is the art of arranging letters to make the written content readable and appealing. This can be done in a variety of ways. By selecting typefaces, font family, point sizes, line length, and spacing you are able to play with the overall design of a word. When designing type, you have to keep the tiniest details in mind. The emotive quality of these typefaces helps us express and communicate ideas with clarity.<\/p>\n

Typography for Mobile Web Design<\/h2>\n

Mobile Design is constantly changing and so is mobile typography. Let’s take a look at some of the best practices and elements that should be paid attention to when designing type for mobile devices.<\/p>\n

<\/h2>\n

1. Font<\/h3>\n

Fonts should be selected with utmost care when it comes to designing for the small screen. Different types of content will need different fonts. Over-decorative fonts may reduce the legibility. So it is advisable to use a clean and simple type that is easy to read and improves the overall user experience of the page.<\/p>\n

\u00a02. Font Size<\/h3>\n

The screen size of a mobile screen is limited. So the rules of selecting a font size on a desktop will not apply here. If you use really small text on the design, this will end up hurting the user’s eye while bigger texts may end up breaking the reading coherence. For IOS, user text sizes range from 10-11 points.<\/p>\n

3. Typeface, Style, and brand<\/h3>\n

Mixing several typefaces can make your app seem fragmented and ultimately result in a poor reading experience. It would make sense to use different variants of a single typeface. In addition to this, it is also advisable to use the built-in text style that is built into the system. This will help you take advantage of the various features that come with a specific typeface.<\/p>\n

<\/p>\n

4. Leading, Kerning, Tracking and Alignment<\/h3>\n

Leading refers to the space between the lines. Mobile screens are smaller in size, so you have to tighten the space between the lines to improve readability and design. 1.4em is the standard that designers like to use as a standard. Another common tip to know is that leading should be 120% the point size of the font.<\/p>\n

Kerning, on the other hand, is the design of space between two letters. This has a huge impact on typography. Especially on mobile screens- you want to keep this space as consistent as possible.<\/p>\n

Tracking is the overall spacing of the letters of all characters. It is easy to confuse the two. Effective tracking makes the content more readable.<\/p>\n

When it comes to aligning text on screens, left justified alignment is often preferred. The key is to leave a clean rag and decrease the inconsistent white spaces between lines. Left side alignment ends up being the best choice because it allows users eye to jump from one end of a line to the next.<\/p>\n

5. Line Length<\/h3>\n

Pay attention to line length and how it impacts typography on a mobile screen. To create a readable and harmonious web page, keep the character per line within 30-40.<\/p>\n

<\/h2>\n

6. Space<\/h3>\n

Space between lines, margins, paragraphs, and letters can help create a harmonious and visually appealing mobile web page. It can also help users better interact with the text. Stick to 10-20% range when designing your text container.<\/p>\n

<\/h2>\n

7. Hierarchy<\/h3>\n

Use headline to grab the readers attention and the body of the text would be more focused on readable content<\/p>\n