10 Ways of Typography Management For Website and Mobile App
“Typography is an integral part of UI design and it can make-or-break your design depending on how you use it. It plays an important role in conveying the emotions to the end user.”
Topics:-What is Typography?Manage Typography.Colors for TypographyFont SelectionSize Dependency of fontsManage AlignmentMaintain spacing between title & paragraphThe line height of fontsResponsive Fonts
Introduction
We usually spend so much time to manage fonts in the mobile app and website. Now it’s time to change our method to decide the way we choose the typeface. First of all, we need to choose typeface properly according to our theme of the website and mobile app. Whatever we design websites, mobile app, banner, card, etc. we need to choose an appropriate typeface.
1. What is Typography?
Typography is primarily an arrangement of fonts. The fonts are forming to set in the form of readable, seeing, displaying, writing, when it shows in mobile app and website. The arrangements of fonts can be done by selecting an appropriate typeface, line-height, line-spacing, font weight, the spacing between words, letters and sentences. The definition of typography is applied to the alignment of typeface, arrangements, style of typeface, numeric letter, symbols also matters in this typeface at selection time. We must select the font which has a minimum of 8 or more styles. Because we get that much options to choose the style from typeface like thin, light, hair, medium, semibold, bold, black bold, italic, etc. In short, the typeface is everything about your design which is to be selected depending on the theme of the website or mobile app.
2. Manage Typography
Do you think it is difficult to maintain typography? No, it’s really not very difficult to manage typography. We simply need to analyze the project, theme on what it is based upon and the primary users of it. If the whole picture is clear in your mind then it will take a fraction of time to set the typography. To initialize, we can start with headings, sub-headings, call-to-action, legal content, button text and at the end, you can finalize for the paragraph text.
3. Colors for typography
There are mainly three types of formats of color :
RGB (Red, Green, Blue)
HSB (Hue, Saturation, Brightness)
CMYK (Cyan, Magenta, Yellow, blacK)
Out of these three, RGB and HSB are generally used for digital purposes while CMYK is used for printing purposes. HSB is easier to use while designing the interfaces because it gives more control to the designer while tweaking the color. You can reach the desired color more easily using HSB as you increase/decrease the desired attribute (Hue, Saturation or Brightness).
Furthermore, you should avoid using pure black color for text or background. Pure black color causes eye strain and discomfort to it.
4. Font selection
There are mainly four Categories:-
a. Serif fonts
When to use serif fonts? Basically, it is used in logo fonts, for some different look. How can you recognize that this is serif fonts? In serif fonts, there is an edge mark in all types of fonts. You need to focus at the time of typeface selection minimum of 8 styles of each font.
We can use serif fonts for a title for bringing user’s attention to make it creative and also for adding a decorative touch to it. The use of serif fonts at the time of title we want decorative for creativeness with the pairing of sans font. In serif fonts, at the end of the character, there is a small finish stroke. It is mostly used in printing. Basically, it is commonly used for the logo, small creative text, books, magazines, poster, etc. In the app and website, it used for the title, heading, subtitle, etc. As it improves the readability for the user.
b. Sans-Serif
When to use sans serif fonts? Basically, it is used for content writing. These fonts don’t have any type of character stoke. It’s known as a straight font. These fonts are very professional in working terms. We can select these fonts anytime on websites, mobile apps, writing data, newspaper headline, photo tagline, content in website & mobile app, etc.
c. Decorative
The Decorative fonts are used in a banner, portfolio, showing some creative fonts. These fonts are eye-catching for the user. We can use such fonts on a website or mobile app based on food or games.
d. Script
The script fonts look like handwriting, cursive writing, calligraphy. It is also used to create script just for a look and feel, invitation card, greeting card, party poster, poster making, etc.
5. Size dependency of fonts
Here, we are talking about fonts weight. We write the title of size 42px, then subtitle must be less than that. Also in text font size matter for readability, at least text size is minimum set to 16px or 18px. For legal, the text size is 12px or 14px. Rest everything is depending on you how to set and give importance of section text.
You may easily understand through the example below in the screenshot.
6. Manage alignments
Primarily, text can be put in 4 Formats:- left, right, center & justified. Now which one you should select for better website and apps?
The way we select alignment is kept clear and in range. The first three are used according to our content and title alignments. Now the fourth one is justified it is removed for the mobile app. Because it is used in the worst case in order to manage inaccurate large data & couples of a paragraph like easy writing.
The left side alignment is the suitable and proper way to select in the rest of the 3 ways. It gives you better resulting in a range of right edge. It allows the user to jump from one line to the next line consistently. It won’t break the words in sentences. In the large block of content, use left side alignment. The centered alignments can be used in the large title and less content on a line for a better look and feel.
7. Maintain Spacing between title and paragraphs
Spacing matters everywhere in design even between the title and content. If you are managing the proper spacing then the user can easily read. It also matters between title, subtitle and multiple paragraphs spacing. Tagline and button spacing is also focused. So that user can understand the difference on some highlighted item. We can apply minimum space between content and title to 16px or 24px based on 8px rule.
8. The line height of fonts
Content length is also estimated in a website, mobile app, and everywhere. The length of the content line impacts the typography. How to manage Line height? I’ll give you a very quick way to maintain line height. Font Size + 8 or + 10 gives you a stable result. One more quick trick 1.2 * font size or 1.5 * font size also gives you precise and good result line height.
9. Responsive fonts
Responsive fonts are now a trend. We need to set the font size depending upon the device resolutions. For example, the font size in the desktop must be bigger than that in the mobile device.
Conclusion:-
I hope you find this blog useful to manage typography easily. There are many short and easy ways that we can use to manage what? in a very short time. Just try to focus on the typeface, font size, font weight, font line height, font style, the importance of font color and spacing.
