Designing accessible text for Android: variable font and screen sizes (2023)

When people say that it’s important to build an “accessible” app, that generally means that the app should be usable by as many people as possible, regardless of any disabilities they might have. The most common disabilities that affect mobile applications are vision and motor control impairments. For those with some degree of vision impairment, apps should be designed to allow for variable size fonts and screens, as well as for use by screen readers that speak the content aloud. In this article, I’ll talk first about designing for variable font and screen sizes on Android.

When you’re working with TextView, you’ve probably seen Android Studio warn you when you use a font size measurement other than sp, or “scale-independent pixels”. Here’s what happens when you use dp (density-independent pixels) instead:

Designing accessible text for Android: variable font and screen sizes (1)

This message is generated by the linter provided by the Android build tools. The full lint message is this (emphasis mine):

When setting text sizes, you should normally use sp, or “scale-independent pixels”. This is like the dp unit, but it is also scaled by the user’s font size preference. It is recommended you use this unit when specifying font sizes, so they will be adjusted for both the screen density and the user’s preference.

There are cases where you might need to use dp; typically this happens when the text is in a container with a specific dp-size. This will prevent the text from spilling outside the container. Note however that this means that the user’s font size settings are not respected, so consider adjusting the layout itself to be more flexible.

(Video) Build Android UIs for any screen size

More information:
http://developer.android.com/training/multiscreen/screendensities.html

While dp is common for measuring everything else on screen, using sp is better for text for one important reason: it lets the user change the size of the font to suit their preferences. Here’s what the font size preference screen looks like on Android N emulators, both the normal and maximum font sizes:

Designing accessible text for Android: variable font and screen sizes (2)

(With these screens I’m showing, you should try to size them to match a 5 inch phone display to get the intended effect.)

For those of us with normal or corrected vision, the default font size is likely OK. It might never occur to you to change this. However, for people with poor vision (who are not legally blind, or can’t have their vision corrected to normal), increasing the font size matters greatly. Here, I’ll apply the same amount of blur to each screen that simulates what poor vision might be like:

Designing accessible text for Android: variable font and screen sizes (3)

(Video) Android Tutorial - Scaling for all device sizes programmatically

(Note that visual impairment is more complicated than blurry vision — this is only an approximation.)

No matter how good your vision is, the normal font size is almost completely unreadable here. However, the larger size (while still a bit fuzzy) is actually somewhat readable. If you use sp as a font measurement uniformly throughout your app, you’re enabling people with poor or uncorrected vision to more easily use your app. And you’re definitely meeting the preferences of people who simply prefer larger text. High quality mobile app designs allow for (and expect!) the size of the text to change without impacting the usability and presentation of the app. Please note that allowing for adjustable font sizing is not really enabling full “accessibility”, but it’s part of designing an app that looks and works well for as many people as possible.

Android provides some facilities to make it easier to adjust layouts to variable font sizes. If you’re a designer, it’s important to incorporate these into your designs, and if you’re an engineer, you’ll need to keep an eye out for potential problems that a designer might have missed.

Strict height constraints? Limit overflow text.

One thing you’ll quickly realize, as font sizes can vary, is that your pixel-perfect designs might become annoyingly imperfect. If you’re designing and implementing screens around the specific size of some text, that’s likely going to cause problems as the font size changes (or even on other devices that don’t share the exact same dimensions). So it’s a good idea to abandon rigid designs, and allow for flexibility.

One common design requirement is for all the elements in a scrolling list to be the same height. This is fine. However, if you assume all the text will fit on the same one or two lines, that design could break as the font or text grows. For these cases, a better idea is to:

  1. Cap (or force) the number of lines of text that a TextView must render
  2. Ellipsize any overflow text
  3. Allow for a gesture to expand or disclose any missing information. This could be as simple as tapping to get a popup with the complete information.

So, if you want to allocate exactly two lines of text with ellipsized overflow, your TextView will be configured like this:

<TextView
android:id="@+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:lines="2"
android:ellipsize="end"

android:text="..."
/>

Note the use of android:lines to fix the height of to a certain number of lines, and android:ellipsize to render ellipses at the end of the text when it overflows the allocated space. As the text and font varies, your relative size constraints won’t be violated. Here’s a RecyclerView with constant height items being truncated as necessary, depending on the chosen font size:

Designing accessible text for Android: variable font and screen sizes (4)

(Video) Design accessibility for individuals with Material Design

To disclose full information about one item, a tap on that item could simply display a dialog with the full details:

