How to match the size of text in web design: small text, big experience

Small text, big experience Sanlian Tutorial

With the rise of mobile terminals such as iPad, people are spending more and more time reading on mobile terminals, and reading experience has become increasingly important. Fonts are the key to the reading experience, so in what aspects does font affect the success or failure of the reading experience?
1. Is it highly recognizable?
First, let’s take a look at the font Consolas. We can find that the width of i and w are the same. This monospaced font has a very high recognition and is very suitable for text writing, code display and other tasks.

Let's take this example again. In Arial, the recognition of i and l is very low, and when there are continuous narrow words such as il, the words are difficult to select. In addition, in Georgia, the letter o and the number 0 are only slightly different in size and are basically indistinguishable, making it difficult to distinguish them at a glance.
It can be seen from this that monospaced fonts are less affected by the letters themselves, with fixed letter size and density. This type of font is simple and easy to recognize, greatly improving reading efficiency. But monospaced fonts also have serious problems. They sacrifice aesthetics in exchange for high recognition. Therefore, they can mostly only be used in some code editors and other software.
2. Are Arial and Gerogia suitable for long-term reading ? These two fonts are very commonly used on PC web pages, but which one is more suitable for long-term reading?

Although sans-serif fonts seem simpler and more eye-catching, their recognizability is not as clear as that of serif fonts. If you want readers to read for a long time, you need to let them scan the text without thinking, and Georgia just has this feature. Therefore, generally speaking, under the same printing conditions, the reading speed of serif fonts is about one-fifth faster than that of sans serif fonts.
First of all, the serif strokes not only help to make the font look beautiful, but also help to identify the font. Secondly, these serif strokes can make the strokes of these letters on the baseline form a certain horizontal guide visually, which can guide the vision to move in the horizontal direction and increase the recognition coefficient. This is why serif fonts like Georgia are so popular on PCs and traditional publishing.
The sans-serif Arial is like a lady from a noble family, more suitable for some eye-catching signs in subways and other large occasions, while the non-serif Georgia is like a beautiful girl from a small family, and you will never get tired of reading the words between the lines.
3. Is it suitable for mobile terminals?
Since the iPad's display screen has higher brightness and contrast than ordinary computers, many fonts and designs that are suitable on ordinary computers will appear too blurry when directly moved to the iPad due to the brightness of the background. This is especially a problem when pairing fonts. Some thin fonts are seriously blurry, causing the originally suitable combination to become mismatched, seriously affecting the experience.
Retina Display brings finer precision, but also brings more problems to font rendering, because when displaying ordinary pictures without scaling, it will use 4 pixels to display 1 pixel in the picture; when displaying retina pictures, each pixel corresponds to 1 pixel in the picture. Therefore, some fonts such as Georgia will become very thin, resulting in the font being inconsistent with the design when displayed, affecting the experience.

In fact, we have no way to change the hardware, we can only try to avoid these problems, so it is wise to appropriately increase the text size (14px-16px) on mobile terminals. In addition, you can also increase the weight of the text to avoid it sounding blurry. As for English display, Georgia, one of the classics on the PC, should be used with caution.
4. Whether it has meticulous typesetting <br />Tangcha has done a very good job in Chinese typesetting in this regard, implementing basic typesetting skills such as prohibited rule processing, aligned beginning and end, and English line breaks (hyphenation). It has also conducted experimental attempts on punctuation plug-ins (punctuation marks such as periods, commas, and semicolons at the end of a line will be "hanged" to the outer edge of the right frame of the text) and paragraph indents, all of which have brought readers a good reading experience.

In addition, the reading experience also depends on other important factors, such as using different fonts in different occasions, font size, weight, length of a line of text, density between words, etc.
Reading is a big thing, and every aspect of it is inseparable from words. Although the words are small, every stroke is closely related to the experience. For designers, an excellent reading experience is not only about pursuing visual beauty, but also about caring for readers.

<<: A brief discussion on Flex layout and scaling calculation

>>: SQL implementation of LeetCode (184. The highest salary in the department)

Linux common commands chmod to modify file permissions 777 and 754

MySQL statement to get all dates or months in a specified time period (without setting stored procedures or adding tables)

mysql gets all dates or months in a time period 1...

How to match the size of text in web design: small text, big experience

Linux common commands chmod to modify file permissions 777 and 754

Swiper.js plugin makes it super easy to implement carousel images

Analysis of idea compiler vue indentation error problem scenario

WeChat applet implements text scrolling

About browser compatibility issues encountered and solutions (recommended)

The complete process of iptables rules in Docker being lost after iptables restart

Semantics: Is Html/Xhtml really standards-compliant?

How to install elasticsearch and kibana in docker

TinyEditor is a simple and easy-to-use HTML WYSIWYG editor

How to understand the difference between computed and watch in Vue

Recommend

Mysql implements null value first/last method example

Analyze MySQL replication and tuning principles and methods

Analyze how to automatically generate Vue component documentation

Three.js realizes Facebook Metaverse 3D dynamic logo effect

Deploy Confluence with Docker

JS implements dragging the progress bar to change the transparency of elements

Introduction to Linux and the most commonly used commands (easy to learn, but can solve more than 95% of the problems)

Concat() of combined fields in MySQL

JavaScript implementation of the back to top button example

How to implement a multi-terminal bridging platform based on websocket in JS

Detailed graphic tutorial on installation, startup and basic configuration of MySQL under Windows version

Teach you the detailed process of using Docker to build the Chinese version of gitlab community

Detailed explanation of LVM seamless disk horizontal expansion based on Linux

How to remove MySQL from Ubuntu and reinstall it

MySQL statement to get all dates or months in a specified time period (without setting stored procedures or adding tables)