Typography is a combination of art & technique to arrange writing so that the meaning of the writing is conveyed visually.
In web and mobile UI design, typography is the art of organizing typefaces on the interface to make all copy readable, legible and scalable to the the audience. Visually appealing typography sometimes even catches the users attention and effectively increases the conversational level of the interface. Designing good typography is not just choosing a beautiful font for your app. The decision depends on many visual aspects of your UI.
Basic typography elements
Before diving into the actual aspects that you should involve to create better typography, let’s first see what basic elements you should pay attention to :
1. Font and Typeface
Fonts refer to the weights, widths, and styles that constitute a typeface is a family of related fonts. The three basic kinds of typeface are serif, sans-serif, and decorative.
2. Letter and Line Spacing
Letter and line spacing focuses on the distance between the letters and lines. Both of them directly affect the readability of your interface copy.
3. Font weight, height and size
The different wight and size values define a font, helping designers create interfaces with different styles and emotional tones.
In one sentence, all these elements should always be considered when designing typography for your project.
Key considerations for typography:
1. Minimal use of font
Using more than 3 different font types makes the website look unstructured and unprofessional. If there are too many types and styles it can damage the layout on the website created.
To prevent situations like this, try to limit the use of certain types of fonts. In general, keep the number of font to a minimum (two lots, one enough) anad use them throughout the website. If you use more than one font, make sure the families complement each other based on their character width.
2. Use standard font
Font embedding services (like google web font or typekit) have lots of great fonts that can give your designs something new, fresh, and unexpected.
3. Choose a Typeface That Works Well In Various Sizes
Users will access the website from devices with different screen sizes and resolutions. Most user interface require text element of various sizes. It’s important to choose a typeface that works well in a variety of sizes to maintain clarity and usability at each size.
4. Don’t Minimize The Spacing Of Each Line
In typography, I have a special term for the spacing between two lines of text (or line height). By enlarging the first of a paragraph, you increase the vertical white space between lines of text, generally improving comprehension. As a rule, the prefix should be about 30% higher than the character height for good understanding.
5. Ensure a Balanced Color Composition
Do not use the same or similar colors for text and backgrounds. The clearer the text, the faster the user understand and read it.
This text does not match the recommended color contrast composition with the background color so it is difficult to read.
This text is in accordance with the recommended color contrast composition with the background color so that it is easy to read.