The interface is good-looking, and the fonts in the interface are also good-looking

Font Value

In interface design,font should be the most neglected point, we have icon specification, design specification, form, color specification, etc., But there are very few font specifications. In addition to standardizing the default fonts designed by Apple and Android, there are very few researches on fonts. Many people will say that there are only a few fonts used in UI. We are not doing operations and marketing. You don’t need to know so many fonts, actually not, today I will share with you the fonts in UI.

Netease Kaola brand upgrade clearly stipulates the use of Chinese and English fonts

▲Fonts are becoming more and more important in design. Text is not only a form of reading. Different fonts can not only affect typesetting, but also reflect the character of the product! More and more brands are integrating font design into their brand DNA. In the revised design of Netease Kaola, it aims at the integration of Chinese and English fonts and the overall brand.

▲ During the visual upgrade of 11th Street, a well-known Korean e-commerce company, there are clear specifications for Chinese and English fonts.

▲UBER’s design specifications also have clear requirements for fonts, English fonts, printing fonts, and detailed usage rules.

More and more companies are slowly standardizing the use of fonts in design. Today we will talk about how to define our fonts in interface design and some rules for using fonts in UI.

The Emotion of Fonts

▲Font is a key element that affects the brand,If you understand color psychology, you should know that different colors actually have corresponding color emotions ,So the same different glyphs, strokes, etc. also have brand emotions.

▲For example, one of our commonly used western fonts,Helvetica is a sans serif font, the overall font strokes are safe, professional, rigorous and extensive Suitable for various occasions, especially favored by brand logos, including 3M, BMW, Nestle, the former Apple and so on. Plus, the font is so popular with the government that it's Helvetica on U.S. tax forms.

Image source:

https://www.behance.net/gallery/41054815/Typography-Google-Fonts-Combinations-Volume-2

▲Roboto is a sans serif font family designed for the Android operating system. The font is characterized as "modern and approachable" and has always been the default English font for the Android system.

▲The movie "Ex Machina" should be familiar to everyone. The author usesgeometric serif fonts to present a sense of technology as a whole.

▲In the "Iron Man" movie, the entire design comes from the virtual interface designed by the Territorystudio team. There is a whole set of virtual interface inside, including graphics, fonts, etc. The overall style is highly consistent, and the overall font presents a sense of the future and technology.

So a set of fonts must be a continuation of the entire brand DNA. They used to have the overall brand tone, rather than exist alone, just like our underwear, which is invisible but important, and the same is true for fonts.

Chinese font

Both iOS and Android have officially recommended default fonts, as shown in the picture above, but many times our brand and overall design language have their own unique personalization, so sometimes we need to formulate a new set of fonts , so how do we choose these fonts?

When choosing a font, you must choose the most suitable font according to the overall brand tone. The following are some commonly used Chinese fonts in the interface, and the copyright is relatively easy to buy.

▲Visual experience of Chinese black body: The font is square and the strokes are thicker, which is easy to recognize as a whole and has high readability .

▲Siyuan Black Body visual experience: An open source font jointly launched by Adobe and Google. The font family is huge, covering Chinese, Japanese and Korean characters. Led by a Japanese designer, it is in the same line as the Kotsuka Heibody style. The font is firm and stable, and the character space is even.The whole gives a professional and tough feeling.

▲Visual experience of Microsoft Blackbody:It is Founder’s first generation of screen display fonts, also Created a precedent for the design of Chinese screen display fonts.The characters are slightly flat and full, the strokes are simple and stretched, easy to read, and the visual experience is fresh and beautiful.

▲Visual experience of holly black body: The structure of the word is the design and design of Japanese printing There are many inconsistencies in Chinese character habits. Although Holly Heibody Simplified is designed for mainland China, it retains the original design style, which makes the font look unique and individual. Hammer System seems to use this font.

▲黑体-Simplified visual experience: 黑体 is the most important in the modern Chinese character system One of the fonts,Features: very prominent, square, rough, simple, simple, no decoration, horizontal and vertical strokes are visually equal in thickness, square head and tail, uniform black and white, so it is very eye-catching and widely used.

