A popular design approach is to use large images or videos with simple text at the top of a page to draw users to a site. The biggest headache with this approach is choosing the right font for the text.
Finding the right font from a wide variety of font libraries can often be difficult for designers. But we can use a few tricks to find the font we need. Let’s share these five tips with some great examples below.
What is a Display Type?
Before we get started, what is typography? (Skip to Tip 1 if you already know)
Typography is usually a large, eye-catching type of text, usually used for headlines or text that needs to be enlarged. Typography is not just used in web design, it comes from a term used by print designers. (For more on this, see Display_type In Wiki.)
Typography is mainly used in the following two aspects:
- The name of the site used for the home page display, such as Walk West (above)
- A header for each page, or a banner header. Although the font used as a title is not as big and eye-catching as the font used for the name of the home page, it is more widely used on the various pages of the site.
1, readability
madebyaugust.com
To ensure effective information delivery, typography needs to be readable. This may sound like nonsense, but you’ll actually find a lot of websites with headlines that are hard to read because there are so many different fonts to choose from.
There are no general rules for choosing fonts. Serif works just as well as sans serif, and novel fonts work just as well.
Use a large enough font with enough white space and contrast with other design elements so that the text stands out. Imagine what it would feel like if those words jumped up and screamed “READ ME” to the user. That’s exactly what typography needs to do.
2, font and word match
godaytrip.com
It’s hard to understand why fonts need to match words unless you’ve seen them yourself.
This is how I understand it. Some words look ugly in a certain font. It’s hard to explain. For example, if the word ‘s’ appears more than once in a word, the whole glyph doesn’t look good. This can also happen with special characters such as %,$, or &. Or if you have a font that looks the same as I, L, and 1, and all three characters appear on the page at the same time, then you need to change the font.
Words need to catch people’s eyes. These words evoke a certain feeling, either natural or overwrought. If you think some character combinations are weird, the user will feel that too.
3. Design is more flexible
nordhouse.com.au
Think about how you would use typography in your projects. Are different layers and styles used to create the right overall scheme? Does the font you chose work well for both the auxiliary text and the main heading?
You need to think about all possible use scenarios and make the font you choose flexible enough to be used in different ways. Some fonts can be super-sized and are great for one or two word titles, but if you want to use the same font for subheadings or auxiliary text, it’s harder.
If you choose a font that can be adapted to different scenarios, you’ll be able to make your design easier and keep it consistent. If your design requires more flexibility and consistency, consider using a font family. Use bold for the main headings and thinner for the lower levels (also consider color differences).
4. Use fine bodies with caution
dunlopbuilders.co.nz
One problem that is often discussed is that typography is difficult to achieve with fine size.
Small fonts can sometimes be amazing, and some designers can make them beautiful, but most of the time they don’t work that well.
Looking at the first tip, the first goal is readability.
Think about designing a paragraph of text on a 27-inch monitor (maybe that’s what you’re doing…). “And this text is in a very thin font. Look at the text on your tablet or phone. Now what do you think it looks like? Is it still readable? (Not really)
Here’s another thing you’ll be more convinced of: apple made this mistake with iOS7. At the time, users complained that the fonts on iOS7 were so thin that much of the text was hard to read. Apple adopted a bolder font in later versions after receiving complaints from users.
5. Think about the content
iluvmagpie.com
Knowing what kind of images or videos to use these words on is also very important. Even using the most beautiful font in the world can look weird if the content of an image or video doesn’t match the message of the subsequent design.
Contrast is also an important factor, especially in a video where dark and light parts move. The text needs to be designed on an easily recognizable background mask layer.
It’s an interesting trend that designers are increasingly turning to solid color as a background, and it’s led to a lot of bright and bold web designs where text is the dominant element on the page. If you’re happy with your text design, highlight it with a solid background.
Using a bold font on a solid background is a great way to draw the user’s attention to the text itself. Color is used to draw the user’s attention to what you want to describe. Such a combination of font styles can be adapted to almost any color scheme from highlighted colors to minimalist black and white. The most important thing is that you choose a very attractive font!
conclusion
Typography will determine the first impression you give your users. It affects whether users continue to visit your site or leave.
In order to accomplish this crucial step, you need to make sure your words are easy to read, with the right tone, and without distracting the user with your design.
