Text resize settings
How text resize settings work in the iOS & Android Bolt apps
Written by Holy Kosmos
Updated at March 24th, 2026
Table of Contents
The in-app text resize slider applies to content rendered in articles and timelines, but does not affect native UI elements, such as the audio player, tab bar, settings menu, and timeline picker.
Text size for these native elements is instead controlled by the device’s accessibility or system text size settings, where supported by the operating system.
Configuration options
The text resize slider is fully configurable and can be tailored to suit the needs of each app:
- You can define as many text size options as required.
- We recommend using regular intervals (for example
0.2or0.25) to provide a predictable and user-friendly progression between sizes. - Each option is configured as a multiplier of the default text size, e.g.:
-
0.8renders text at 80% of the default size. -
1.5renders text at 150% (50% larger than default). -
2.0renders text at 200% (double the default size).
-
- These multipliers are applied consistently across supported content types.
- By default, Pugpig Bolt apps are configured with the following values:
0.5,1.0,1.5, and2.0.
Design considerations
While the slider supports a wide range of values, very small or very large multipliers can negatively impact layout, readability, and overall design integrity. We recommend choosing a sensible minimum and maximum range that balances accessibility with a consistent, high-quality reading experience for all users.
Carefully selecting both the range and step intervals will help ensure the best experience across different devices and content types.
How it works behind the scenes
Our timeline cards and articles use the CSS unit ‘rem’ for our font sizing (16px = 1rem). This is to allow for our text resize feature to scale the text proportionally when the user adjusts their default font size via the app slider setting.
We inject the % font-size intervals onto the HTML node, it's this value that helps scale the text accordingly.
For example, by default the app will inject font-size: 100% in CSS onto <html> . If the body copy of an article is set to 1rem, then this will display at the equivalent of 16px. Now if the user in the app wants to double the size of the text, they'll use the text resize slider in settings, and the body copy of an article will become the equivalent of 32px.
Considerations for webviews/ direct timelines / external pages
If you’re using external pages within a Pugpig app, you may notice inconsistencies in font sizing between the external site and the app itself. To avoid this, it’s important to set the base font size to 16px (1rem), ensuring text scales consistently across both environments. The percentage applied to the <html> element controls font sizing for both external and Pugpig pages, so it must remain consistent otherwise, text may appear larger or smaller depending on the screen.
For example,
html {
font-size: 100%;
}
.pp-headline {
font-size: 1.25rem; // equivalent of 20px
line-height: 1.75rem; // equivalent of 28px
}