The theory of font size and readability

🚨NOTICE🚨

I used https://render.githubusercontent.com/render/math?math= as a tool for loading formulas, but there may be errors when loading..
Please refer to the attached LaTeX code.

• A hack for showing LaTeX formulas in GitHub markdown.md

If you find the error, I would appreciate it if you correct it.

---

🇰🇷 Korean Docs(한국어)

Table of Contents

• Triger
• Background
  • Inspired
  • Visual Angle
• Visual Angle Formulas
  • Basic Formula
  • Convert to familiar units
    • Point Height
    • Point to Pixel && Redefined
  • Summary
• Scale for devices
  • Responsive
  • Responsive Fluid
  • Limited Fluid
    • CSS Lock
    • In $min-size + $very-small-vw form
  • Summary
• Apply
  • Relation && Typical value
  • Calculates
  • Fluid Size Calculation Process
  • Summary
• Reference

Triger

While looking at responsive webs and patterns, I wondered how to determine the size.
I didn't want to perfunctory decide like the phone size by 16px, desktop by 20px.

I wanted to be flexible in a wide variety of devices.

Background

Inspired

Text can be sized, such as the units mm and px, which are displayed on the screen.
However, these sizes should change according to the size of the screen, the distance between the eyes and the screen.

So, what units can be used to satisfy various devices, resolutions, and distances?

Anyone who remembers the stellar parallax in astronomy,

you may have come across the concept of minute and second of arc.

This criterion(Visual Angle) is used to determine whether letters can be read.
A typical example is the principle of eye examination.

• Visual Acuity by Michael Kalloniatis and Charles Luu

Visual Angle

For example, a visual acuity of 1.0 is enough to be able to recognize the optotype "Illiterate E", which is a 5 arc minutes visual angle.
This means that the resolution should be enough to distinguish the visual angle of 1 arc minutes.

Visual Angle Formulas

Basic Formula

Visual angle and visual measurement principle can be applied to various devices.

Assessing readability based on Arc Minutes figures is as follows:

• 10~12: Minimum size to read
• 16: Time-critical minimum size
• 20: Optimal size

Here is a formula that calculates the height of the text we need to figure out. It was assumed that and were known.

H = 1000 \times D \times \tan({V \over 60})

• : Symbol Height(Millimeter)
• : Distance to Screen(Meter)
• : Visual Angle(Arc Minutes)

is the goal and I called it fit size.

Convert to familiar units

Point Height

If you do some processing on this, you can get a point unit value with a simple substitution.

Cub function

Based on the two expressions:

H_s = \frac{S}{\sqrt{R^2 + 1}}

• : Inch based Height(Inch)
• : Screen's Diagonal(Inch)

R = {w \over h}

• : Aspect ratio(Number)
• : Horizontal Resolution(Pixel)
• : Vertical Resolution(Pixel)

Result

This equation is derived.

T = H \times {h \over H_s} \div 72

• : Text Height(Point)

Very simple, right?
All numbers are assumed to be positive:

T = \frac{125 \times D \times \tan({V \over 60}) \times \sqrt{w^2 + h^2}}{9 \times S}

Other units cleanup

• : Meter * 0.001 => Millimeter
• : Arc Minutes * π / (180 * 60) => Radian (The basic unit of trigonometric functions is Radian.)

T = \frac{D_{mm} \times \tan({\pi \times V \over 10800}) \times \sqrt{w^2 + h^2}}{72 \times S}

Point to Pixel && Redefined

Finally, you can convert Point to Pixel units used on the web.

• CSS Length Explained

CSS standards are 96dpi, so multiply by to finish.

T = \frac{D \times \tan({\pi \times V \over 10800}) \times \sqrt{w^2 + h^2}}{54 \times S}

• : Text Height(Pixel)
• : Distance to Screen(Millimeter)
• : Visual Angle(Arc Minutes)
• : Screen's Diagonal(Inch)
• : Horizontal Resolution(Pixel)
• : Vertical Resolution(Pixel)

In addition,

ppi = {\sqrt{w^2 + h^2} \over S}

is a ppi, so if you know the ppi value in advance,

T = \frac{D \times \tan({\pi \times V \over 10800}) \times ppi}{54}

It can be processed more simply as above.

Summary

It can be calculated with 5 factors.

• Distance to Screen
• Visual Angle
• Screen's Diagonal
• Horizontal Resolution
• Vertical Resolution

