A Brief History of Web Typefaces

The following article comes from Code Secret Garden, author ConardLi

(Start Front-end Daquan, improve front-end skills)

code secret garden official account/ConardLi

When you are struggling with what font size to choose, especially when you are trying to adapt to different screens and scenarios. Looking back at the historical changes in the development of web fonts may give you a new perspective.

When I started working on the Web stuff around 2005 , there were two very popular body text font styles:

• 10pxVerdana;

• 11pxArial.

These two styles may appear on 90% of professional websites for WindowsXP and earlier versions of IE5, IE5.5 and IE6 users see. 10pxVerdana is roughly equal to 10pxVerdana due to heavy font hinting, lack of font smoothing or subpixel rendering, and Verdana has a larger x-height >11pxArial, but the letters are slightly wider and they look similar.

Today, 10px and 11px may seem trivial, but in the early 2000s they were considered readable for two reasons:

1. The 800×600 and 1024×768 screens of the late 1990 and early 2000 had large pixels, so The pixels chosen were on the small side, but not as small as it might seem today.

2. Designers and their clients are used to 9, 10 and 11 point sizes for typography (books, magazines, flyers, etc.), and using larger Readers yelled.

With little experience designing for the Web , graphic designers and marketing departments relied on previous knowledge of QuarkXPress and MicrosoftWord . "How do I convert a font point size used in a flyer or magazine ad to a HTML font size?"

Of course, since pixels have no universal physical size, there's no way to reliably convert printed dots to pixels. Screens have different pixel-per-inch ratios. The native Macintosh screen is 72ppi (or 68ppi ?). Twenty years later in 2004 , screens were generally in the 80-90ppi range. A few years later, the pixels got smaller, and screens were typically in the 90-120ppi range, while most iPhone resolutions were 160ppi . Despite common misconceptions, even before the Retina transition began, the resolution of the Web was not 72ppi.

However, we don't need to figure out the exact resolution-per-inch of each device to make informed design choices. Try it out, should always beat dpi, ppi, Retina and even pixel count.

In November 2006, Oliver Reichenstein conducted a simple experiment: He compared the distance between the eyes of the magazine's body text and the eyes of a normal person to the desktop screen. The distance between the two is normal, while the distance of the website Text appears much smaller. Oliver advocates setting the body copy to the browser's default or 100%, which is the idiom in regular 16px browsers. It was a revolutionary proposition in 2006, and even a few years later. Web designers and clients think this is extreme. Five years later, we still have to fight the death of the 11px font.

Text that is too small will take more time to read. Users may have to lean towards the screen, bring the mobile device closer, squint or just focus more. As designers and developers, we try not to ask for extra effort from the people who use or read our work.

On average, online text got bigger in the late 2000s and early 2010s—at least in nominal pixel size. My guess is the following reason:

• Due to the arguments made by OliverReichenstein , the media has changed their views.

• On iPhone and other early smartphones, text in the 10-12px range looks tiny (resolutions in the 150-200ppi range Inside).

I remember web designers and developers leading blogs, professional news sites, and other client projects set to the "bigger" size of 14-18px . This evolution trickled down to news sites, with one striking redesign after another. Today, theguardian.com has a line height of 1.0625rem (17px) text, nytimes.com circa 2017 17pxfont-size and 26pxline-height in 2019, and 20pxfont-size on widescreen in 2019 code> and 30pxline-height.

These numbers are just a point in time. Back in 2003, 12pxArial was probably a great readability option for most users with font smoothing turned off on 800×600 screens. This feeling that the browser's default font size is too large (very evident when Oliver 's article was published in 2006) is partly cultural, but also technical reason. Again, we feel that 16px is very small for all but smaller screens, again for a number of reasons.

Then there's the big body copy trend. In April 2012, influential web designer JeffreyZeldman redesigned his website to use 24pxGeorgia body copy (beginning each post part is 32px). Many fellow designers were baffled, with some complaining that the design was difficult to read and had to be scaled down on a laptop or desktop computer to read comfortably. Nevertheless, the design continues to this day. Other designers have used similar sizes, for example, TrentWalton stated that he prefers text of 20–24 pixels (or 125–150% ) .

