To: Heading_
Smallsite Design logo (SD) 390x390px

Smallsite Design

Technology

The Android oversized text solution

!

Over the years, browsers on Android have rendered text larger than on other platforms. Some newer CSS appears to solve that along with better relative sizing of different fonts.

Having a major platform render text about 8% larger than anywhere else makes it difficult to have precise layouts. Trying to check which platform and browser to generate different CSS is not a long-term solution. The shape of font characters can be different across platforms making precision difficult even if the fonts could be sized, so there will always be a need to allow some slack. Fluid design methods preclude being too exact anyway. Another issue is that different fonts may be rendered in different sizes between platforms and browsers.

There is a CSS property font-size-adjust that seems to be the panacea to these problems. While having been in Firefox since 2008, most other browsers only implemented it in 2023 or later, with Samsung's browser getting in in April 2025. For a given font scaling, whether absolute (rem) or relative (%), it instructs the browser to make the lowercase letters have similar sizes across fonts, making having to do kludges on a per browser and font basis. It works very well, but there are still some minor anomalies.

Because it does not work on older browser versions, care still needs to be taken to allow text lines in banners to have 5-10% space at each end, which makes the banner also look less crowded. Fortunately, the attribute also seems to have solved the 8% Android oversize issue so that page layouts will look similar across platforms, again only for recent browsers.

The attribute is added to the CSS for the body tag as:
@supports(font-size-adjust:.5){body{font-size-adjust:.5}}

All other elements inherit the attribute. The value specified seems to be useful enough for fluid design pages, and that is what Smallsite Design uses. It could be tweaked by font and platform, but that means possible changes required in future to keep up with browser versions. The @supports function is so that if a browser does not support the attribute, it will be ignored, rather than generating warnings in the browser developer tools.

LinksLatest articles&Subsite links

Powered by   Smallsite Design  ©Smallsite™  Privacy   Manage\