Typography
Figma
Guidelines
Web
MobileTypography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.
It involves the selection of typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking), and the adjustment of space within letters pairs (kerning).
In web and graphic design, typography plays a crucial role in setting the tone, providing a clear hierarchy, and enhancing the overall user experience by making text both engaging and accessible.
Guidelines
Correct / Incorrect
Text
Text must be left-aligned.
Text must not be centered. Centered text is harder to read.
Use bold to emphasize a word. Bold must be used sparingly.
Correct not use bold for the whole text when it’s not necessary.
Italic is nice to use for a quote, a citation, a definition or an introduction.
Correct not use italic for a part of sentence, the full sentence or nothing. It’s not visible enough.
In most cases, correct not end sentences with a ponctuation. Only use ponctuation when you want to create a specific effect to the reader.
Ending each sentence with a ponctuation makes the text more formal and less engaging.
Start sentences with a capital letter and capitalize proper nouns such as company names for example.
Not capitalizing the first letter of a sentence or capitalizing random words makes the text harder to read and less professional.
Title
Titles must be left-aligned.
Titles must not be centered. Centered titles are harder to read.
Order titles from biggest to smallest.
Correct not order titles any other way. It breaks the visual hierarchy.
Titles must not end with any ponctuation.
A title ending with a dot is incorrect.
Titles must start with a capital letter.
Correct not start titles with a lowercase.
Titles must be a noun or an adjective and a noun.
Titles must not contains a verb or an adjective alone.
Titles must be 1 line.
Titles must not be more than 1 line. No break line allowed.
List
Use round bullets for unordered lists.
Any other shape is prohibited. So that every list is consistent.
Correct not end the list elements with a ponctuation.
For consistency, we decided not to end the elements of any list with a ponctuation.
If you need to insist on the necessity to follow a specific order, use numbers.
The number must be in the right order. Be careful when you edit an ordered list.
When you have a nested list, the number before the line must reset for each nested list.
Correct not keep the same incrementation for the nested list. It breaks the visual hierarchy.
Takeaways
Text
- Use the “text-size-1” for the body text
Title
-
Provide a concise title that accurately describes the content and purpose
-
Make sure the title is unique to GlowUp
-
Aim for 70 characters or less
[recommended] -
Match the page title with the heading’s title
-
Provided tag’s css mustn’t be modified
List
-
Bullet points or numbers allows to organize items clearly
-
Ensure list items are concise and to the point
-
Keep using the default list design to enjoy a consistent formatting, indentation and spacing across the website
-
Avoid using too many nested lists to keep the content readable
-
Start each list item with a capital letter, like a normal sentence
Usage
Implementation
Properties
Font
Size
Text
Variable
Type : CSS Variable
Tag
Type : HTML Tag
Title
Variable
Type : CSS Variable
Tag
Type : HTML Tag
Weight
Type : CSS font-weight property