Text Zoom Issues

Examples of Text Zooming for Low Vision

This page demonstrates some challenges regarding user control of text sizes. In the following examples, we cover the minimum critical text size for readability for vision ranging from 20/20 thru 20/120, as well as the legibility sizes up to about 20/240.

The examples below cover body text zoom levels of 100%, 150%, 200%, 400%, 500%, 600%.

While browsers may zoom all text by a given percentage, in these examples only the body text was zoomed the "full" amount, and the larger text of the headlines were all zoomed a much smaller percentage, keeping the headlines never larger than 120px.

The column widths were also increased, but not increased by the full percentage. This was to demonstrate that while low vision may need a very high magnification, it is not always possible to zoom enough on a small device such as a phone without the need for horizontal scrolling or rotating the device to landscape orientation.

20/20 Example

A 36px HEADLINE

Bold Medium Subhead @ 24px

This is an example of body text, shown here with a drop cap. Body text is defined as a block of text that comprises three or more lines in a column. Specifically, this font is 16px which is equivalent to 12pt in printed text. It is set at "normal" weight also referred to as weight 400, of the common font Helvetica Neue. This is the size and weight that is considered "normal" for the purposes of this discussion.

At this size, there are around 50 characters per line. Best practices for typesetting recommends 40 to no more than 80 characters per line, with 50 to 60 being ideal for normal vision. This column width fits on a large iPhone in portrait. The line spacing for this example is 1.3, and 0.8em between paragraphs.

This example is #4a4a4a against a background of #e5e5e5. This is WCAG 7:1 or APCA Lc 75 (G-4g). This sample block is an example of the minimum critical contrast and minimum critical size for best readability for normal 20/20 vision. It is near the legibility limit for 20/40.

20/30 Example

A 50px HEADLINE

Bold Medium Subhead @ 32px

This is an example of body text, shown here with a drop cap. Body text is defined as a block of text that comprises three or more lines in a column. Specifically, this font is 24px which is equivalent to 18pt in printed text. It is set at "normal" weight also referred to as weight 400, of the common font Helvetica Neue. This is the size and weight that is considered "Large Print" for large print books. It is 150% of the normal 16px font. The largest headline is only zoomed 138% from the 36px headline in the first example.

At this size, there are around 50 characters per line, and this column width width set for reading on an iPhone in landscape, or on an iPad in portrait. Best practices for typesetting recommends 40 to no more than 80 characters per line. The line spacing for this example is 1.3, and 0.8em between paragraphs.

This example is #4a4a4a against a background of #e5e5e5. This is WCAG 7:1 or APCA Lc 75 (G-4g). This sample block is an example of the minimum critical contrast and minimum critical size for best readability for 20/30 vision. It is near the legibility limit for 20/60.

20/40 Example

A 64px HEADLINE

Bold Medium Subhead @ 40px

This is an example of body text, shown here with a drop cap. Body text is defined as a block of text that comprises three or more lines in a column. Specifically, this font is 32px which is equivalent to 24pt in printed text. It is set at "normal" weight also referred to as weight 400, of the common font Helvetica Neue. This size and weight is larger than most "Large Print" books. It is only twice the size, or 200%, of normal 16px text. The largest headline is only zoomed 177% from the 36px headline in the first example.

At this size, there are about 45 characters per line, with this column width set for reading on an iPhone in landscape, or on an iPad. While best practices for typesetting recommends 40 to 80 characters per line, letter size and device size limit this for low vision. The line spacing for this example is 1.2, and 0.8em between paragraphs.

This example is #4a4a4a against a background of #e5e5e5. This is WCAG 7:1 or APCA Lc 75 (G-4g). This sample block is an example of the minimum critical contrast and minimum critical size for best readability for 20/40 vision. It is near the legibility limit for 20/80.

20/60 Example

A 80px HEADLINE

Bold Subhead @ 56px

This is an example of body text, shown here with a drop cap. Body text is defined as a block of text that comprises three or more lines in a column. Specifically, this font is 48px which is equivalent to 36pt in printed text. It is set at "normal" weight also referred to as weight 400, of the common font Helvetica Neue. This size and weight is larger than most "Large Print" books. It is three times the size, or 300%, of normal 16px text. The largest headline is only zoomed 222% from the 36px headline in the first example.

At this size, there are about 35 characters per line, with this column width set for reading on an iPhone in landscape, or on an iPad. While best practices for typesetting recommends 40 to 80 characters per line, letter size and device size limit this for low vision. The line spacing for this example is 1.2, and 0.8em between paragraphs.

This example is #4a4a4a against a background of #e5e5e5. This is WCAG 7:1 or APCA Lc 75 (G-4g). This sample block is an example of the minimum critical contrast and minimum critical size for best readability for 20/40 vision. It is near the legibility limit for 20/80.

20/80 Example

A 96px HEADLINE

Bold Subhead @ 72px

This is an example of body text, shown here with a drop cap. Body text is defined as a block of text that comprises three or more lines in a column. Specifically, this font is 64px which is equivalent to 48pt in printed text. It is set at "normal" weight also referred to as weight 400, of the common font Helvetica Neue. This size and weight is far larger than most "Large Print" books. It is four times the size, or 400%, of normal 16px text. The largest headline is only zoomed 266% from the 36px headline in the first example.

