Dan Liu Profile picture
Oct 3, 2022 13 tweets 5 min read Read on X
Design is hard.

But I’ve come to realize that laying out texts properly is 80% of what makes something look clean, and is the easiest thing you can do to make your design much nicer and more usable.

Here are 10 practical tips for improving your text layout.
1. Use comfortable line heights.

What’s important is to not use the same line height for your titles and body texts.

- For title, a good range is 1.1 - 1.3x
- For body, it’s 1.3 - 1.5x

As a rule of thumb, larger texts should have smaller line height. ImageImage
2. When putting text in a box, there should usually be more horizontal padding than vertical padding.

This is because most letters don’t fill the full height, especially with line heights greater than 1. You need more horizontal padding than vertical to make them feel the same. Image
3. Text on the same line should be baseline-aligned with each other, and center aligned with other elements.

But if the text is in a defined shape, it should be center aligned. Image
4. When not sure, left align.

- Don’t center align title but left align content. That looks weird.
- Don’t center align content if it’s longer than a few lines. Image
5. Don’t put more than 20 words on one line. It’s hard to read.

This means that with the standard ~16px font size, text blocks shouldn’t span the whole width of your page. Image
6. When everything is bold, nothing is bold.

Usually regular (400) weight should be used for main content. Contrast makes things look clean.

(That’s why most sites using Circular font are not very nice — Circular is thick.) Image
7. When laying out texts vertically, ensure there’s comfortable vertical spacing in between.

- A good rule of thumb is to use the height of the smaller text as spacing.
- If the texts are similar in size, lay them out with the line height of the larger text. Image
8. Spacing between text blocks should correspond to their relationship. The more related two blocks are, the closer they should be visually.

For example, section titles should have more top padding than bottom padding. Image
9. When putting text into a button or textbox, make sure the padding is comfortable.

As a rule of thumb, with a ~1.4x line height, the text should take up about half the size of the box.

(Don't forget to use more horizontal than vertical padding.) Image
10. For marketing pages, experiment with larger texts and more spacing.

They often make a page look cleaner and more focused.

If you have never used 100px+ text or 200px+ spacing, give it a try. People often don’t realize how large the text / spacing are on popular sites. Image
I hope these tips are helpful! Next week, I’ll share some tips for choosing colors. Comment below if there’s anything you are particularly interested in!

• • •

Missing some Tweet in this thread? You can try to force a refresh

Keep Current with Dan Liu

Dan Liu Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!


Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @danqing_liu

May 28, 2023
Jensen Huang, the founder of Nvidia, just gave a commencement speech in Taiwan.

Like Steve Jobs in 2005, he shared 3 stories — 3 pivotal decisions that led Nvidia to where it is today.

The stories are about humility, perseverance, and focus. Here they are.
1. Humility

Nvidia's first application was 3D graphics. It came up with a technology called forward texture mapping and won a contract with Sega, a Japanese gaming company.

However, after a year of development, Nvidia realized this tech is a wrong, technically poor strategy.
Moreover, it would be incompatible with the upcoming Windows 95, which would use a different architecture.

If they finished the contract, they would have no time to catch up and would go out of business. But they needed the money from Sega to not go out of business at the time.
Read 16 tweets
Jan 30, 2023
Recently I stumbled upon the story of Arizona Iced Tea, a brand started in 1992 that today has an annual revenue of over $3 billion.

Companies that sell commodities always fascinate me, as it’s much harder for them to differentiate than tech cos.

So what’s its secret sauce?
First, a bit of history.

The two founders of Arizona had a beverage distribution business since 1970. In 1990, they saw the popularity of Snapple iced tea and juice, and attempted to make their own.

(Fun fact: The company is in New York and the founders had never been to AZ.)
Fast forward to today, Arizona sold 3 billion cans of drinks a year and is the second largest ready-to-drink tea brand after Lipton. How did it achieve this?

Their strategy can be summarized as better, cheaper, and let the product market itself.
Read 8 tweets
Jan 4, 2023
Design is hard, but modern CSS makes it a bit easier :)

In 2023’s first episode of the design series, I want to share 5 under-utilized CSS rules that can make your design nicer, simpler and more fun.

The best part? All of them are well supported today!
1. Sticky Positioning

Turns out CSS is the best way to let headers or footers be sticky. JS solutions are complex and cause the element to slide.

With CSS, it's as simple as position: sticky + telling it where to stick to.

Demo: danliu.xyz/post/css-rules…
2. Container Query

Media query is great, but on a responsive page, the size of an element isn’t always 100% correlated with the viewport size.

Introducing container query: media query, but for container elements.

Demo: danliu.xyz/post/css-rules…
Read 8 tweets
Oct 10, 2022
Design is hard (II).

A large part of this is choosing colors — *everything* you design needs a color.

I’ve realized that while true mastery takes years, there are simple, scientific rules that can make your colors much nicer.

Here are 10 practical tips for choosing colors.
1. Use slightly blue-shifted gray instead of “perfect” gray.

This applies to both backgrounds and texts.

An easy trick: grab a gray (e.g. #d1d1d1) and make it #d1d3d5.

This makes the color less “yellow,” which feels more fresh and clean. (less “aging”) ImageImage
2. Avoid black text on non-white background. That looks dirty.


- Tint the text with the bg color if bg is light, or
- Use white text on darker background

How to tint correctly? Open the bg color in color picker, and drag to a darker color. Image
Read 17 tweets
May 12, 2022
The unraveling of UST and Luna is probably the most impressive event in crypto this year.

I knew nothing about them so I did some research. So here's a simple thread on why UST collapsed.

1. Let's first see what's a (USD) stable coin:

It's one that you can buy or sell for ~$1 apiece, on an exchange like Coinbase.

The $1 is a market price — you are trading with other people. It's just that everyone is happy to accept $1 as the price if things go as intended.
2. How is that possible? The most obvious way is to back the coin with actual $ (basically what @circlepay does with USDC):

You give Circle $1 cash. It creates 1 USDC for you. You give Circle 1 USDC. It gives you the $1 that it has taken.

If there's 10B USDC, they have $10B.
Read 14 tweets
Feb 9, 2022
Since launching @glowwallet, many people have asked why we are doing a wallet, and how Glow is different.

Here are my thoughts 🧵 Image
We are building a wallet because it’s the most important piece in web3 — you can’t do anything without it.

But existing wallets fall short on 3 things we deeply care about. As a product team. And as consumers ourselves.

And they are how Glow is different.
Here are the 3 things.

1. Complexity should be hidden, not be left to consumers.
2. Security should be our responsibility, not that of users.
3. Being approved by Marie Kondo.

Let’s look at them one by one.
Read 11 tweets

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!


0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy


3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!