Scale for devices

Visual angles allow us to get the fit size for each device.
However, it is practically difficult to target an infinite number of devices.

Therefore, we need to use a few standard devices.
We have to think about how to fill the gap.

Responsive

Provides fit size for breakpoints of each standard device with media queries.

Assume

• 3 breakpoints total: 480px, 768px, 1280px.
• Fit sizes are calculated: 18.75px, 16px, 17.73px

Example

body {
  font-size: 16px;
}

@media (min-width:480px) {
body {
    font-size: 18.75px;
  }
}

@media (min-width:768px) {
  body {
    font-size: 16px;
  }
}

@media (min-width:1280px) {
  body {
    /* Never get larger than this */
    font-size: 16.73px;
  }
}

Static in size, with the disadvantage of changing only at breakpoints.

Responsive Fluid

Use viewports that can be set based on the area of the area currently visible.

like this

vw = {T \over w} \times 100

• : Text Size(VW)
• : Text Size(Pixel)
• : Horizontal Resolution(Pixel)

Using vw, you can always display the same ratio.
However, there is no guarantee that the same ratio is the fit size.

For example, if the ratio based on 2000px is applied equally to a 500px screen, it will be very small.

• 1vw at 2000px: 20px;
• 1vw at 500px: 5px

That's why we really need responsive.

Example

body {
  font-size: 16px;
}

@media (min-width:480px) {
body {
    font-size: 3.91vw;
  }
}

@media (min-width:768px) {
  body {
    font-size: 2.08vw;
  }
}

@media (min-width:1280px) {
  body {
    /* Never get larger than this */
    font-size: 1.31vw;
  }
}

Still the size change is severe.

Limited Fluid

To reduce the size change, you can use calc() to consider the $min-size + $very-small-vw.

Now, we have to think about how the $very-small-vw will be made.
But fortunately, there is a pioneer.

CSS Lock

It uses It sets the $min size, $max-size, $min-width and $max-width to allow fluid resizing between the two.
This called CSS locks.

Here’s the math, with credit to Mike Riethmuller:

F = T_m + ((T_M - T_m) \times \frac{100vw - w_m}{w_M - w_m})

• : Fluid Size(Calc())
• : Minimum Text Size(Pixel)
• : Maximum Text Size(Pixel)
• : Minimum Width(Pixel)
• : Maximum Width(Pixel)

The expression is tidy.
But if there is one drawback, it is expressed as follows and is not abbreviated.