The latest example of this trend is JeremyKeith's ResilientWebDesign online eBook. Jeremy uses CSS Lock to change the font size between two borders based on viewport width: 100% and 250%. At 320px (using default browser settings) the font size is 16px. At a resolution of 1600px , you will get text at 40px . Obviously this is a design choice and I think (similar to what TrentWalton describes) the intended effect for laptop and desktop use is for the reader to lean back and face the screen rather than toward the screen. This design engages your time instead of browsing text.

While this design can provide a good reading experience on smaller screens (especially smartphones and tablets, in my tests), I found it difficult on larger screens. My main question is:

• Only a few lines of text are visible at a time. For example, there are 10 lines of text on a 13" laptop. I have a certain amount of attention deficit when I'm reading, and this setup removes a lot of the visual context when I'm trying to scroll; I usually try to fix that by selecting all the other passages I'm reading, but when This doesn't help when the design only shows one or two paragraphs at a time.

• Each line of text is actually wide, requiring the reader's eyes to be wider than usual. This can have two undesirable effects: the reader may end up spending more effort on the same line of text (e.g. 3–5 instead of 2–4); in more extreme cases, wider eye movements may lead to eye strain or tiredness.

Suppose someone is sitting on a couch with a laptop on their lap and is currently reading an article. And assuming that for this kind of person, in this setting, they have their preferences and their current level of fatigue and so on, so there is an ideal font size for whatever text they're reading. For example, it could be 22px.

The reading process involves saccades and fixations. During each fixation (which may span a quarter of a second), they only see a small portion of the focused text:

Now, if the same text is larger, but other parameters (like eye-screen distance) are unchanged, I guess the result will look like this:

Since the focus area remains the same, and the text is larger, I suspect the eye will correctly identify fewer letters at each fixation. That's why my assumption is that for really large text (like ResilientWebDesign250% body text on larger screens), the reader will need to use more fixation power to read the same text, and may Lose reading speed and get tired faster. I don't have the skills required to test that hypothesis, but I would be wary of large text trends.

Personally, I prefer limited adjustments to font size. I like to start at 100% on small screens and use it on larger phones or tablets (like 110% or 115%), on laptops and larger screens Usage may reach 125%. Then, based on the font I'm using, the look I want, and the results of my testing on various devices, I adjust these values.

I also feel bad for the fact that we've been chasing device makers, OS and browser developers and trying to adjust font sizes every two years to fit the market. The concept of slightly increasing the font size according to the screen width is easy to catch people's attention. Isn't it the device's job to make sure font sizes 100% are readable?

In theory, a CSS pixel should match a "reference pixel" defined as the viewing angle:

The reference pixel is the viewing angle of one pixel on the device, the pixel density is 96dpi, and the distance from the reader is an arm's length. Thus, the nominal length of one arm is 28 inches, and its viewing angle is approximately 0.0213 degrees. At arm's length, 1px is equivalent to 0.26 millimeters ( 1/96 inches).

But that rule can only be followed if hardware manufacturers, operating system and browser developers all cooperate to make it happen. Especially hardware vendors are more interested in selling screens optimized for video resolutions (1080p, 4K), even if it would make the entire UI become very small.

In theory, browser makers should be able to change the default font size of 16px to suit modern devices. But too much existing content relies on this default size, which is not going to change.

So, we guess; we test; we tweak:

1. Whether technically correct or approximate (my own calculations show a resolution of 68dpi), 72dpi resolution allows designers to easily convert point sizes to pixels size. Since there are 72 printed dots in an inch, each pixel is exactly one dot at 72dpi .

2. Instead of changing the "system dots per inch" resolution, Retina displays map each system dot to a 2×2 square of physical pixels. Since CSSpx units work like system points on these devices, and doubling the physical pixel resolution doesn't affect the size of HTML text, I skip Discussed resolution measured in physical pixels (e.g. 320ppi).

3. A responsive Web design technique that allows you to smoothly transition between two property values ​​as the screen gets smaller or larger.

Find this article helpful to you? Please share with more people

Focus on "Front-end Daquan" and add stars to improve front-end skills

Good article, I am reading❤️