Designing accessible text for Android: variable font and screen sizes (5)

You can see now that the entire description text fits within the space available in the dialog.

Or does it…?

Limited height constraints? Add scrolling.

Another problem arises with height constraints. If your design suggests that the entire text must always be visible (so, no ellipses or truncation), the text length is variable, and the font size varies due to user preference, you could run into a surprise where text is simply cut off if it doesn’t fit within the available height. Here’s the same dialog from before, now in landscape orientation:

Designing accessible text for Android: variable font and screen sizes (6)

(Video) SwiftUI 3: Dynamic Font for Accessibility in Text View

Note that the item price and buttons to add and cancel are no longer visible. They’re present in the layout, but completely inaccessible because the height of the description pushed them below the visible area of the dialog.

To prevent situations like this, the container for the variable-sized content should always be scrollable. Simply wrap the view group that contains all the content in a ScrollView so that it can scroll vertically, no matter how tall it appears on your device during development with test data. This gives the user a chance to see everything, regardless of the size of the user’s device, their chosen font, and the text in use.

Designing accessible text for Android: variable font and screen sizes (7)

Notice that the buttons are anchored to the bottom of the popup, and the remaining content scrolls as needed (possibly not at all). No matter the size of the font or the length of the text, the content is usable.

Pro tip: You can preview your layouts with arbitrarily long text in Android Studio using the tools:text attribute on a TextView. It’s traditional to use variations on lorem ipsum text.

If it’s not obvious by now, layouts for variable length content should always consider the possibility of overflow. Unless you have a hard guarantee about the size of the content, and that it will fit within the minimum sized screen with the max font size, always add the capability to scroll.

Indeed, Android devices comes in a wide variety of sizes, can be used in portrait or landscape, and support split screen display of two apps. Flexible layouts are absolutely crucial to support these variations.

(Video) Flutter Tutorial - Responsive UI Text Layout - Auto Size Text

Designing to allow larger fonts is a good start, however, for the legally blind, no increase in the size of text will help them read that text, even though they normally still have some residual vision. In order for an app to be fully accessible to the blind, you should also make sure that the text on screen should be read correctly by a screen reader. And that will be the subject of my next post.

FAQs

What size font is best for accessibility? ›

Use a large enough font size for body text so that people can comfortably read. Use at least an effective size of 16px, but this can vary depending on the design of the font. Maintain a line length that promotes comfortable reading.

How big should text be on screen? ›

16px is the minimum when it comes to desktop browsing, while for mobile browsing, the sizes around 16px will do. Use bigger sizes to increase readability and hierarchy, and make it easier for the reader so they don't get frustrated and leave your website.

How do I make a font accessible? ›

Accessibility Features
  1. Use a font style that is appropriate to your audience.
  2. Minimise the occurrence of imposter letter shapes that are designed to be very similar to other letter shapes as part of the typeface's visual style.
  3. Minimise the occurrence of mirroring letter shapes.
14 Aug 2020

How do I change the size of text on Android? ›

Change display size & text
  1. On your device, open the Settings app.
  2. Search and select Font size.
  3. To change your preferred font size, move the slider left or right.

Which font is most accessible? ›

One of the most accessible and most widely available fonts is Arial; others include Calibri, Century Gothic, Helvetica, Tahoma and Verdana. All these fonts are “sans serif” fonts.

What is the most accessible font to use? ›

The most accessible fonts are Tahoma, Calibri, Helvetica, Arial, Verdana, and Times New Roman. Slab serif fonts including Arvo, Museo Slab, and Rockwell are also considered to be accessible. These font types are mostly used in headings rather than the body text.

What size should text be on mobile? ›

In general, the rule of thumb is that font size needs to be 16 pixels for mobile websites. Anything smaller than that could compromise readability for visually impaired readers. Anything too much larger could also make reading more difficult.

What font size is responsive? ›

The consensus is mobile font size should be 16px (source, source). On tablet and desktop, you have more screen real estate so you can afford to make the text size a bit bigger. A good font size for large devices is 18px - 20px.

What is standard font and size? ›

The most common font used is black Times New Roman at 12 points in size. Other serif fonts, those that have tails, that work well include Cambria, Georgia, Garamond, Book Antiqua, and Didot.

What is ADA compliant font? ›

The only style guideline is that fonts must be sans serif and not italic, oblique, script, highly decorative, or otherwise unusual. However, that's enough to provide a good idea of what can be considered ADA-approved fonts. Sans serif fonts are as plain and straight as possible, increasing the ease of readability.