At this size, there are only 34 characters per line, with this column width set for reading on an iPad mini in landscape. While best practices for typesetting recommends 40 to 80 characters per line, letter size and device size limit this for low vision. The line spacing for this example is 1.1, and 0.8em between paragraphs.

This example is #4a4a4a against a background of #e5e5e5. This is WCAG 7:1 or APCA Lc 75 (G-4g). This sample block is an example of the minimum critical contrast and minimum critical size for best readability for 20/80 vision. It is near the legibility limit for 20/160.

20/100 Example

A 108px HEADLINE

Bold Subhead @ 88px

This is an example of body text, shown here with a drop cap. Body text is defined as a block of text that comprises three or more lines in a column. Specifically, this font is 80px which is equivalent to 60pt in printed text. It is set at "normal" weight also referred to as weight 400, of the common font Helvetica Neue. This size and weight is far larger than most "Large Print" books. It is five times the size, or 500%, of normal 16px text. The largest headline is only zoomed 3x or 300% from the 36px headline in the first example.

At this size, there are only about 28 characters per line, awith this column width for reading on an iPad in landscape. While best practices for typesetting recommends 40 to 80 characters per line, letter size and device size limit this for low vision. The line spacing for this example is 1.075, and 0.8em between paragraphs.

This example is #4a4a4a against a background of #e5e5e5. This is WCAG 7:1 or APCA Lc 75 (G-4g). This sample block is an example of the minimum critical contrast and minimum critical size for best readability for 20/100 vision. It is near the legibility limit for ~20/200.

20/120 Example

A 120px HEADLINE

Bold Subhead @ 102px

This is an example of body text, shown here with a drop cap. Body text is defined as a block of text that comprises three or more lines in a column. Specifically, this font is 96px which is equivalent to 72pt in printed text. It is set at "normal" weight also referred to as weight 400, of the common font Helvetica Neue. This size and weight is far larger than most "Large Print" books. It is six times the size, or 600%,, of normal 16px text. The largest headline is only zoomed 333% from the 36px headline in the first example.

At this size, there are only about 26 characters per line, with this column width limited to imply reading on a large iPad in landscape. While best practices for typesetting recommends 40 to 80 characters per line, letter size and device size limit this for low vision. The line spacing for this example is 1.05, and 0.8em between paragraphs.

This example is #4a4a4a against a background of #e5e5e5. This is WCAG 7:1 or APCA Lc 75 (G-4g). This sample block is an example of the minimum critical contrast and minimum critical size for best readability for 20/120 vision. It is near the legibilitylimit for ~20/240.

20/80 Portrait Example

A 72px HEADLINE

Bold Subhead @66px

This is an example of body text, shown here with a drop cap. Body text is defined as a block of text that comprises three or more lines in a column, and using a font that is usually 24px (18pt) or less.

Specifically, this font is 64px which is equivalent to 48pt in printed text. It is set at "normal" weight also referred to as weight 400, of the common font Helvetica Neue. This size and weight is far larger than most "Large Print" books. It is four times the size, or 400%, of normal 16px text.

At this size and this small column width there are around 24 characters per line, this column width os imply reading on a large iPhone in landscape. While best practices for typesetting recommends 40 to 80 characters per line, letter size and device size create limits for low vision. The line spacing for this example is 1.1, and 0.8em between paragraphs.

This example is #4a4a4a against a background of #e5e5e5. This is WCAG 7:1 or APCA Lc 75 (G-4g). This sample block is an example of the minimum critical contrast and minimum critical size for best readability for 20/80 vision. It is near the legibility limit for 20/160.


Discussion and Considerations


Among the things to notice regarding these examples is that the largest headline was zoomed up about 25% to 45% less than the body text zoom percentage, with the relative amount of zoom for the headline decreasing as the total size increased.

Also, some properties required a reduction as the text was zoomed larger, such as line-height: . While the normal text had a line height of 1.3, the largest text had this reduced to 1.05. Similarly, some properties that used an em unit required adjustment as the text was zoomed.

And last but perhaps most important, as the text zoomed up, it was clear that maintaining the same text container size was not possible. The div containing the body text had to be increased in size, in a ratio similar to that of the headline text. This indicates the difficulty with issues such as text reflow.

It is clear that a 400px-wide-div that contains normal sized text cannot contain that text when zoomed up by more than 200% to 300%. Something has to give.

While a specific recommendation is not being made here, it would seem a multi-tiered approach to the specifications for text zoom is needed. A simple percentage to zoom all text is not a suitable standard, and different devices impose additional limitations beyond the control of the content author.

REFERENCE

The following charts provide reference to known critical font size factors for best readability.

Critical Font Sizing Chart

Screen Pixel Density vs Viewing Distance

This chart displays the relative screen pitch needed to maintain a CSS px at the visual angle of 1.278 arc minutes.

Summary

This work is part of an ongoing research project into human visual perception of web content. The work shown here is preliminary, and is not yet a functional part of any standard. It is presented for discussion purposes.

⇐     Main Content Column Width 800px     ⇒