Share
Sign In
Text
Key points
1.
Keep your font choices simple
2.
Stretch your text boxes so that they can fit longer words
3.
Align your text correclty
Typography and fonts
Limit font variety
9.1 Use only 1 to 3 fonts in your design. Instead of using different typefaces, change font weight and sizes.
Using too many typefaces can clutter your design and reduce its quality. Make sure the font choices match the overall design concept.
This design uses two fonts, adding some interest and contrast to the design
Do not use more than 3 fonts, as this can make your design look hectic
Font pairing
9.2 If you use multiple fonts, ensure that they match well together. Here are some useful font pairings:
Font weight
9.3 You should use bold or itallic typeface offered in the font library.
Do not use the text editor's bold or itallic setting (Ex: Pretendard Regular -> use Pretendard Bold).
Text formatting
Text layers
5.1 Ensure all text boxes are at the top of your layers for easy editing.
Place text layers on top of all elements
Do not place text layers under elements
Text boxes
Text box size
9.4 Give generous space to your text box so that the layout doesn't break when replaced with longer words.
It can be frustrating for users to have layouts break when they add custom content.
Add extra space to your text boxes
Do not hug text boxes close to the text
Text alignment
9.5 Horizontal text alignment: text should be aligned left, center, or right - depending on how it's intended to expand when replaced with longer words.
Aligning text left will ensure the design retains its structure when the user replaces text.
If text is aligned center, the design will break when the user replaces text.
This video shows how aligning text correctly can enhance the editing experience.
9.6 Vertical text alignment: text should be aligned top, center, or bottom - depending on how it's intended to expand when replaced with shorter words.
Aligning text to the top would prevent the design from breaking when the user replaces text.
If the text is aligned to the bottom, the design will break when the user replaces text.
This video shows how aligning text correctly can enhance the editing experience.
Multiple text boxes
9.7 Text using the same font, size, and alignment should be placed in a single text box.
There are exceptions for different alignments or applying effects to specific characters.
Combine text with the same font, size, and alignment into a single textbox
Do not divide text with the same font, size, and alignment into multiple text boxes
Adjust line height
Select a textbox on your canvas. Click Text scale > Line spacing to adjust.
Text line height
9.8 Body text has appropriate line height and is readable. It is not too tight or too loose.
Try using a line height of 1 px ~ 1.5 px for body text.
Body text is readable with appropriate spacing
The text appears cramped and difficult to read.
Text size
9.9 Ensure that text sizes are whole numbers, not decimal numbers. (ex: 40px, not 41.3 px).
Editing fonts
How to modify multiple text
When changing fonts, you can save time by toggling on 'Change all text of the same font.' This option will change all the fonts at once.
How to use font filter
Click on the filter in the top right of the font dropdown. You can choose multiple filter options. Click Apply filter.
â“’ 2024. MIRI D.I.H Co., Ltd. All rights reserved.