As we’ve observed before, typography is the most popular design trend this year, even in the last month of the year, designers are increasingly looking to use beautiful fonts and typography to make their designs stand out.

Highly readable and visually striking typography is a common feature among the new web design works that have emerged in recent years. When they want stylish visual design, they still choose readable fonts for typography, but the real visual wonders still rely on the latest design technology itself.

1. The first screen containing only text

While many sites use images on the first screen to attract users, using text can work as well. However, to use text as the main body of the first screen, designers need to use good white space. The key to taking advantage of this trend is to provide meaningful text to users and make them feel valuable.

So how do you do that?

  • Start with keywords. Keywords show the purpose and value proposition of your content, tell the user what you have to offer and why your content is important.
  • Choose a simple font that matches the mood and style of the text.
  • If the text is light, try to choose some expressive fonts.
  • Use white space. In each of the following cases, there is enough white space around the text to ensure typographical breathing. White space ensures that the user’s attention is focused on the text while browsing. White space is a great way to balance text layouts if you don’t want to center text, as in Design Ups.
  • Use color to enhance the appeal of your design. Bright colors attract more user involvement in the design. Color can also better create atmosphere and convey mood.

When designing a text-heavy site, don’t force text to fill the screen, because you won’t be able to fill it. Use color and color blocks to enrich your layout, as with Less Is More and Types of Type.

2. Use white blocks to carry text

It must be admitted that many of today’s web sites have done outstanding visual design, containing extremely rich elements, with rich responsive breakpoints and bold color matching, the information is almost exploded. As a result, some designers have started to create blocks with white backgrounds in the middle of a large number of elements to hold pure black text content.

This design allows the text to be readable without having to worry about complex background colors and variations. This technique sounds lazy, even sloppy, but it can be very effective when properly designed.

White blocks on the size to design reasonable enough, with a certain amount of text, if consider mobile end page, this section may need to be performed for mobile terminal reasonable custom, such as open on mobile terminal equipment, the contents of a text box in the picture below the area will be shown separately, rather than and that mixed on the desktop. Don’t try to render a text box like this on a mobile screen, because it’s ultimately difficult to get the image and the text box to overlay in the same area. Each of the following cases uses a white block to carry text content in a reasonable way.

The Do Space page places a white area at the bottom of the image to make sure that most of the image is clearly visible to the user. The white area is connected with the white space at the bottom of the picture, and the visual correlation between the two makes the user subconsciously want to continue to browse the content below.

Instead of a traditional rectangle, HowIt creates an irregular circle for its white blocks. The white block of this style is consistent with the tone of the whole background elements, which looks very integrated and not obtrusive. The text on the white block is not the usual black, but the same showy font and magenta text as the hand-drawn illustration on the background. This makes the foreground and background elements relate.

Macaulay Sinclair has more text that requires white blocks to carry than any other site. The background behind the white block conveys little useful information.

3, font clipping mask

Text fonts can be filled with a variety of things, there is no rule that fonts can only be filled with a single color. Many designers began to fill text fonts with images, creating an effect similar to a clipping mask in Photoshop.

There’s a lot of gameplay to this effect, and it can be static or dynamic. A small amount of visual information is presented through the outline of the letter, which can be a picture, a moving video, fixed in the background, moving up and down with the text scrolling in the foreground, and so on.

The trick is the choice of font. The font must be thick enough to make the following image more visible. Fonts that are too thin or too narrow give too little information and often seem cramped and strange.

The other thing about this design is that the number of words and letters should be as small as possible, in which case the visual effect is actually best. The number of letters should be less than 10, and the number of words should not be more than 3. The actual effect will be great if it is Chinese.

Danbury uses bright colours in the foreground and dark photographs in the text for striking contrast.

Fusion Winery is a site that doesn’t use static backgrounds, but instead has background videos rendered through fonts. The beauty of this design is that it creates three levels of clarity and intuition: white background under the product picture, while the video is presented through the white background, with stillness and movement.

Kaneko, on the other hand, has a slightly different design. It uses an impenetrable background. You can’t really tell the details and content through the letters. However, the addition of color, so that the whole design is interesting and lively, also very attractive.

conclusion

Typography and text have always been key components of design, and it’s only natural that design trends associated with them will catch on. On the other hand, they also affect the effect of pictures, videos and other elements presented in the design. The joint effect of design and trend can not be ignored.

[These trends are good, let your design go to the hearts of users]

  1. 3 Unique Trends that Can Make Web Design great
  2. Trends to Watch for web Designers in the Final Months of 2017
  3. These 3 Trends are great, but Still pay attention to the details
  4. After reading so many design trends, do you know how to put them into practice?


This article is originally translated by youset.com, please respect the copyright and translator’s achievements, please attach the youset.com link to transfer, violators will be corrected. Thank you for your cooperation.

================ Star recommended ================

UiiiUiii.com is a high-quality Chinese tutorial website of UIII.com, sharing a large number of PS, AE, AI, C4D and other Chinese tutorials, and also preparing intimate knowledge tree columns for zero-based design enthusiasts. Start a new chapter of free self-study and follow our step-by-step guide to get up to speed and create cool visuals.

Design navigation: the most popular design website navigation, designers must: hao.uisdc.com