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
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
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.

@JoshTumath JoshTumath Jun 9, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I think this needs stronger wording so that authors know 'you must only use this if you have tested your website with scaled text'.
The author will then be able to use ''rem'' and ''em'' throughout the page to honor the user's font preferences.

Note:

@JoshTumath JoshTumath Jun 9, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Bikeshed has put this paragraph in a separate note box, but this seems like a continuation of the previous one. Do they need to be in the same note box?
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

@JoshTumath JoshTumath Jun 9, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Might be better to say, "Assuming a page hasn't altered the :root font size with an absolute length unit like px"
<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.

@JoshTumath JoshTumath Jun 9, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I think this intro needs more context. How about this:

If an element such as a heading already has large text, it is likely already large enough for a user who needs a high text scale to read. If the large text scales at the same rate as the body text, it could become too large to comfortably fit in the user's viewport.

Therefore, authors should consider using a dampening factor to reduce the rate that large text scales.
<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));

@progers progers Jun 6, 2026

Copy link
Copy Markdown
Contributor

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

@davidsgrogan davidsgrogan Jun 8, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Yeah, that seems good, as long as @fantasai thinks it's appropriate level of detail for the spec. (We could put it in MDN or some other article/documentation.)

Also, note that you can see this PR at https://davidsgrogan.github.io/css-fonts-5/Overview.html#scale-keyword

@fantasai fantasai Jun 24, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

It's appropriate for a spec.

@fantasai fantasai Jun 24, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Our specs really should have more illustrations and examples of good practices, not less. :)

@JoshTumath JoshTumath Jun 9, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Might be good to use parentheses around the division so that people don't get confused by BIDMAS/PEMDAS. (Because I did. 😅 I was wondering for ages why it's not just 1 / env(preferred-text-scale).)

Suggested change
--dampen-factor: calc(0.5 + 0.5 / env(preferred-text-scale));
--dampen-factor: calc(0.5 + (0.5 / env(preferred-text-scale)));
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