A correct attempt to using your typography design system may make the use of the digital interface of your website more appealing and meaningful. Typography remains a very important aspect of the whole design system to become more efficient and effective with its proper use early on. The typography UX Design may be the foundational components that you will like to get to work harmoniously with the other UI controls and icons.
It can be the most important aspect of the design system and if established early, you can effectively communicate to the users through type. It can account for around 85% to 90% of the screen space and when designed and used properly it can become the most beautiful interface. The line heights that you choose can even influence the other structural elements like the grids and the spacing.
Characteristics of Typography:
Size and space are the two inherent concepts of typography and these are dependent on each other. While trying to make a good design system both the developers and the designers need to work closely especially for setting the typography. There are two characteristics of typography and these are inherent characteristics and contextual characteristics.
The inherent characteristics are guided by typography principles and rules and it does not change on the context basis. It includes typeface, weight, size, letter-spacing, and line-height and the use of the correct design principles is very essential to get the best result. The contextual characteristics include the color and the spacing and it can change based on the usage and goals of the typography in the interface.
Though a brand may have a default typeface that should be used, be cases when you should choose new fonts that make your brand more digitally friendly. The choice of the correct typefaces may be very crucial to develop the identity of your brand. You may work with the brand team if yours and try to adhere to the corporate identity for the brand while specifying the fonts.
Choice of the fonts
While choosing a font, you may have to choose one font or a pair of fonts and ensure that the fonts work together. Fonts that you use will be governed by the guidelines of corporate identity and therefore, you should consult with the brand team while deciding the use of the fonts.
Size and scale
The typography scale can make all the typography sizes relative to each other. It can create consistency in the sizing of all elements and the visual type scale can turn the balancing act of typography into a set ratio. When you use a type scale you can fulfill the expectation of the users by giving the command about the communication.
The concept of a modular scale can apply to typography though it is not a guarantee. A modular scale is very often used when you refer to a typography scale rather than spacing. However, good type-application still depends and relies on the application of the aesthetic sense of the designers for typography UI, to the overall layout.
When you press the dropdown menu of Microsoft Word or Adobe software, etc you will find the pattern 6,8, 9, 10, 11, 12, 14, 16, 18, 24, 30, etc. The question that arises here why it follows this sequence like 24, not 22, and for this, the answer remains that it follows a typographic scale. A typography scale is based on the idea of a musical scale that finds the font sizes that may work in harmony with one another.
A typography scale ends up shrinking and growing exponentially like a musical scale. It will start with the base size and further the base size will get multiplied by the scale. Next, the best size will be multiplied by the scale squared and so on.
Font size naming
Picking your font sizes and assigning headings to them like the h1 or h2 may not be enough. It is because in HTML coding, the heading tags ranging from h1 to h6 may give semantic hierarchy for SEO and these do not represent the text size. An h2 title may be used with a particular size in a card and may represent a different size on an article page, though both these can represent the same hierarchy but different sizes.
The paragraphs also need representation at different sizes and normally three different sizes are used. These are a regular size for a paragraph, larger size for lead or introductory paragraph, and a smaller size for the footnotes. You can consider using the token names like the text-small or the text-medium or even the text large.
The weight of a font refers to the thickness of a character related to the height of the character. There can be many weights of a typeface that can be ultra-light or extra-bold or black. Though four or six weights can be seen and not uncommon, there can be few typefaces that have a dozen weights.
In the case of CSS, you may specify font weights that are other than normal and also bold by using the numeric font-weight values. Typically for headings and titles, heavier font weights are used for the titles and the headings and paragraphs, lighter font weights are used. You should be careful about using light font weights when you choose it for smaller texts, and for having a more polished typography system, chose font weights for different heading sizes that compliment the overall hierarchy of the type.
Line length can be defined as the distance between the right and the left edges of a text block. It is a common problem with overly long line sizes but these can be corrected easily. There can be a big difference in the professionalism and the legibility of the layout with the shorter lines.
The shorter lines are always comfortable to read than the long lines and as the line length increases, it becomes difficult for your eyes to travel from one end to the other. When line lengths are too short the text may become disjointed, and when too long, the content may lose rhythm. The recommended line length for a digital text may be between 50 to 75 characters on a particular line.
Line height is measured normally as a percentage of the font size and a line spacing of 1.3 to 1.5 times may be idle for readability and the figure may go up to 2 times. The design and the size of the font decide the line-height and a line-height of around 1.5 times of the font size may be a good place to start from an 8 point grid system having 1.5 line-height may work well and a line-height of 8 with the base font size 16 can fit perfectly.
It refers to the spacing between the letters and tracking and kerning are also commonly used term for it. The term letter-spacing gets used when working with the digital type on the web. Though very few web designers are there that use letter-spacing while working on the web, some small changes in the letter spacing can make an enormous effect.
The letters that are written in the uppercase form are called majuscule or capital letters and the letters in the lowercase form are called minuscule or small letters. As per the historians, the use of uppercase or majuscule occurred first and all the alphabets were used in large majuscule letters initially. Lowercase letters are being used in present times for special purposes like the capitalizations of proper nouns or the first letter of a sentence.
You should consider a few factors before choosing to use the letter case for getting the best effect. The factors are what will be easier for scanning by the user and what type of font, font color, typography design guidelines, or font size will make the design more attractive.
Knowing about the basics of typography and the recent trends in design with typography can help you to create an excellent design system. The right use of typography can bring a lot of user satisfaction that can be a great success for your business.