In a website, text size is an important part of the user experience. As web design trends change, so do text sizes.
If the text on the site is unreadable or the user has no interest, the design fails. Text doesn’t just need to be placed on a web page, it also needs proper layout and style matching to work. This article will share with you how to use the right size to improve the user experience.
In a website, text size is an important part of the user experience. As web design trends change, so do text sizes.
Although font size on a web page is not subject to the same objective factors as font size, it may seem that designers are free to choose font size, but this does not mean that designers can “capricious”, there are still some basic design principles or norms that need to be paid attention to for the sake of visual effects and site user experience.
Let’s take an example.
Douban is a very famous community in China. On this platform where literary and artistic youth gather, we can feel a fresh wind of literature and art coming from the webpage design.
From the point of size, different section titles on the home page use 24 point font, the classification text under the title is 14 point, the title on the right is 15 point, the label text is 12 point font, and the title and content introduction of the home page article are 12 point font.
The title of the details page is 25, and the body is 13.
Visually, the overall font size of Douban website is relatively small. Although some netizens criticize that the text of the main content is too small, large paragraphs of text are easy to be dizzy, and reading for a long time will make the eyes tired, most users still agree with this design.
If the text is changed to the 14-point font of Baidu Baike, it will look like a “silly big guy”, which is not delicate and delicate enough on Douban. (OF course, I’m not saying Baidu Baike is not good, after all, different sites for different groups, need to be targeted.)
That is to say, douban website is relatively poor in readability, but on the other hand, this small font gives people a sense of integrity and delicacy, which sets off a “literary style” of the web page, and is very in line with the group the site faces, so the overall user experience of the site is still very good.
These are actually things that designers need to pay attention to.
Let’s move on to the type code.
In current web design, although there is no standard size for text, designers should know that 12 and 14 point fonts are very common on the web. This is also due to some objective factors:
> Design software. Design software used by designers, such as PS, is mostly even, which is a continuation of the habit.
> browser. On some browsers, odd numbers are automatically rendered even, such as IE6.
Word-wrap: break-word! Important; “> The text with even size, such as the 12th character “Zhong”, is 11px in width after removing the 1 pixel spacing. The vertical line of the text is evenly divided between the left and right, which is beautiful and balanced.
> Practical application. From Vista, only three dots of 12, 14 and 16px are available. At 13, 15 and 17px, although each word has 1px more space, the dot matrix remains the same, but it is visually sparse and displays poorly.
But these factors can be taken into account. Websites such as Douban and Zhihu use numbers 13 and 15 to achieve good results, but in general, even numbers are “safer”.
Web design site SmashingMagazine surveyed 50 popular web interfaces and found that the average headline size was 18-29px, with a matching body size of 12-14px. Although the survey mainly focuses on English fonts, we can also estimate and compare some norms for Chinese font sizes.
For all of these reasons and based on our best practices, we’ve come up with a few guidelines that can make web design more professional:
1. The font size should be 12, 14, 16, or even digits, and the font size should not be less than 12.
2. The size of the navigation text and the text at the bottom of the Header: Header navigation text 12 or 14; Menu navigation text no. 14-18; Sidebar text 12 or 14, level 1 menu use 14, level 2 menu use 12, or level 1 menu use 12 bold, level 2 menu use 12; Footer text number 12 or 14.
For example, the official online mall in China designed by AnyForWeb for Le Kou le Kou fully conforms to these norms.
Especially in navigation, Header navigation no. 12, navigation No. 16, text size level is also arranged in order of 16-14-12, the text design here also uses different colors to make the hierarchy more obvious.
This visual difference allows users to quickly find the goods they want without spending too much time on research and navigation, which can effectively improve the user experience of the website.
3. Body: Headline no. 24-32; Title no. 16 or 18; Text no. 12 or 14. Bold according to the actual situation.
The official website of Shanghai Museum of Natural History is a show-oriented website.
We can see that the size design of the following web page is basically all in line with the above specifications, especially the text size collocation in the following section, section text 18, title text 16 bold, body text 14, clear and effective highlight the key, look very comfortable.
The large text in the Banner is a special case. The text on each picture is designed according to the elements in the picture. The combination of text and text has a strong sense of integrity and is visually attractive.
4. Button text: such as login, registration page button or other buttons, text 14-16, can adjust the size or bold according to the actual situation.
For example, Intel’s button size design:
5. Advertising slogans and special situations should be designed according to the actual situation of the text.
Haozhi.com is a knowledge sharing community. The text in the Banner is designed with large text, which catches users’ eyes at the first time when opening the web page and quickly conveys important enterprise information or product value.
6. Use the same type within the same hierarchy. For example, the consistency of header text and content text sizes in the same level of sections.
The specification shared above is just our best practical experience based on long-term project summary. In actual web design, designers need to be flexible according to the characteristics and specific situation of the website design.
In addition, with the popularity of large text design style in web design, some brand sites, technology sites, event sites, and some of the product display columns of text size to give people a great visual experience.
In the official website of Apple, the product display text is matched with 64 and 32. The text content is short, powerful, readable, and has a great visual impact, highlighting the brand characteristics.
In the event website of Mercedes-benz, the text is also displayed in different sizes of text collocation, and the text is designed with appropriate size according to the actual picture. The animation effect during browsing perfectly shows the atmosphere and sense of science and technology of Mercedes-Benz.
These websites generally use large pictures and large text collocation, highlighting the value of brand transmission, strong visual impact can also leave a deep impression on people, and in the browsing process to achieve good user experience.
Of course, there are plenty of great websites for designers to learn and practice, but the rest is up to you.
Copyright of this articleAnyForWebAll, please indicate the source of reprint.
AnyForWeb UED regularly publishes Web related trends review articles, involving visual, interface, interaction and other fields, stay tuned!
AnyForWebandAnyForWebUEDThe official micro blog wechat has been officially opened, welcome everyone to pay attention to!
Sina Weibo: @anyForWeb, @anyForWeb UED