▲Pingfang-Simplified visual experience:Pingfang is the theme word of Apple’s new generation , The overall font features: Professional, convenient, rigorous typesetting, relatively easy to identifyIt is Apple's official Chinese font and is also the preferred font for most apps.

▲Fangzheng Lanting black feeling:Founder Lanting black series is the continuation of Microsoft Yahei Design, the text is slightly reduced, the font has more gradients, and has gained wider applicability, which is widely used in brand marketing. Its characteristics:Flexible and changeable, personalized marketing fonts, rigorous layout, Highly recognizable, for example, many marketing banner specifications of Tmall and Taobao use Lantinghei.

About word weight

Word weight: It is a very important concept in fonts, and the visual experience conveyed by different weights is completely different.

Light font weight: convey lightness and relax the visual experience, often used with thick font weight, used in some guide pages, reading pages, and explaining copywriting.

Heavy word weight: The visual experience is solemn, rigorous, and very important. It is often used in emphasized text, numbers, guiding action points, or large titles on the page, banner main titles, etc.

English font

Compared with Chinese, English fonts have a smaller font package, so they are more selective.Today I mainly recommend some free and open source fonts from Google. Google fonts are really great, and they match well It can bring many different visual effects!

1. Playfair Display

A serif font that is popular with many designers, and it is matched as a wholeMagazine-like, big brands are particularly strong, on many high-quality product pages, or H5 Applied to on the page.

The interface comes from the Internet

▲This font is my favorite font in the top 10. It is often paired with some sans serif fonts.It is very elegant and harmonious when used as a large title or theme Art Magazine Beauty! The font is very elegant and classic.

The interface comes from the Internet

▲ is also widely loved in UI design. In some PC pages or reading products, with beautiful typography, the whole is very modern.

2. Nunito Sans

The fonts commonly used in English interface, foreign designers use more, The font is very modern and clean, adding some space between letters, it looks cleaner.

The interface comes from the Internet

▲Nunito Sans is very clean, modern, and easy to read in both graphic design and UI design, so I like to use it when designing. There is a little trick , when doing English, adding a space between letters can make the design look more comfortable.

3. Montserrat

This font is unique, not as clean as nunito sans. Buta little decoration on each letter makes the UI look very attractive.

The interface comes from the Internet

▲It can be seen that the Montserrat font is loved by some big manufacturers, whether it is a combination of upper and lower case or text reading, it is very unique.

The same is true in the UI interface, making the overall design more unique and full of details.

4. Roboto

The default font of Google product interface, the default font of PC and wireless, shows the importance of Google. If you make an English page and don’t know what font to choose, it is the safest choice.

The interface comes from the Internet

▲This font is very versatile and rich in font weight, whether it is bold or thin, it is used in various product websites and mobile The interface is very simple and elegant.

5. Open Sans

Open Sans is a sans-serif font, which is also used more in mobile design.Compared with modern and concise visual experience.

▲The application in the website is very clean, almost no redundant strokes are formal, and the weight contrast is strong!

▲It is OK to use with other fonts, almost versatile, and it is used in many classic official websites abroad.

6. PT Sans

Released in 1998, based on Russian sans serif font,Generally used in magazines, gourmet products.

▲The use of PTSans in the food page is also well integrated with the food itself.

▲PTSans is also harmoniously used in magazine layout.

7. Futura PT

Futura PT is a sans-serif font, and it is also a font favored by designers.The overall visual experience is modern and fashionable. Let's take a look at its visual charm.

▲As a headline,simple, clear and clean.

▲As a design company website, with a grid layout, it is very fashionable.

▲One of BMW's official fonts, used on BMW's official APP and website, showing a sense of dignity.

▲The official website of the fashion magazine is clean and concise.

There are still many English fonts, and I will recommend them to you later.These English fonts recommended today can be used in the interface and are easy to download. They are all in fonts .google.com site.

Last

As I said at the beginning, font is very important to reflect the brand in design. Font selection is very important, and font is also the most important content in design, so we must master it. Next I I will share with you about the use of digital fonts, see you next week!

Welfare Today

All the fonts in the article have been downloaded for everyone, please reply in the background of the official account"Fonts" to claim.

--END--