10 Practical Tips to Master Your Text Layout
Perhaps the single most crucial aspect of any piece of design is clean and concise typography. But do you want to refine your font designs and how to play with those typefaces? In this article, I will walk you guys through the top 10 tips to improve your text layout to make your design more beautiful.
So, let’s get to work!
1. Use Comfortable Line Heights
For titles, start with line height between 1.3 and 1.5x the font point.
For body text, it’s 1.3 to 1.5x, but don’t be afraid to try up to 1.8x.
As a general rule, larger fonts should have smaller line heights.
2. Be Mindful of the Horizontal and Vertical Padding
When you’re putting text in a box, as a thumb rule, there should be more horizontal padding than vertical padding since most texts don’t fit in the whole box, particularly with line heights greater than 1.
In such cases, you need more horizontal padding than vertical padding to make the design cleaner. In Webflow, hold the alt or option key when adjusting your padding to adjust the opposite side simultaneously.
3. When Everything is Emphasized, Nothing is Emphasized
Bold fonts are used to emphsize certain words or phrases and make them stand out. However, emphasizing everything can have the exact opposite effect because when everything is bold — nothing is bold. Much like love needs pain, or sweet needs sour, bolds require thin-ness nearby.
Use bold wisely for emphasis, and we’ll all be OK!
4. Leave Enough Vertical Space When Putting Texts Vertically
When putting content vertically, make sure you leave enough vertical spacing in between. In order to increase or decrease the vertical spacing between texts, all you need to do is to modify the style the paragraph uses.
Doing so provides a pleasant touch of symmetrical spacing that comes in handy when using different vertical layouts for your lines of text.
5. Optimize Your Sentence Length
Readability formulas mostly use the number of words in a sentence to rate its difficulty level.
Hence, try keeping your average sentence length around 20 words or anywhere from 65 - 76 characters, as it not only conveys the meaning in a balanced way but also prevents lengthy and convoluted sentences, making it hard to read.
6. When in Doubt, Align Left
As a writer, the most heated discussions I found myself having with my peers centered around typography principles.
Flush left is the default alignment for applications and websites. It doesn’t create uneven spacing between words and is better for the eye to go to the next line. Moreover, it’s aesthetically pleasing, user-friendly, and never goes wrong for western languages. Hence, when in doubt, align left!
7. Use Proper Baseline and Center Alignment
Text in the same line should be baseline-aligned with each other while center-aligned with other elements. In short, align the text baseline of a sentence to the text baseline of another sentence.
But if the text is in a defined shape, it should be center aligned.
8. Spacing Between Text Blocks Correspond to their Relationship
The principle of similarity states that when things appear similar to each other, they’re grouped together.
Lines of text that are closer together are perceived as more related than texts that are apart. In other words, the more related the two blocks are, the closer they should be visually. So, for example, section titles should have more top padding than bottom padding.
9. Create Comfortable Padding Between Text and Border in the Text Box
When putting text into a button or textbox, ensure you apply enough padding. As a general rule of thumb, line height should be at least 1.4x the font size. This means that with a 1.4x line height, the ext should take up around 50% of the box.
When adding both padding and margins, you can add it to all sides equally or target each individually.
10. The Effect of Font Size and Line Spacing on Marketing Pages
Your readers care… a lot!
The only thing worse than weird colors is clashing fonts. People often don’t realize how large the text and spacing are on well-known sites.
For marketing websites and applications, experiment with larger fonts and more spacing. They make the page look cleaner and more balanced. The reader is always right, so give them the layout they want!