kf-g-css-tak-font-size-text-zoom

CSS Text Enlargement and Relative Unit Rules

This skill,font-size を rem should it be made px , and to align the criteria for that decision. The main focus is withstanding Chrome's text enlargement feature and making only values that truly depend on font size into relative units. For breakpoints and viewport-based responsive decisions, prioritize ../kf-g-css-tak-responsive-rules/SKILL.md , and this skill deals only with text and text-dependent dimensions.

When to use this skill

font-size を rem と px when deciding which of these to specify with
When deciding whether to support Chrome's text enlargement feature and how far to verify it
When deciding whether to make padding gap inline-size block-size and similar follow along during text enlargement
rem bulk conversion,:root の font-size hack,62.5% when reviewing operations
em ch when separating places where px should be used from places that should simply remain as
When checking whether AI-generated CSS contains implementations that say "just use remfor everything"

Decide first

Whether you can verify using Chrome's text enlargement feature up to "maximum" and secure the cost of fixing breakage.
Whether that value is truly one you want to change based on font size.
Whether what the user needs is text-only enlargement or zooming of the entire page.

Decision order

First, `px` Think based on

As a rule, think of size specifications without a basis as based on px .
Use relative values only when it is clear "what you want to base them on."
Do not use border-radius, or for arbitrary fixed sizes, out of habit alone. rem do not make it into.
In an organization that cannot maintain the text enlargement verification flow, or that is unfamiliar with CSS operations, do not force adoption of rem .

`rem` Conditions under which it is acceptable to use

If you want to support Chrome's text enlargement feature, it is acceptable to use font-size For rem .
However,font-size only rem is not the end of it. Margins and sizes that should increase along with text enlargement should also be made into relative values as needed.
rem , make it mandatory to actually verify by raising Chrome's text enlargement feature to "maximum."
Use rem only when you can take responsibility for a state in which text remains readable, is not clipped, and remains operable even when it increases.
:root の font-size to absolute values and using rem only in appearance.

`em` と `ch` Conditions under which to use

em for values you want based on the font size of that element itself.
For example, when the number of characters or the font size itself is the meaning, as in "spacing between paragraphs is 1 character" or "button padding is 1.5 characters," em is natural.
ch for widths you want based on numbers or a nearly monospaced character count.
For example, for a requirement like "the number list should reserve width for 3 digits," use ch .
If the relationship with font size is self-contained within the element, prioritize rem without making only em や ch for anything.

`px` Conditions for reselecting

You cannot allocate time or labor costs to "extreme" verification of text enlargement.
rem Even if layout breakage or reduced readability occurs because you chose
The value is not actually based on font size, and the only reason is simply that "relative values seem better."
The implementer or team cannot sort out the difference between text enlargement and zoom, and cannot judge the scope of applying relative units.

What to check with Chrome text enlargement

font-size In addition to
Fixed block-size, fixed inline-size、overflow: clip, and strong truncation are not causing text clipping.
Prioritize checking elements whose operability tends to decline as text volume increases, such as buttons, forms, chips, and navigation.
Check multiline wrapping, line wrapping, line spacing, and collisions with adjacent elements.
Assume that what users want is behavior close to the text enlargement button on government sites, not zooming the entire page.
Requests to enlarge the entire page are the responsibility of browser zoom, and you should not enlarge everything just to support text enlargement.

.anti-pattern {
  overflow: clip;
  block-size: 30px;
  font-size: calc(24 / 16 * 1rem);
}

If you convert to font-size only rem while leaving fixed heights and clipping as above, it becomes unreadable when text is enlarged.

Prohibited items

font-size only rem and leave all surrounding text-dependent dimensions as px .
Conversely, do not uniformly convert even values that have no reason to be based on font size to rem do not make it into.
:root の font-size and build a liquid layout by hacking
Do not bring breakpoint design into this skill for text enlargement. For choosing breakpoint units, refer to ../kf-g-css-tak-responsive-rules/SKILL.md .
With Sass etc., rem() Do not casually create a custom conversion function called rem() because it conflicts with the CSS standard

`rem` How to convert to

When converting px-derived values to rem , use calc() and preserve the origin of the value.
In workplaces where conversions are written many times, you may use a conversion helper that can be built with CSS standards alone.
Before moving conversion to a Sass function, check whether it can be completed within the scope of CSS standards.

@property --root-font-size {
  syntax: "<length>";
  inherits: false;
  initial-value: 16px;
}

:root {
  --to-rem: calc(tan(atan2(1px, var(--root-font-size))) * 1rem);
}

.heading {
  font-size: calc(24 * var(--to-rem));
}

This helper is for value conversion, not for fixing the actual :root の font-size .

Policy for output

First, rem px em ch .
rem , specify how far to verify Chrome text enlargement and which dimensions should follow.
px When choosing, briefly explain why the relative unit basis does not hold.
em ch When choosing, explain what it is based on in connection with the requirements.
If there are prohibited items in existing code, do not merely rewrite them; briefly explain what is dangerous about them as well.

Final check

If you support text enlargement, have you actually checked Chrome's text enlargement feature up to "maximum"?
Do the values using relative units have a text-size-based meaning?
font-size Have you checked not only that, but also whether text-dependent dimensions need to follow?
Do fixed heights or clipping break text readability?
Is it not a vague blanket rem conversion?
em ch Are you casually crushing local requirements that should use rem with
Are you confusing the responsibilities of text enlargement and page zoom?

References

TAK - Opinion on whether rem should be used for font-size