How do you make text more readable for people with low vision? ›

Avoid stylised typefaces, which may look attractive but they can be illegible to the visually impaired. Use bold or semi-bold style, not light fonts. Avoid blocks of capital letters, underlined or italicised text, as they are all harder to read. A couple of words in capitals is fine.

What is normal text for accessibility? ›

Not all fonts are designed for web accessibility. That's why it pays to stick to typefaces that are typically ADA-friendly, such as Tahoma, Calibri, Helvetica, Arial, Verdana, and Times New Roman.

How do I make my screen text bigger? ›

Make text bigger on your screen

To go to the Accessibility settings on your computer, press the Windows logo key+U or select Start > Settings > Accessibility. Select Text size. Drag the Text size slider to the right to increase the size of the sample text. Once you're happy with the text size, select Apply.

How do I change the size of my text? ›

How To Make The Font Size Bigger On Android - YouTube

Why is my text font so big Android? ›

Open your device's Settings app. Tap Accessibility, then tap Font size. Use the slider to choose your font size.

Is bigger font better for eyes? ›

The larger font size is easier to read and produces far less eye strain.

Which font is easiest on the eyes? ›

Stick with sans-serif fonts - As mentioned earlier, fonts without serifs, such as Arial, are much easier on the eyes.

Which font is easiest read? ›

Helvetica. Along with Georgia, Helvetica is considered to be one of the most easy to read fonts according to The Next Web. This is a sans-serif font and one of the world's most popular typefaces—a modern classic.

What is dyslexic friendly font? ›

Readable fonts

Use sans serif fonts, such as Arial and Comic Sans, as letters can appear less crowded. Alternatives include Verdana, Tahoma, Century Gothic, Trebuchet, Calibri, Open Sans. Font size should be 12-14 point or equivalent (e.g. 1-1.2em / 16-19 px). Some dyslexic readers may request a larger font.

What is the best font for low vision? ›

Arial. As my TVI once explained, Arial is one of the best fonts for vision impairment because every letter is simple and looks different from the other letters, and it also looks fantastic in bold type.

Can screen reader read fonts? ›

Screen readers do not read color or bold fonts and fail to communicate the emphasis the content creator is trying to convey.

What are the 8 text design guidelines? ›

The good news is, there are eight basic, universal typographical design elements: typeface, hierarchy, contrast, consistency, alignment, white space, and color. Even a basic understanding of each of these elements can revolutionize any design project.

How many font sizes should you use? ›

Keep The Number of Fonts Used At a Minimum

Using more than 3 different fonts makes a website look unstructured and unprofessional. Keep in mind that too many type sizes and styles at once can also wreck any layout.

Is 10px font too small for mobile? ›

Text input sizes should be at least 16px

If you're designing a website or app that can be viewed on mobile devices, there is only strict rule: Use a text input font size of at least 16px.

What can I use for responsive text? ›

Use em or rem. One of the best practices to make the responsive text on the web is to use relative units like rem and em .

How do you make a text box responsive? ›

ANSWER: put the text area inside the div, make the div responsive & the width you want it, and make the text area 100% of the div. See link above for the solution I used. That is how I got a textarea to be responsive in a div.

What is a good H1 size? ›

H0: 40 pt (45–38pt) H1: 32 pt (30–34pt) H2: 26 pt (24–28pt) H3: 22 pt (20–24pt)

What is the most common font size? ›

The most popular font size for body copy is a range between 12 and 14 pixels. Header font size ÷ Body copy font size = 1.96.

What are the different font sizes? ›

Some of these dimensions include xx-small, x-small, small, medium, large, x-large, and xx-large. Font size may also be specified using Point, Pica, Inch, Centimeter, Millimeter, em, and percentage.

Is size 9 font readable? ›

Size 9 font is hard to read on a computer, and because you're likely sending your application over the internet, the hiring manager will have to strain their eyes just to read your resume. You should instead use a font size that's at least 10.5 points to make sure your resume is immediately readable.

What is normal text for accessibility? ›

Not all fonts are designed for web accessibility. That's why it pays to stick to typefaces that are typically ADA-friendly, such as Tahoma, Calibri, Helvetica, Arial, Verdana, and Times New Roman.

What is ADA compliant font? ›

The only style guideline is that fonts must be sans serif and not italic, oblique, script, highly decorative, or otherwise unusual. However, that's enough to provide a good idea of what can be considered ADA-approved fonts. Sans serif fonts are as plain and straight as possible, increasing the ease of readability.

