Skip to content

[css-fonts-5][editorial] Add more meta text scale examples #14019

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
davidsgrogan wants to merge 1 commit into
base: main
Choose a base branch
from
+53 −2
Open

[css-fonts-5][editorial] Add more meta text scale examples #14019

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 53 additions & 2 deletions css-fonts-5/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,10 +168,17 @@ Further, when the value of the [=text-scale=] content attribute is

Note:
Authors are expected to use
<code>&lt;meta name="text-scale" content="scale"&gt;</code> in stylesheets so that the ''font-size/medium'' font size will reflect a combination of the user's font preferences, whether those are specified at the OS level or the UA level. The author will then be able to use ''rem'' throughout the page to honor the user's font preferences.
<code>&lt;meta name="text-scale" content="scale"&gt;</code> in stylesheets so that the ''font-size/medium'' font size will reflect the user's font preferences, whether those are specified at the OS level or the UA level.
The author will then be able to use ''rem'' and ''em'' throughout the page to honor the user's font preferences.

Note:
This requires care to do correctly, given the very large font sizes some low-vision users need.
Consider the extreme case of an iPhone Mini set to iOS's largest font size of 53px.
Only ~12-15 characters fit on a line.


<div class="example" id="ex-scaled-page">
If authors don't alter the '':root'' font size, content sized with ''rem'' units will be relative to the preferred text scale
Assuming a page hasn't altered the '':root'' font size, content sized with ''rem'' units will be relative to the preferred text scale
<pre class="lang-html">
&lt;!DOCTYPE html>
&lt;html> &lt;!-- leave this element's font-size as the default -->
Expand All @@ -195,6 +202,50 @@ Authors are expected to use
</pre>
</div>

<div class="example" id="ex-non-linear">
Header text starts larger than body text, so pages should probably grow headers at a slower rate.
<pre class="lang-html">
&lt;meta name="text-scale" content="scale" />
&lt;style>
.h1 {
--dampen-factor: calc(0.5 + 0.5 / env(preferred-text-scale));
Copy link
Copy Markdown
Contributor

@progers progers Jun 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you think of adding a comment and a little content, then showing an example of the content at 1.x, 2x, and 3.5x? This will encourage others to test large scales.

<meta name="viewport" content="width=device-width">
<meta name="text-scale" content="scale">
<style>
h1 {
  /*
    Multiply the 2em baseline by a dampening factor (between 1.0 to 0.5) to
    ensure headers scale up, but without getting too large. Here are the
    resulting font sizes at various text scale factors:
            h1      body
      1x    32px    16px
      1.5x  40px    24px
      2x    48px    32px
      3x    64px    48px
      3.5x  72px    56px
  */
  --dampen-factor: calc(0.5 + 0.5 / env(preferred-text-scale));
  font-size: calc(2em * var(--dampen-factor));
}
</style>
<h1>Header</h1>
This is some body text. The header grows slower than the body text.
Image

font-size: calc(2rem * var(--dampen-factor));
/* Resulting font sizes at various text scale factors:
h1 body
1x 32px 16px
1.5x 40px 24px
2x 48px 32px
3x 64px 48px */
}
&lt;/style>
</pre>
</div>

<div class="example" id="ex-inverse">
An extreme version of the above, some text content that starts larger than body text can and should become smaller than body text as the user's font size increases.
In this floating button example, the button text is larger than the body text at 1x but gets smaller at ~2.5x font scale.
<pre class="lang-html">
&lt;meta name="text-scale" content="scale" />
&lt;style>
.floating-action-button {
position: fixed;
top: 30px;
right: 30px;
/* Grow slightly slower than h1 example: */
--dampen-factor: calc(0.4 + 0.6 / env(preferred-text-scale));
font-size: calc(1.5rem * var(--dampen-factor));
/* Resulting font sizes at various text scale factors:
button body
1x 24px 16px
1.5x 28.8px 24px
2x 33.6px 32px
3x 43.2px 48px &lt;-- inversion */
}
&lt;/style>
&lt;button class="floating-action-button">➕Add&lt;/button>
</pre>
</div>


<h2 id="basic-font-props">
Basic Font Properties</h2>
Expand Down
Loading