calc(16px + ((17.73px - 16px) * ((100vw - 768px) / (1280px - 768px)));

It may cause performance problems.

In $min-size + $very-small-vw form

Let's make it the ideal form that we first envisioned.

Cub function

Based on the two expressions:

F_r = \frac{T_M - T_m}{w_M - w_m}

• : Fluid Rate(Number)

F_b = T_m - (F_r \times w_m)

• : Based Size(Pixel)

Result

Combine like this.

F = \pm F_b + (100 \times F_r)vw

Shall we actually put in a value?

• : 0.00338
• : 13.405px
• : calc(13.405px + 0.33789vw)

Yes!! Now we've achieved the form we want 🎉🎉

One is less because it is specified as a range.

Example

body {
  font-size: 16px;
}

// fluid-size(18.75px, 16px, 480px, 768px);
@media (min-width:480px) {
body {
    font-size: calc(-0.9548611111vw + 23.33px);
  }
}

// fluid-size(16px, 17.73px, 768px, 1280px);
@media (min-width:768px) {
  body {
    font-size:calc(0.33789vw + 13.405px);
  }
}

The size can be fluid and within a defined range.
The change is even smooth.

Summary

• Provides the size to each device with a media query.
• With vw, you can resize according to the ratio of your device.
• It can be limited by a range of sizes and widths.

Apply

Relation && Typical value

The relationship by formula is as follows:

with Distance(+, Positive)

The longer the distance, the smaller the angle, so the larger the size.

Mobile(200~400 mm) < Tablet(300~500 mm) < Monitor(400~800 mm)

with Resolution(+, Positive)

The higher the resolution, the smaller the ratio on the screen, so the larger the size.

Mobile(1136x640~2688x1242 px) < Tablet(1280x800~2732x2048 px) < Monitor(1920x1080~5120x2880 px)

Breakpoints for each device can be found at the following website.

• Media Queries for Standard Devices
• Responsive breakpoints in 2020
• Screen Resolution Stats Worldwide

In the case of high resolution, it should be considered to be scaled.

• Display resolution
• 5K resolution
• Mobile design 101: pixels, points and resolutions

with Screen Size(-, Inverse)

The larger the screen, the smaller the size.

Monitor(24~32 in) < Tablet(7~12.9 in) < Mobile(4~6.5 in)

Typical value

Tablets and phones are assumed to be used vertically, and scaling values are considered.

Values
Monitor	Distance(mm)	Screen Size(in)	Horizontal Resolution(px)	Vertical Resolution(px)
min	400	24	1920	1080
max	800	32	5120	2880
Tablet
min	300	7	800	1280
max	500	12.9	2048	2732
Phone
min	200	4	640	1136
max	400	6.5	1242	2688
Criteria
High-resolution	600	27	2560	1440
Desktop	600	24	1920	1080
Laptop	500	14	1280	720
Tablet	400	10.2	768	1024
Phone	300	5	480	854

Calculates

I calculated the ideal values before making the code.
At first, when calculating based on 20arc min, the values were too small that I was embarrassed, so I found a suitable value and 60arc min came out.

Device	20arc min(px)	60arc min(px)
High-resolution	7.03	21.1
Desktop	5.93	17.8
Laptop	5.65	16.95
Tablet	5.41	16.23
Phone	6.33	19

Have a problem?

Under the following conditions(Demo - Try menu View Compiled SCSS.):

• 10.2″ screen
• displaying at 1920 by 720 pixels
• 818 millimeters away
• 20 arc min

Result is 17.72 px.

The formula doesn't seem to have a big problem.
I think it's based on modern high-resolution devices.

Fluid Size Calculation Process

As you can see, it's too complicated and there are a lot of things you need.

So, I set the default values for five devices(High-resolution, Desktop, Laptop, Tablet, Phone), and if only one size value is required, it is converted to a value for each device.
Besides, the Wiki:API is almost the same.

The calculation process is as follows:

1. Size specification
2. Angle calculations in the devices that would look the smallest(or can you specify which device to reference?, Options:device)
3. Generate a fit size for each device based on the angle
4. Provides fluidity between devices

Converted Sample

 // Code
body {
  @include font-size(16px);
}

/** Tentative Result
 * INFO
 * Basis Angle: min angle device(Tablet)
 *
 * SIZES
 * Default:            16px;
 * Phone:        about 18.75px;
 * Tablet:       about 16px;
 * Laptop:       about 16.73px;
 * Desktop:      about 17.56px;
 * High-Desktop: about 20.82px;
 */


 // Result
body {
  font-size: 1rem;
}

@media (min-width: 480px) {  // Phone ~ Tablet
  body {
    font-size: calc(-0.95048vw + 1.4568rem);
  }
}

@media (min-width: 768px) {  // Tablet ~ Laptop
  body {
    font-size: calc(0.14041vw + 0.93317rem);
  }
}

@media (min-width: 1280px) { // Laptop ~ Desktop
  body {
    font-size: calc(0.13069vw + 0.94095rem);
  }
}

@media (min-width: 1920px) { // Desktop ~ HighDesktop
  body {
    font-size: calc(0.50823vw + 0.4879rem);
  }
}

Summary

Relation

• High-resolution => Tablet: smaller(↓)
• Tablet => Phone: bigger(↑)

How to Use?

• Just specify one size value!!
• Almost like everybody original way!!

Reference

General responsive typography guidelines

• The Responsive Website Font Size Guidelines
• How Does Mobile Font Size Impact SEO?

Real world typography guidelines

• Apple: macOS, iOS, watchOS, tvOS
• Google: Material
• Microsoft: UWP, Win32

Readability by screen size and distance

• Human Factors Design Guidance For Driver-Vehicle Interfaces
• Legibility: how to make text convenient to read
• Type and trig: Understanding how to scale text for automobile design (with bonus calculator!)
• Font Size and Legibility for Videowall Content
• What Are The Recommended Font And Screen Sizes For Xhibit Signage Displays?
• Character and Symbol Size

Scaling algorithm for real-time liquidity

• The State of Fluid Web Typography
• Scale Typography For Any Screen Size
• Fluid Typography
• Simplified Fluid Typography
• Fluid typography examples
• Responsive And Fluid Typography With vh And vw Units
• Truly fluid typography