Is 12 pt too small for web? ›

Another is ensuring that text can be expanded to 200% on Web sites. For traditional computer monitors, a size of 12pt (=16px) for body is generally recommended for body text (depending on audience). Ensure that default fonts are no smaller than 9 pt (=12px). Smaller sizes may be illegible on some platforms.

What is AAA font size? ›

AAA means that your text has a contrast ratio of at least 7.0. For example, ffffff text on a 595959 background and vice versa. This score is derived for people with 20/80 vision. This visual acuity score is often not able to be corrected with glasses, etc.

What is the best font size for mobile? ›

In general, the rule of thumb is that font size needs to be 16 pixels for mobile websites. Anything smaller than that could compromise readability for visually impaired readers. Anything too much larger could also make reading more difficult.

Is font size 9 too small? ›

Size 9 font is hard to read on a computer, and because you're likely sending your application over the internet, the hiring manager will have to strain their eyes just to read your resume. You should instead use a font size that's at least 10.5 points to make sure your resume is immediately readable.

What is standard font size? ›

There is not a preferred font style; however, you can only use one style type (i.e., Times New Roman, Arial, Calibri, etc.). The font size must be either 11 point or 12 point size.

Are bold fonts ADA compliant? ›

5. Text characters must all be uppercase and in a clearly definable sans serif font— not too bold, no italic, no condensed, etc.

What font is easiest on the eyes? ›

Stick with sans-serif fonts - As mentioned earlier, fonts without serifs, such as Arial, are much easier on the eyes.

What is the best font for poor eyesight? ›

Arial. As my TVI once explained, Arial is one of the best fonts for vision impairment because every letter is simple and looks different from the other letters, and it also looks fantastic in bold type.

What is the smallest readable font size? ›

Anything smaller than 5 pt will be extremely difficult to read, unless it's all capitalized. Even then, 4 pt font is about the smallest you can go. Keep in mind that some typefaces have thinner or lighter font weights, so just because one font is legible in 5 pt doesn't necessarily mean another one will be.

What size should h1 be on mobile? ›

Display text (Heading 1)

On mobile: 32px or 2em or smaller, since it uses up too much space. I use this as the maximum for my font sizes. For the other headings, you would pick some values in between that will still create a visual hierarchy. In most cases, you only need to style your <h1> to <h4> .

Is size 8 font readable? ›

An easily legible font size for longer body text as used in magazines and books usually ranges between 8 and 12 points.

What is AA vs AAA accessibility? ›

WCAG 2.0 guidelines are categorized into three levels of conformance in order to meet the needs of different groups and different situations: A (lowest), AA (mid range), and AAA (highest). Conformance at higher levels indicates conformance at lower levels.

What is AAA accessibility standard? ›

AAA compliance is viewed as the gold standard level of accessibility. To reach this level, you must meet all A and AA criteria and the contrast requirements between foreground and background are higher and even more strict. Basically, you can only use very dark colors on a very light background and vice versa.

What is a good contrast ratio for accessibility? ›

Whenever using color in images, ensure that the colors have a contrast ratio of at least 4.5:1. This ensures that the text is still readable to those who may have color blindness.

Videos

1. Office Hours: Variable fonts in Figma
(Figma)
2. The ONLY 8 Fonts UI Designers Need. Forget The Rest.
(Mizko)
3. Adaptive font size in iOS
(sk Coders)
4. Flutter - Set Font Size According To User Device Settings
(Flutter Mentor)
5. Introduction to Material 3 (Color Theming, Typography, Shapes)
(Philipp Lackner)
6. REACT NATIVE responsive screen and text [UI] #2 | Tutorial
(Mufungo Geeks)
Top Articles
Latest Posts
Article information

Author: Errol Quitzon

Last Updated: 01/10/2023

Views: 5631

Rating: 4.9 / 5 (59 voted)

Reviews: 90% of readers found this page helpful

Author information

Name: Errol Quitzon

Birthday: 1993-04-02

Address: 70604 Haley Lane, Port Weldonside, TN 99233-0942

Phone: +9665282866296

Job: Product Retail Agent

Hobby: Computer programming, Horseback riding, Hooping, Dance, Ice skating, Backpacking, Rafting

Introduction: My name is Errol Quitzon, I am a fair, cute, fancy, clean, attractive, sparkling, kind person who loves writing and wants to share my knowledge and understanding with you.