When a learner can reproduce a familiar example but a small variation causes confusion, the problem is usually an incomplete model rather than a lack of effort. The fastest useful response is to expose the hidden state and test one boundary at a time.
CSS font-size-adjust preserves the apparent size of text when font fallback changes the selected font. It adjusts the used font size so a chosen metric—such as x-height, cap height or character width—matches a target proportion, while leaving the computed font-size unchanged. Mastery means distinguishing the element property from the @font-face size-adjust descriptor, understanding numeric and from-font values, choosing the right metric for the script and design, predicting effects on ex and ch but not em or numeric line-height, and testing fallback, loading, multilingual text and accessibility instead of treating one ratio as a universal typography fix. This guide begins with that mechanism, then develops it through worked traces, deliberate mistakes, explained practice and transfer decisions.
The aim is independent reasoning. A learner should be able to predict behaviour, locate the earliest wrong assumption, use a safe diagnostic procedure and defend a design choice in a new project.
Punggol families can use the guide in short sessions around homework, CCAs and rest. The activities are proposed learning exercises, not claims about a physical branch, timetable, class size, fee, school relationship or guaranteed result.
Use disposable data and repositories, preserve backups, and check version-sensitive details against the official source. Current documentation settles a technical contract; observation and explanation turn that contract into usable knowledge.
Find your next learning step
Choose the route that matches the present difficulty. Use the complete index for a systematic course.
Build the model
Chapters 1-4 . Begin here, then continue after the learner can predict, verify and explain.
Use the core tools
Chapters 5-8 . Begin here, then continue after the learner can predict, verify and explain.
Handle boundaries
Chapters 9-12 . Begin here, then continue after the learner can predict, verify and explain.
Debug and verify
Chapters 13-16 . Begin here, then continue after the learner can predict, verify and explain.
Transfer with judgment
Chapters 17-20 . Begin here, then continue after the learner can predict, verify and explain.
Open the full chapter index . Jump to capstone practice . Use the How Studying Works hub . Read the official documentation
Complete chapter index
Chapters 1-4 . Build the model
Chapters 5-8 . Use the core tools
Chapters 9-12 . Handle boundaries
Chapters 13-16 . Debug and verify
Fonts set to the same font-size can have different lowercase height, cap height and character widths, so fallback text can look smaller or larger even when computed size is unchanged. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is assuming a shared 16px value guarantees equal perceived size and readability. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Render the same representative string in each candidate font and compare the relevant metric rather than only the em box.
For the Apparent size differs at one CSS font size chapter on CSS font-size-adjust, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on assuming a shared 16px value guarantees equal perceived size and readability. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.sample{font-size:16px;font-family:Preferred,Fallback,sans-serif}Explained result. Every run has a 16px computed font size, yet glyph design can produce visibly different text proportions. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: homework article. Predict the rule using body text whose preferred web font may arrive after the fallback. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Fonts set to the same font-size can have different lowercase height, cap height and character widths, so fallback text can look smaller or larger even when computed size is unchanged.” Apply this procedure: Render the same representative string in each candidate font and compare the relevant metric rather than only the em box. The expected mechanism is: Every run has a 16px computed font size, yet glyph design can produce visibly different text proportions. For the homework article, add one near-miss that exposes assuming a shared 16px value guarantees equal perceived size and readability. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: reading tracker. Contrast the rule using small metadata that must remain legible across devices. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Fonts set to the same font-size can have different lowercase height, cap height and character widths, so fallback text can look smaller or larger even when computed size is unchanged.” Apply this procedure: Render the same representative string in each candidate font and compare the relevant metric rather than only the em box. The expected mechanism is: Every run has a 16px computed font size, yet glyph design can produce visibly different text proportions. For the reading tracker, add one near-miss that exposes assuming a shared 16px value guarantees equal perceived size and readability. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: science display. Stress-test the rule using numbers, units and Latin text using different glyph runs. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Fonts set to the same font-size can have different lowercase height, cap height and character widths, so fallback text can look smaller or larger even when computed size is unchanged.” Apply this procedure: Render the same representative string in each candidate font and compare the relevant metric rather than only the em box. The expected mechanism is: Every run has a 16px computed font size, yet glyph design can produce visibly different text proportions. For the science display, add one near-miss that exposes assuming a shared 16px value guarantees equal perceived size and readability. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: CCA website. Explain the rule using English and Chinese labels sharing one component. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Fonts set to the same font-size can have different lowercase height, cap height and character widths, so fallback text can look smaller or larger even when computed size is unchanged.” Apply this procedure: Render the same representative string in each candidate font and compare the relevant metric rather than only the em box. The expected mechanism is: Every run has a 16px computed font size, yet glyph design can produce visibly different text proportions. For the CCA website, add one near-miss that exposes assuming a shared 16px value guarantees equal perceived size and readability. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers assuming a shared 16px value guarantees equal perceived size and readability.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Render the same representative string in each candidate font and compare the relevant metric rather than only the em box.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS font-size-adjust syntax. For this chapter, useful prompts are: “What did you expect from Apparent size differs at one CSS font size?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing assuming a shared 16px value guarantees equal perceived size and readability be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny library catalogue with titles, call numbers and long multilingual author names. Include one ordinary case, one boundary and one deliberate failure caused by assuming a shared 16px value guarantees equal perceived size and readability. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: Fonts set to the same font-size can have different lowercase height, cap height and character widths, so fallback text can look smaller or larger even when computed size is unchanged. It shows a trace, not only a final value. The ordinary case should demonstrate “Every run has a 16px computed font size, yet glyph design can produce visibly different text proportions.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Render the same representative string in each candidate font and compare the relevant metric rather than only the em box. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Apparent size differs at one CSS font size, separate the documented CSS font-size-adjust mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
The property changes each used font size so the selected metric reaches the specified proportion of the computed font size. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is describing the property as a zoom that scales the entire element and its layout units. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Name the metric, target ratio and actual font metric, then trace the specification formula before observing layout.
For the font-size-adjust normalizes a chosen metric chapter on CSS font-size-adjust, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on describing the property as a zoom that scales the entire element and its layout units. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.article{font-size-adjust:ex-height 0.52}Explained result. For each selected font, the browser adjusts used glyph size until its x-height-to-font-size ratio matches 0.52. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: science display. Contrast the rule using numbers, units and Latin text using different glyph runs. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The property changes each used font size so the selected metric reaches the specified proportion of the computed font size.” Apply this procedure: Name the metric, target ratio and actual font metric, then trace the specification formula before observing layout. The expected mechanism is: For each selected font, the browser adjusts used glyph size until its x-height-to-font-size ratio matches 0.52. For the science display, add one near-miss that exposes describing the property as a zoom that scales the entire element and its layout units. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: CCA website. Stress-test the rule using English and Chinese labels sharing one component. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The property changes each used font size so the selected metric reaches the specified proportion of the computed font size.” Apply this procedure: Name the metric, target ratio and actual font metric, then trace the specification formula before observing layout. The expected mechanism is: For each selected font, the browser adjusts used glyph size until its x-height-to-font-size ratio matches 0.52. For the CCA website, add one near-miss that exposes describing the property as a zoom that scales the entire element and its layout units. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: family planner. Explain the rule using system-font fallbacks on different household devices. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The property changes each used font size so the selected metric reaches the specified proportion of the computed font size.” Apply this procedure: Name the metric, target ratio and actual font metric, then trace the specification formula before observing layout. The expected mechanism is: For each selected font, the browser adjusts used glyph size until its x-height-to-font-size ratio matches 0.52. For the family planner, add one near-miss that exposes describing the property as a zoom that scales the entire element and its layout units. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: library catalogue. Transfer the rule using titles, call numbers and long multilingual author names. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The property changes each used font size so the selected metric reaches the specified proportion of the computed font size.” Apply this procedure: Name the metric, target ratio and actual font metric, then trace the specification formula before observing layout. The expected mechanism is: For each selected font, the browser adjusts used glyph size until its x-height-to-font-size ratio matches 0.52. For the library catalogue, add one near-miss that exposes describing the property as a zoom that scales the entire element and its layout units. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers describing the property as a zoom that scales the entire element and its layout units.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Name the metric, target ratio and actual font metric, then trace the specification formula before observing layout.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS font-size-adjust syntax. For this chapter, useful prompts are: “What did you expect from font-size-adjust normalizes a chosen metric?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing describing the property as a zoom that scales the entire element and its layout units be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny test laboratory with first-choice, fallback, missing-metric, loading and line-height cases. Include one ordinary case, one boundary and one deliberate failure caused by describing the property as a zoom that scales the entire element and its layout units. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: The property changes each used font size so the selected metric reaches the specified proportion of the computed font size. It shows a trace, not only a final value. The ordinary case should demonstrate “For each selected font, the browser adjusts used glyph size until its x-height-to-font-size ratio matches 0.52.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Name the metric, target ratio and actual font metric, then trace the specification formula before observing layout. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For font-size-adjust normalizes a chosen metric, separate the documented CSS font-size-adjust mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
The initial value none applies no metric normalization beyond ordinary font selection and sizing. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is using none as if it resets font-family, font-size or @font-face descriptors. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Compare computed font family and size with the property toggled while keeping every other declaration fixed.
For the none disables special adjustment chapter on CSS font-size-adjust, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on using none as if it resets font-family, font-size or @font-face descriptors. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.control{font-size-adjust:none}Explained result. The element follows ordinary font sizing; its requested family and computed font-size remain governed by their own properties. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: family planner. Stress-test the rule using system-font fallbacks on different household devices. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The initial value none applies no metric normalization beyond ordinary font selection and sizing.” Apply this procedure: Compare computed font family and size with the property toggled while keeping every other declaration fixed. The expected mechanism is: The element follows ordinary font sizing; its requested family and computed font-size remain governed by their own properties. For the family planner, add one near-miss that exposes using none as if it resets font-family, font-size or @font-face descriptors. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: library catalogue. Explain the rule using titles, call numbers and long multilingual author names. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The initial value none applies no metric normalization beyond ordinary font selection and sizing.” Apply this procedure: Compare computed font family and size with the property toggled while keeping every other declaration fixed. The expected mechanism is: The element follows ordinary font sizing; its requested family and computed font-size remain governed by their own properties. For the library catalogue, add one near-miss that exposes using none as if it resets font-family, font-size or @font-face descriptors. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: test laboratory. Transfer the rule using first-choice, fallback, missing-metric, loading and line-height cases. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The initial value none applies no metric normalization beyond ordinary font selection and sizing.” Apply this procedure: Compare computed font family and size with the property toggled while keeping every other declaration fixed. The expected mechanism is: The element follows ordinary font sizing; its requested family and computed font-size remain governed by their own properties. For the test laboratory, add one near-miss that exposes using none as if it resets font-family, font-size or @font-face descriptors. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: design decision. Predict the rule using font-size-adjust compared with @font-face size-adjust, font-size and complete fallback selection. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The initial value none applies no metric normalization beyond ordinary font selection and sizing.” Apply this procedure: Compare computed font family and size with the property toggled while keeping every other declaration fixed. The expected mechanism is: The element follows ordinary font sizing; its requested family and computed font-size remain governed by their own properties. For the design decision, add one near-miss that exposes using none as if it resets font-family, font-size or @font-face descriptors. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers using none as if it resets font-family, font-size or @font-face descriptors.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Compare computed font family and size with the property toggled while keeping every other declaration fixed.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS font-size-adjust syntax. For this chapter, useful prompts are: “What did you expect from none disables special adjustment?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing using none as if it resets font-family, font-size or @font-face descriptors be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny design decision with font-size-adjust compared with @font-face size-adjust, font-size and complete fallback selection. Include one ordinary case, one boundary and one deliberate failure caused by using none as if it resets font-family, font-size or @font-face descriptors. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: The initial value none applies no metric normalization beyond ordinary font selection and sizing. It shows a trace, not only a final value. The ordinary case should demonstrate “The element follows ordinary font sizing; its requested family and computed font-size remain governed by their own properties.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Compare computed font family and size with the property toggled while keeping every other declaration fixed. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For none disables special adjustment, separate the documented CSS font-size-adjust mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
When a number or from-font appears without a metric keyword, ex-height is the metric used by the grammar. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is reading font-size-adjust:0.5 as a generic scale factor unrelated to font anatomy. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Rewrite the shorthand mentally as ex-height plus the value and compare with the explicit form.
For the The omitted metric defaults to ex-height chapter on CSS font-size-adjust, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on reading font-size-adjust:0.5 as a generic scale factor unrelated to font anatomy. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.a{font-size-adjust:.5}
.b{font-size-adjust:ex-height .5}Explained result. The two declarations express the same metric choice and ratio under the current grammar. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: test laboratory. Explain the rule using first-choice, fallback, missing-metric, loading and line-height cases. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “When a number or from-font appears without a metric keyword, ex-height is the metric used by the grammar.” Apply this procedure: Rewrite the shorthand mentally as ex-height plus the value and compare with the explicit form. The expected mechanism is: The two declarations express the same metric choice and ratio under the current grammar. For the test laboratory, add one near-miss that exposes reading font-size-adjust:0.5 as a generic scale factor unrelated to font anatomy. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: design decision. Transfer the rule using font-size-adjust compared with @font-face size-adjust, font-size and complete fallback selection. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “When a number or from-font appears without a metric keyword, ex-height is the metric used by the grammar.” Apply this procedure: Rewrite the shorthand mentally as ex-height plus the value and compare with the explicit form. The expected mechanism is: The two declarations express the same metric choice and ratio under the current grammar. For the design decision, add one near-miss that exposes reading font-size-adjust:0.5 as a generic scale factor unrelated to font anatomy. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: homework article. Predict the rule using body text whose preferred web font may arrive after the fallback. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “When a number or from-font appears without a metric keyword, ex-height is the metric used by the grammar.” Apply this procedure: Rewrite the shorthand mentally as ex-height plus the value and compare with the explicit form. The expected mechanism is: The two declarations express the same metric choice and ratio under the current grammar. For the homework article, add one near-miss that exposes reading font-size-adjust:0.5 as a generic scale factor unrelated to font anatomy. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: reading tracker. Contrast the rule using small metadata that must remain legible across devices. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “When a number or from-font appears without a metric keyword, ex-height is the metric used by the grammar.” Apply this procedure: Rewrite the shorthand mentally as ex-height plus the value and compare with the explicit form. The expected mechanism is: The two declarations express the same metric choice and ratio under the current grammar. For the reading tracker, add one near-miss that exposes reading font-size-adjust:0.5 as a generic scale factor unrelated to font anatomy. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers reading font-size-adjust:0.5 as a generic scale factor unrelated to font anatomy.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Rewrite the shorthand mentally as ex-height plus the value and compare with the explicit form.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS font-size-adjust syntax. For this chapter, useful prompts are: “What did you expect from The omitted metric defaults to ex-height?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing reading font-size-adjust:0.5 as a generic scale factor unrelated to font anatomy be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny homework article with body text whose preferred web font may arrive after the fallback. Include one ordinary case, one boundary and one deliberate failure caused by reading font-size-adjust:0.5 as a generic scale factor unrelated to font anatomy. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: When a number or from-font appears without a metric keyword, ex-height is the metric used by the grammar. It shows a trace, not only a final value. The ordinary case should demonstrate “The two declarations express the same metric choice and ratio under the current grammar.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Rewrite the shorthand mentally as ex-height plus the value and compare with the explicit form. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For The omitted metric defaults to ex-height, separate the documented CSS font-size-adjust mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
A non-negative number gives the chosen metric as a proportion of computed font-size; it is not a percentage or a direct pixel size. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is writing 52 for fifty-two percent or copying 0.52 without measuring the intended first font. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Measure or obtain the font metric, record its source and test the preferred face as the control.
For the A numeric value is a target proportion chapter on CSS font-size-adjust, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on writing 52 for fifty-two percent or copying 0.52 without measuring the intended first font. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.body{font-size-adjust:0.52}Explained result. The target x-height is 0.52 times computed font-size, and fallback used sizes are adjusted to meet that relation. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: homework article. Transfer the rule using body text whose preferred web font may arrive after the fallback. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A non-negative number gives the chosen metric as a proportion of computed font-size; it is not a percentage or a direct pixel size.” Apply this procedure: Measure or obtain the font metric, record its source and test the preferred face as the control. The expected mechanism is: The target x-height is 0.52 times computed font-size, and fallback used sizes are adjusted to meet that relation. For the homework article, add one near-miss that exposes writing 52 for fifty-two percent or copying 0.52 without measuring the intended first font. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: reading tracker. Predict the rule using small metadata that must remain legible across devices. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A non-negative number gives the chosen metric as a proportion of computed font-size; it is not a percentage or a direct pixel size.” Apply this procedure: Measure or obtain the font metric, record its source and test the preferred face as the control. The expected mechanism is: The target x-height is 0.52 times computed font-size, and fallback used sizes are adjusted to meet that relation. For the reading tracker, add one near-miss that exposes writing 52 for fifty-two percent or copying 0.52 without measuring the intended first font. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: science display. Contrast the rule using numbers, units and Latin text using different glyph runs. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A non-negative number gives the chosen metric as a proportion of computed font-size; it is not a percentage or a direct pixel size.” Apply this procedure: Measure or obtain the font metric, record its source and test the preferred face as the control. The expected mechanism is: The target x-height is 0.52 times computed font-size, and fallback used sizes are adjusted to meet that relation. For the science display, add one near-miss that exposes writing 52 for fifty-two percent or copying 0.52 without measuring the intended first font. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: CCA website. Stress-test the rule using English and Chinese labels sharing one component. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A non-negative number gives the chosen metric as a proportion of computed font-size; it is not a percentage or a direct pixel size.” Apply this procedure: Measure or obtain the font metric, record its source and test the preferred face as the control. The expected mechanism is: The target x-height is 0.52 times computed font-size, and fallback used sizes are adjusted to meet that relation. For the CCA website, add one near-miss that exposes writing 52 for fifty-two percent or copying 0.52 without measuring the intended first font. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers writing 52 for fifty-two percent or copying 0.52 without measuring the intended first font.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Measure or obtain the font metric, record its source and test the preferred face as the control.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS font-size-adjust syntax. For this chapter, useful prompts are: “What did you expect from A numeric value is a target proportion?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing writing 52 for fifty-two percent or copying 0.52 without measuring the intended first font be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny reading tracker with small metadata that must remain legible across devices. Include one ordinary case, one boundary and one deliberate failure caused by writing 52 for fifty-two percent or copying 0.52 without measuring the intended first font. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: A non-negative number gives the chosen metric as a proportion of computed font-size; it is not a percentage or a direct pixel size. It shows a trace, not only a final value. The ordinary case should demonstrate “The target x-height is 0.52 times computed font-size, and fallback used sizes are adjusted to meet that relation.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Measure or obtain the font metric, record its source and test the preferred face as the control. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For A numeric value is a target proportion, separate the documented CSS font-size-adjust mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
The used size u equals the target metric ratio m divided by the actual selected-font ratio m-prime, multiplied by computed size s. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is guessing that a low-x-height fallback must be made smaller. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Calculate one numeric example before rendering and check whether the direction of change matches observation.
For the The adjustment formula predicts used size chapter on CSS font-size-adjust, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on guessing that a low-x-height fallback must be made smaller. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
/* m=.52, m-prime=.40, s=16px
u=(.52/.40)*16px = 20.8px */Explained result. A fallback with the lower actual ratio needs a larger used size to reach the target x-height. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: science display. Predict the rule using numbers, units and Latin text using different glyph runs. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The used size u equals the target metric ratio m divided by the actual selected-font ratio m-prime, multiplied by computed size s.” Apply this procedure: Calculate one numeric example before rendering and check whether the direction of change matches observation. The expected mechanism is: A fallback with the lower actual ratio needs a larger used size to reach the target x-height. For the science display, add one near-miss that exposes guessing that a low-x-height fallback must be made smaller. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: CCA website. Contrast the rule using English and Chinese labels sharing one component. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The used size u equals the target metric ratio m divided by the actual selected-font ratio m-prime, multiplied by computed size s.” Apply this procedure: Calculate one numeric example before rendering and check whether the direction of change matches observation. The expected mechanism is: A fallback with the lower actual ratio needs a larger used size to reach the target x-height. For the CCA website, add one near-miss that exposes guessing that a low-x-height fallback must be made smaller. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: family planner. Stress-test the rule using system-font fallbacks on different household devices. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The used size u equals the target metric ratio m divided by the actual selected-font ratio m-prime, multiplied by computed size s.” Apply this procedure: Calculate one numeric example before rendering and check whether the direction of change matches observation. The expected mechanism is: A fallback with the lower actual ratio needs a larger used size to reach the target x-height. For the family planner, add one near-miss that exposes guessing that a low-x-height fallback must be made smaller. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: library catalogue. Explain the rule using titles, call numbers and long multilingual author names. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The used size u equals the target metric ratio m divided by the actual selected-font ratio m-prime, multiplied by computed size s.” Apply this procedure: Calculate one numeric example before rendering and check whether the direction of change matches observation. The expected mechanism is: A fallback with the lower actual ratio needs a larger used size to reach the target x-height. For the library catalogue, add one near-miss that exposes guessing that a low-x-height fallback must be made smaller. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers guessing that a low-x-height fallback must be made smaller.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Calculate one numeric example before rendering and check whether the direction of change matches observation.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS font-size-adjust syntax. For this chapter, useful prompts are: “What did you expect from The adjustment formula predicts used size?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing guessing that a low-x-height fallback must be made smaller be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny science display with numbers, units and Latin text using different glyph runs. Include one ordinary case, one boundary and one deliberate failure caused by guessing that a low-x-height fallback must be made smaller. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: The used size u equals the target metric ratio m divided by the actual selected-font ratio m-prime, multiplied by computed size s. It shows a trace, not only a final value. The ordinary case should demonstrate “A fallback with the lower actual ratio needs a larger used size to reach the target x-height.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Calculate one numeric example before rendering and check whether the direction of change matches observation. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For The adjustment formula predicts used size, separate the documented CSS font-size-adjust mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 7 OF 20 . Use the core tools
7. from-font derives the target from the first available font
from-font computes the target ratio from the selected metric of the first available font when that metric exists, otherwise it behaves like none. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is assuming it waits for a named first family even when that resource is unavailable. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Test with the preferred resource present, delayed and unavailable, and inspect which font is actually first available.
For the from-font derives the target from the first available font chapter on CSS font-size-adjust, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on assuming it waits for a named first family even when that resource is unavailable. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.body{font-family:Brand,system-ui,sans-serif;font-size-adjust:from-font}Explained result. The effective target follows the metric of the first available font rather than a hard-coded ratio supplied by the author. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: family planner. Contrast the rule using system-font fallbacks on different household devices. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “from-font computes the target ratio from the selected metric of the first available font when that metric exists, otherwise it behaves like none.” Apply this procedure: Test with the preferred resource present, delayed and unavailable, and inspect which font is actually first available. The expected mechanism is: The effective target follows the metric of the first available font rather than a hard-coded ratio supplied by the author. For the family planner, add one near-miss that exposes assuming it waits for a named first family even when that resource is unavailable. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: library catalogue. Stress-test the rule using titles, call numbers and long multilingual author names. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “from-font computes the target ratio from the selected metric of the first available font when that metric exists, otherwise it behaves like none.” Apply this procedure: Test with the preferred resource present, delayed and unavailable, and inspect which font is actually first available. The expected mechanism is: The effective target follows the metric of the first available font rather than a hard-coded ratio supplied by the author. For the library catalogue, add one near-miss that exposes assuming it waits for a named first family even when that resource is unavailable. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: test laboratory. Explain the rule using first-choice, fallback, missing-metric, loading and line-height cases. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “from-font computes the target ratio from the selected metric of the first available font when that metric exists, otherwise it behaves like none.” Apply this procedure: Test with the preferred resource present, delayed and unavailable, and inspect which font is actually first available. The expected mechanism is: The effective target follows the metric of the first available font rather than a hard-coded ratio supplied by the author. For the test laboratory, add one near-miss that exposes assuming it waits for a named first family even when that resource is unavailable. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: design decision. Transfer the rule using font-size-adjust compared with @font-face size-adjust, font-size and complete fallback selection. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “from-font computes the target ratio from the selected metric of the first available font when that metric exists, otherwise it behaves like none.” Apply this procedure: Test with the preferred resource present, delayed and unavailable, and inspect which font is actually first available. The expected mechanism is: The effective target follows the metric of the first available font rather than a hard-coded ratio supplied by the author. For the design decision, add one near-miss that exposes assuming it waits for a named first family even when that resource is unavailable. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers assuming it waits for a named first family even when that resource is unavailable.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Test with the preferred resource present, delayed and unavailable, and inspect which font is actually first available.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS font-size-adjust syntax. For this chapter, useful prompts are: “What did you expect from from-font derives the target from the first available font?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing assuming it waits for a named first family even when that resource is unavailable be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny CCA website with English and Chinese labels sharing one component. Include one ordinary case, one boundary and one deliberate failure caused by assuming it waits for a named first family even when that resource is unavailable. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: from-font computes the target ratio from the selected metric of the first available font when that metric exists, otherwise it behaves like none. It shows a trace, not only a final value. The ordinary case should demonstrate “The effective target follows the metric of the first available font rather than a hard-coded ratio supplied by the author.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Test with the preferred resource present, delayed and unavailable, and inspect which font is actually first available. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For from-font derives the target from the first available font, separate the documented CSS font-size-adjust mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
ex-height, cap-height, ch-width, ic-width and ic-height normalize different vertical or horizontal measurements, so the appropriate choice depends on script and content. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is using x-height for every language and every interface simply because it is the historical default. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Choose representative glyphs and decide whether lowercase height, capitals, zero width or CJK ideograph dimensions best predict the component problem.
For the Metric keywords serve different reading jobs chapter on CSS font-size-adjust, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on using x-height for every language and every interface simply because it is the historical default. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.codes{font-size-adjust:ch-width from-font}
.cjk{font-size-adjust:ic-height from-font}Explained result. Each rule names a metric aligned with the content being stabilized rather than pretending all writing systems share one useful measure. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: test laboratory. Stress-test the rule using first-choice, fallback, missing-metric, loading and line-height cases. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “ex-height, cap-height, ch-width, ic-width and ic-height normalize different vertical or horizontal measurements, so the appropriate choice depends on script and content.” Apply this procedure: Choose representative glyphs and decide whether lowercase height, capitals, zero width or CJK ideograph dimensions best predict the component problem. The expected mechanism is: Each rule names a metric aligned with the content being stabilized rather than pretending all writing systems share one useful measure. For the test laboratory, add one near-miss that exposes using x-height for every language and every interface simply because it is the historical default. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: design decision. Explain the rule using font-size-adjust compared with @font-face size-adjust, font-size and complete fallback selection. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “ex-height, cap-height, ch-width, ic-width and ic-height normalize different vertical or horizontal measurements, so the appropriate choice depends on script and content.” Apply this procedure: Choose representative glyphs and decide whether lowercase height, capitals, zero width or CJK ideograph dimensions best predict the component problem. The expected mechanism is: Each rule names a metric aligned with the content being stabilized rather than pretending all writing systems share one useful measure. For the design decision, add one near-miss that exposes using x-height for every language and every interface simply because it is the historical default. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: homework article. Transfer the rule using body text whose preferred web font may arrive after the fallback. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “ex-height, cap-height, ch-width, ic-width and ic-height normalize different vertical or horizontal measurements, so the appropriate choice depends on script and content.” Apply this procedure: Choose representative glyphs and decide whether lowercase height, capitals, zero width or CJK ideograph dimensions best predict the component problem. The expected mechanism is: Each rule names a metric aligned with the content being stabilized rather than pretending all writing systems share one useful measure. For the homework article, add one near-miss that exposes using x-height for every language and every interface simply because it is the historical default. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: reading tracker. Predict the rule using small metadata that must remain legible across devices. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “ex-height, cap-height, ch-width, ic-width and ic-height normalize different vertical or horizontal measurements, so the appropriate choice depends on script and content.” Apply this procedure: Choose representative glyphs and decide whether lowercase height, capitals, zero width or CJK ideograph dimensions best predict the component problem. The expected mechanism is: Each rule names a metric aligned with the content being stabilized rather than pretending all writing systems share one useful measure. For the reading tracker, add one near-miss that exposes using x-height for every language and every interface simply because it is the historical default. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers using x-height for every language and every interface simply because it is the historical default.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Choose representative glyphs and decide whether lowercase height, capitals, zero width or CJK ideograph dimensions best predict the component problem.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS font-size-adjust syntax. For this chapter, useful prompts are: “What did you expect from Metric keywords serve different reading jobs?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing using x-height for every language and every interface simply because it is the historical default be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny family planner with system-font fallbacks on different household devices. Include one ordinary case, one boundary and one deliberate failure caused by using x-height for every language and every interface simply because it is the historical default. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: ex-height, cap-height, ch-width, ic-width and ic-height normalize different vertical or horizontal measurements, so the appropriate choice depends on script and content. It shows a trace, not only a final value. The ordinary case should demonstrate “Each rule names a metric aligned with the content being stabilized rather than pretending all writing systems share one useful measure.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Choose representative glyphs and decide whether lowercase height, capitals, zero width or CJK ideograph dimensions best predict the component problem. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Metric keywords serve different reading jobs, separate the documented CSS font-size-adjust mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
The numeric domain begins at zero, so a negative target does not produce an inverted or smaller font; the declaration is invalid. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is using a negative number as a visual shrinking shortcut. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Check parsed and computed styles, then use font-size for intentional size changes.
For the Negative numbers are invalid chapter on CSS font-size-adjust, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on using a negative number as a visual shrinking shortcut. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.bad{font-size-adjust:-0.4}Explained result. The invalid declaration does not create a negative adjustment; normal cascade error handling determines the effective property value. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: homework article. Explain the rule using body text whose preferred web font may arrive after the fallback. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The numeric domain begins at zero, so a negative target does not produce an inverted or smaller font; the declaration is invalid.” Apply this procedure: Check parsed and computed styles, then use font-size for intentional size changes. The expected mechanism is: The invalid declaration does not create a negative adjustment; normal cascade error handling determines the effective property value. For the homework article, add one near-miss that exposes using a negative number as a visual shrinking shortcut. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: reading tracker. Transfer the rule using small metadata that must remain legible across devices. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The numeric domain begins at zero, so a negative target does not produce an inverted or smaller font; the declaration is invalid.” Apply this procedure: Check parsed and computed styles, then use font-size for intentional size changes. The expected mechanism is: The invalid declaration does not create a negative adjustment; normal cascade error handling determines the effective property value. For the reading tracker, add one near-miss that exposes using a negative number as a visual shrinking shortcut. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: science display. Predict the rule using numbers, units and Latin text using different glyph runs. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The numeric domain begins at zero, so a negative target does not produce an inverted or smaller font; the declaration is invalid.” Apply this procedure: Check parsed and computed styles, then use font-size for intentional size changes. The expected mechanism is: The invalid declaration does not create a negative adjustment; normal cascade error handling determines the effective property value. For the science display, add one near-miss that exposes using a negative number as a visual shrinking shortcut. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: CCA website. Contrast the rule using English and Chinese labels sharing one component. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The numeric domain begins at zero, so a negative target does not produce an inverted or smaller font; the declaration is invalid.” Apply this procedure: Check parsed and computed styles, then use font-size for intentional size changes. The expected mechanism is: The invalid declaration does not create a negative adjustment; normal cascade error handling determines the effective property value. For the CCA website, add one near-miss that exposes using a negative number as a visual shrinking shortcut. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers using a negative number as a visual shrinking shortcut.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Check parsed and computed styles, then use font-size for intentional size changes.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS font-size-adjust syntax. For this chapter, useful prompts are: “What did you expect from Negative numbers are invalid?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing using a negative number as a visual shrinking shortcut be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny library catalogue with titles, call numbers and long multilingual author names. Include one ordinary case, one boundary and one deliberate failure caused by using a negative number as a visual shrinking shortcut. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: The numeric domain begins at zero, so a negative target does not produce an inverted or smaller font; the declaration is invalid. It shows a trace, not only a final value. The ordinary case should demonstrate “The invalid declaration does not create a negative adjustment; normal cascade error handling determines the effective property value.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Check parsed and computed styles, then use font-size for intentional size changes. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Negative numbers are invalid, separate the documented CSS font-size-adjust mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
font-size-adjust applies to all elements and text and inherits, so a container policy flows into descendants unless the cascade changes it. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is debugging only a child selector while an ancestor supplies the effective ratio. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Walk the computed cascade from the text run to its ancestors and record the winning value.
For the The property is inherited chapter on CSS font-size-adjust, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on debugging only a child selector while an ancestor supplies the effective ratio. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.article{font-size-adjust:from-font}
.diagram{font-size-adjust:none}Explained result. Article descendants inherit the normalization, while the diagram subtree opts out through a more specific declaration. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: science display. Transfer the rule using numbers, units and Latin text using different glyph runs. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “font-size-adjust applies to all elements and text and inherits, so a container policy flows into descendants unless the cascade changes it.” Apply this procedure: Walk the computed cascade from the text run to its ancestors and record the winning value. The expected mechanism is: Article descendants inherit the normalization, while the diagram subtree opts out through a more specific declaration. For the science display, add one near-miss that exposes debugging only a child selector while an ancestor supplies the effective ratio. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: CCA website. Predict the rule using English and Chinese labels sharing one component. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “font-size-adjust applies to all elements and text and inherits, so a container policy flows into descendants unless the cascade changes it.” Apply this procedure: Walk the computed cascade from the text run to its ancestors and record the winning value. The expected mechanism is: Article descendants inherit the normalization, while the diagram subtree opts out through a more specific declaration. For the CCA website, add one near-miss that exposes debugging only a child selector while an ancestor supplies the effective ratio. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: family planner. Contrast the rule using system-font fallbacks on different household devices. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “font-size-adjust applies to all elements and text and inherits, so a container policy flows into descendants unless the cascade changes it.” Apply this procedure: Walk the computed cascade from the text run to its ancestors and record the winning value. The expected mechanism is: Article descendants inherit the normalization, while the diagram subtree opts out through a more specific declaration. For the family planner, add one near-miss that exposes debugging only a child selector while an ancestor supplies the effective ratio. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: library catalogue. Stress-test the rule using titles, call numbers and long multilingual author names. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “font-size-adjust applies to all elements and text and inherits, so a container policy flows into descendants unless the cascade changes it.” Apply this procedure: Walk the computed cascade from the text run to its ancestors and record the winning value. The expected mechanism is: Article descendants inherit the normalization, while the diagram subtree opts out through a more specific declaration. For the library catalogue, add one near-miss that exposes debugging only a child selector while an ancestor supplies the effective ratio. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers debugging only a child selector while an ancestor supplies the effective ratio.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Walk the computed cascade from the text run to its ancestors and record the winning value.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS font-size-adjust syntax. For this chapter, useful prompts are: “What did you expect from The property is inherited?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing debugging only a child selector while an ancestor supplies the effective ratio be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny test laboratory with first-choice, fallback, missing-metric, loading and line-height cases. Include one ordinary case, one boundary and one deliberate failure caused by debugging only a child selector while an ancestor supplies the effective ratio. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: font-size-adjust applies to all elements and text and inherits, so a container policy flows into descendants unless the cascade changes it. It shows a trace, not only a final value. The ordinary case should demonstrate “Article descendants inherit the normalization, while the diagram subtree opts out through a more specific declaration.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Walk the computed cascade from the text run to its ancestors and record the winning value. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For The property is inherited, separate the documented CSS font-size-adjust mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
The adjustment affects the used size of selected fonts but does not change the computed value of font-size. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is reading getComputedStyle font-size and concluding no visual adjustment occurred. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Compare computed font-size with measured glyph or inline-box geometry and selected-font evidence.
For the Computed font-size remains unchanged chapter on CSS font-size-adjust, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on reading getComputedStyle font-size and concluding no visual adjustment occurred. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
const cs=getComputedStyle(node);
console.log(cs.fontSize,cs.fontSizeAdjust)Explained result. The computed size can remain 16px while the used glyph size changes to satisfy the chosen metric. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: family planner. Predict the rule using system-font fallbacks on different household devices. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The adjustment affects the used size of selected fonts but does not change the computed value of font-size.” Apply this procedure: Compare computed font-size with measured glyph or inline-box geometry and selected-font evidence. The expected mechanism is: The computed size can remain 16px while the used glyph size changes to satisfy the chosen metric. For the family planner, add one near-miss that exposes reading getComputedStyle font-size and concluding no visual adjustment occurred. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: library catalogue. Contrast the rule using titles, call numbers and long multilingual author names. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The adjustment affects the used size of selected fonts but does not change the computed value of font-size.” Apply this procedure: Compare computed font-size with measured glyph or inline-box geometry and selected-font evidence. The expected mechanism is: The computed size can remain 16px while the used glyph size changes to satisfy the chosen metric. For the library catalogue, add one near-miss that exposes reading getComputedStyle font-size and concluding no visual adjustment occurred. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: test laboratory. Stress-test the rule using first-choice, fallback, missing-metric, loading and line-height cases. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The adjustment affects the used size of selected fonts but does not change the computed value of font-size.” Apply this procedure: Compare computed font-size with measured glyph or inline-box geometry and selected-font evidence. The expected mechanism is: The computed size can remain 16px while the used glyph size changes to satisfy the chosen metric. For the test laboratory, add one near-miss that exposes reading getComputedStyle font-size and concluding no visual adjustment occurred. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: design decision. Explain the rule using font-size-adjust compared with @font-face size-adjust, font-size and complete fallback selection. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The adjustment affects the used size of selected fonts but does not change the computed value of font-size.” Apply this procedure: Compare computed font-size with measured glyph or inline-box geometry and selected-font evidence. The expected mechanism is: The computed size can remain 16px while the used glyph size changes to satisfy the chosen metric. For the design decision, add one near-miss that exposes reading getComputedStyle font-size and concluding no visual adjustment occurred. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers reading getComputedStyle font-size and concluding no visual adjustment occurred.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Compare computed font-size with measured glyph or inline-box geometry and selected-font evidence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS font-size-adjust syntax. For this chapter, useful prompts are: “What did you expect from Computed font-size remains unchanged?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing reading getComputedStyle font-size and concluding no visual adjustment occurred be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny design decision with font-size-adjust compared with @font-face size-adjust, font-size and complete fallback selection. Include one ordinary case, one boundary and one deliberate failure caused by reading getComputedStyle font-size and concluding no visual adjustment occurred. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: The adjustment affects the used size of selected fonts but does not change the computed value of font-size. It shows a trace, not only a final value. The ordinary case should demonstrate “The computed size can remain 16px while the used glyph size changes to satisfy the chosen metric.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Compare computed font-size with measured glyph or inline-box geometry and selected-font evidence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Computed font-size remains unchanged, separate the documented CSS font-size-adjust mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
Because computed font-size is unchanged, em-based lengths remain tied to it, while font-metric-relative units such as ex and ch can reflect adjusted font metrics. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is predicting that every font-relative length scales with the adjusted glyph outline. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Measure boxes sized in em, ex and ch with adjustment on and off.
For the em stays stable while ex and ch can change chapter on CSS font-size-adjust, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on predicting that every font-relative length scales with the adjusted glyph outline. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.probe{width:10em}
.xprobe{width:10ex}
.cprobe{width:10ch}Explained result. The em probe follows computed font-size, while ex and ch are metric-sensitive and may reveal the adjusted font. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: test laboratory. Contrast the rule using first-choice, fallback, missing-metric, loading and line-height cases. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Because computed font-size is unchanged, em-based lengths remain tied to it, while font-metric-relative units such as ex and ch can reflect adjusted font metrics.” Apply this procedure: Measure boxes sized in em, ex and ch with adjustment on and off. The expected mechanism is: The em probe follows computed font-size, while ex and ch are metric-sensitive and may reveal the adjusted font. For the test laboratory, add one near-miss that exposes predicting that every font-relative length scales with the adjusted glyph outline. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: design decision. Stress-test the rule using font-size-adjust compared with @font-face size-adjust, font-size and complete fallback selection. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Because computed font-size is unchanged, em-based lengths remain tied to it, while font-metric-relative units such as ex and ch can reflect adjusted font metrics.” Apply this procedure: Measure boxes sized in em, ex and ch with adjustment on and off. The expected mechanism is: The em probe follows computed font-size, while ex and ch are metric-sensitive and may reveal the adjusted font. For the design decision, add one near-miss that exposes predicting that every font-relative length scales with the adjusted glyph outline. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: homework article. Explain the rule using body text whose preferred web font may arrive after the fallback. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Because computed font-size is unchanged, em-based lengths remain tied to it, while font-metric-relative units such as ex and ch can reflect adjusted font metrics.” Apply this procedure: Measure boxes sized in em, ex and ch with adjustment on and off. The expected mechanism is: The em probe follows computed font-size, while ex and ch are metric-sensitive and may reveal the adjusted font. For the homework article, add one near-miss that exposes predicting that every font-relative length scales with the adjusted glyph outline. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: reading tracker. Transfer the rule using small metadata that must remain legible across devices. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Because computed font-size is unchanged, em-based lengths remain tied to it, while font-metric-relative units such as ex and ch can reflect adjusted font metrics.” Apply this procedure: Measure boxes sized in em, ex and ch with adjustment on and off. The expected mechanism is: The em probe follows computed font-size, while ex and ch are metric-sensitive and may reveal the adjusted font. For the reading tracker, add one near-miss that exposes predicting that every font-relative length scales with the adjusted glyph outline. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers predicting that every font-relative length scales with the adjusted glyph outline.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Measure boxes sized in em, ex and ch with adjustment on and off.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS font-size-adjust syntax. For this chapter, useful prompts are: “What did you expect from em stays stable while ex and ch can change?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing predicting that every font-relative length scales with the adjusted glyph outline be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny homework article with body text whose preferred web font may arrive after the fallback. Include one ordinary case, one boundary and one deliberate failure caused by predicting that every font-relative length scales with the adjusted glyph outline. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: Because computed font-size is unchanged, em-based lengths remain tied to it, while font-metric-relative units such as ex and ch can reflect adjusted font metrics. It shows a trace, not only a final value. The ordinary case should demonstrate “The em probe follows computed font-size, while ex and ch are metric-sensitive and may reveal the adjusted font.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Measure boxes sized in em, ex and ch with adjustment on and off. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For em stays stable while ex and ch can change, separate the documented CSS font-size-adjust mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 13 OF 20 . Debug and verify
13. Numeric line-height is not increased by the adjustment
A unitless numeric line-height is based on computed font-size, so enlarging used glyphs can leave too little vertical room and create collisions. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is assuming the line box automatically expands by the same factor as fallback glyphs. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Test tall ascenders, descenders, diacritics and multiple lines at the worst predicted adjustment.
For the Numeric line-height is not increased by the adjustment chapter on CSS font-size-adjust, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on assuming the line box automatically expands by the same factor as fallback glyphs. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.tight{font-size-adjust:.58;line-height:1}Explained result. The adjusted glyphs can outgrow a tight line box; the fix is a deliberate line-height policy, not abandoning measurement. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: homework article. Stress-test the rule using body text whose preferred web font may arrive after the fallback. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A unitless numeric line-height is based on computed font-size, so enlarging used glyphs can leave too little vertical room and create collisions.” Apply this procedure: Test tall ascenders, descenders, diacritics and multiple lines at the worst predicted adjustment. The expected mechanism is: The adjusted glyphs can outgrow a tight line box; the fix is a deliberate line-height policy, not abandoning measurement. For the homework article, add one near-miss that exposes assuming the line box automatically expands by the same factor as fallback glyphs. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: reading tracker. Explain the rule using small metadata that must remain legible across devices. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A unitless numeric line-height is based on computed font-size, so enlarging used glyphs can leave too little vertical room and create collisions.” Apply this procedure: Test tall ascenders, descenders, diacritics and multiple lines at the worst predicted adjustment. The expected mechanism is: The adjusted glyphs can outgrow a tight line box; the fix is a deliberate line-height policy, not abandoning measurement. For the reading tracker, add one near-miss that exposes assuming the line box automatically expands by the same factor as fallback glyphs. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: science display. Transfer the rule using numbers, units and Latin text using different glyph runs. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A unitless numeric line-height is based on computed font-size, so enlarging used glyphs can leave too little vertical room and create collisions.” Apply this procedure: Test tall ascenders, descenders, diacritics and multiple lines at the worst predicted adjustment. The expected mechanism is: The adjusted glyphs can outgrow a tight line box; the fix is a deliberate line-height policy, not abandoning measurement. For the science display, add one near-miss that exposes assuming the line box automatically expands by the same factor as fallback glyphs. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: CCA website. Predict the rule using English and Chinese labels sharing one component. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A unitless numeric line-height is based on computed font-size, so enlarging used glyphs can leave too little vertical room and create collisions.” Apply this procedure: Test tall ascenders, descenders, diacritics and multiple lines at the worst predicted adjustment. The expected mechanism is: The adjusted glyphs can outgrow a tight line box; the fix is a deliberate line-height policy, not abandoning measurement. For the CCA website, add one near-miss that exposes assuming the line box automatically expands by the same factor as fallback glyphs. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers assuming the line box automatically expands by the same factor as fallback glyphs.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Test tall ascenders, descenders, diacritics and multiple lines at the worst predicted adjustment.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS font-size-adjust syntax. For this chapter, useful prompts are: “What did you expect from Numeric line-height is not increased by the adjustment?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing assuming the line box automatically expands by the same factor as fallback glyphs be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny reading tracker with small metadata that must remain legible across devices. Include one ordinary case, one boundary and one deliberate failure caused by assuming the line box automatically expands by the same factor as fallback glyphs. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: A unitless numeric line-height is based on computed font-size, so enlarging used glyphs can leave too little vertical room and create collisions. It shows a trace, not only a final value. The ordinary case should demonstrate “The adjusted glyphs can outgrow a tight line box; the fix is a deliberate line-height policy, not abandoning measurement.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Test tall ascenders, descenders, diacritics and multiple lines at the worst predicted adjustment. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Numeric line-height is not increased by the adjustment, separate the documented CSS font-size-adjust mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 14 OF 20 . Debug and verify
14. Fallback order still decides the selected font
font-size-adjust does not choose a font, add missing glyphs or replace a complete fallback stack; font matching and font-family order happen first. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is blaming metric adjustment when the wrong fallback family or unicode coverage is the real cause. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Inspect rendered fonts per glyph run, @font-face sources and family order before tuning a ratio.
For the Fallback order still decides the selected font chapter on CSS font-size-adjust, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on blaming metric adjustment when the wrong fallback family or unicode coverage is the real cause. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.text{font-family:Brand,'Noto Sans',system-ui,sans-serif;font-size-adjust:from-font}Explained result. The property adjusts whichever fonts matching selects; it does not promote Brand when the face is unavailable or lacks a glyph. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: science display. Explain the rule using numbers, units and Latin text using different glyph runs. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “font-size-adjust does not choose a font, add missing glyphs or replace a complete fallback stack; font matching and font-family order happen first.” Apply this procedure: Inspect rendered fonts per glyph run, @font-face sources and family order before tuning a ratio. The expected mechanism is: The property adjusts whichever fonts matching selects; it does not promote Brand when the face is unavailable or lacks a glyph. For the science display, add one near-miss that exposes blaming metric adjustment when the wrong fallback family or unicode coverage is the real cause. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: CCA website. Transfer the rule using English and Chinese labels sharing one component. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “font-size-adjust does not choose a font, add missing glyphs or replace a complete fallback stack; font matching and font-family order happen first.” Apply this procedure: Inspect rendered fonts per glyph run, @font-face sources and family order before tuning a ratio. The expected mechanism is: The property adjusts whichever fonts matching selects; it does not promote Brand when the face is unavailable or lacks a glyph. For the CCA website, add one near-miss that exposes blaming metric adjustment when the wrong fallback family or unicode coverage is the real cause. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: family planner. Predict the rule using system-font fallbacks on different household devices. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “font-size-adjust does not choose a font, add missing glyphs or replace a complete fallback stack; font matching and font-family order happen first.” Apply this procedure: Inspect rendered fonts per glyph run, @font-face sources and family order before tuning a ratio. The expected mechanism is: The property adjusts whichever fonts matching selects; it does not promote Brand when the face is unavailable or lacks a glyph. For the family planner, add one near-miss that exposes blaming metric adjustment when the wrong fallback family or unicode coverage is the real cause. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: library catalogue. Contrast the rule using titles, call numbers and long multilingual author names. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “font-size-adjust does not choose a font, add missing glyphs or replace a complete fallback stack; font matching and font-family order happen first.” Apply this procedure: Inspect rendered fonts per glyph run, @font-face sources and family order before tuning a ratio. The expected mechanism is: The property adjusts whichever fonts matching selects; it does not promote Brand when the face is unavailable or lacks a glyph. For the library catalogue, add one near-miss that exposes blaming metric adjustment when the wrong fallback family or unicode coverage is the real cause. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers blaming metric adjustment when the wrong fallback family or unicode coverage is the real cause.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Inspect rendered fonts per glyph run, @font-face sources and family order before tuning a ratio.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS font-size-adjust syntax. For this chapter, useful prompts are: “What did you expect from Fallback order still decides the selected font?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing blaming metric adjustment when the wrong fallback family or unicode coverage is the real cause be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny science display with numbers, units and Latin text using different glyph runs. Include one ordinary case, one boundary and one deliberate failure caused by blaming metric adjustment when the wrong fallback family or unicode coverage is the real cause. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: font-size-adjust does not choose a font, add missing glyphs or replace a complete fallback stack; font matching and font-family order happen first. It shows a trace, not only a final value. The ordinary case should demonstrate “The property adjusts whichever fonts matching selects; it does not promote Brand when the face is unavailable or lacks a glyph.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Inspect rendered fonts per glyph run, @font-face sources and family order before tuning a ratio. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Fallback order still decides the selected font, separate the documented CSS font-size-adjust mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 15 OF 20 . Debug and verify
15. Web-font loading changes availability over time
A downloadable preferred face may be unavailable during an early render and available later, changing both font selection and the target derived by from-font. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is taking one warm-cache screenshot and declaring fallback behaviour solved. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Test cold, delayed, failed and cached font loads, then record both early and settled states.
For the Web-font loading changes availability over time chapter on CSS font-size-adjust, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on taking one warm-cache screenshot and declaring fallback behaviour solved. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
await document.fonts.ready;Explained result. The promise helps inspect the settled font set, while a separate throttled test is still needed for the loading experience. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: family planner. Transfer the rule using system-font fallbacks on different household devices. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A downloadable preferred face may be unavailable during an early render and available later, changing both font selection and the target derived by from-font.” Apply this procedure: Test cold, delayed, failed and cached font loads, then record both early and settled states. The expected mechanism is: The promise helps inspect the settled font set, while a separate throttled test is still needed for the loading experience. For the family planner, add one near-miss that exposes taking one warm-cache screenshot and declaring fallback behaviour solved. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: library catalogue. Predict the rule using titles, call numbers and long multilingual author names. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A downloadable preferred face may be unavailable during an early render and available later, changing both font selection and the target derived by from-font.” Apply this procedure: Test cold, delayed, failed and cached font loads, then record both early and settled states. The expected mechanism is: The promise helps inspect the settled font set, while a separate throttled test is still needed for the loading experience. For the library catalogue, add one near-miss that exposes taking one warm-cache screenshot and declaring fallback behaviour solved. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: test laboratory. Contrast the rule using first-choice, fallback, missing-metric, loading and line-height cases. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A downloadable preferred face may be unavailable during an early render and available later, changing both font selection and the target derived by from-font.” Apply this procedure: Test cold, delayed, failed and cached font loads, then record both early and settled states. The expected mechanism is: The promise helps inspect the settled font set, while a separate throttled test is still needed for the loading experience. For the test laboratory, add one near-miss that exposes taking one warm-cache screenshot and declaring fallback behaviour solved. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: design decision. Stress-test the rule using font-size-adjust compared with @font-face size-adjust, font-size and complete fallback selection. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A downloadable preferred face may be unavailable during an early render and available later, changing both font selection and the target derived by from-font.” Apply this procedure: Test cold, delayed, failed and cached font loads, then record both early and settled states. The expected mechanism is: The promise helps inspect the settled font set, while a separate throttled test is still needed for the loading experience. For the design decision, add one near-miss that exposes taking one warm-cache screenshot and declaring fallback behaviour solved. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers taking one warm-cache screenshot and declaring fallback behaviour solved.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Test cold, delayed, failed and cached font loads, then record both early and settled states.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS font-size-adjust syntax. For this chapter, useful prompts are: “What did you expect from Web-font loading changes availability over time?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing taking one warm-cache screenshot and declaring fallback behaviour solved be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny CCA website with English and Chinese labels sharing one component. Include one ordinary case, one boundary and one deliberate failure caused by taking one warm-cache screenshot and declaring fallback behaviour solved. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: A downloadable preferred face may be unavailable during an early render and available later, changing both font selection and the target derived by from-font. It shows a trace, not only a final value. The ordinary case should demonstrate “The promise helps inspect the settled font set, while a separate throttled test is still needed for the loading experience.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Test cold, delayed, failed and cached font loads, then record both early and settled states. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Web-font loading changes availability over time, separate the documented CSS font-size-adjust mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 16 OF 20 . Debug and verify
16. Mixed scripts can use multiple fonts in one element
One line may select different fonts for Latin, Chinese, emoji or mathematical symbols, and the adjustment is applied to each selected font run. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is testing only an English pangram and generalising to the whole Punggol family interface. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Use actual multilingual labels and symbols, inspect each rendered font and check baseline, line height and clipping.
For the Mixed scripts can use multiple fonts in one element chapter on CSS font-size-adjust, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on testing only an English pangram and generalising to the whole Punggol family interface. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.multilingual{font-family:Brand,'Noto Sans CJK SC',sans-serif;font-size-adjust:from-font}Explained result. Different runs can receive different used sizes in pursuit of the shared target metric, so whole-line evidence matters. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: test laboratory. Predict the rule using first-choice, fallback, missing-metric, loading and line-height cases. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “One line may select different fonts for Latin, Chinese, emoji or mathematical symbols, and the adjustment is applied to each selected font run.” Apply this procedure: Use actual multilingual labels and symbols, inspect each rendered font and check baseline, line height and clipping. The expected mechanism is: Different runs can receive different used sizes in pursuit of the shared target metric, so whole-line evidence matters. For the test laboratory, add one near-miss that exposes testing only an English pangram and generalising to the whole Punggol family interface. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: design decision. Contrast the rule using font-size-adjust compared with @font-face size-adjust, font-size and complete fallback selection. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “One line may select different fonts for Latin, Chinese, emoji or mathematical symbols, and the adjustment is applied to each selected font run.” Apply this procedure: Use actual multilingual labels and symbols, inspect each rendered font and check baseline, line height and clipping. The expected mechanism is: Different runs can receive different used sizes in pursuit of the shared target metric, so whole-line evidence matters. For the design decision, add one near-miss that exposes testing only an English pangram and generalising to the whole Punggol family interface. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: homework article. Stress-test the rule using body text whose preferred web font may arrive after the fallback. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “One line may select different fonts for Latin, Chinese, emoji or mathematical symbols, and the adjustment is applied to each selected font run.” Apply this procedure: Use actual multilingual labels and symbols, inspect each rendered font and check baseline, line height and clipping. The expected mechanism is: Different runs can receive different used sizes in pursuit of the shared target metric, so whole-line evidence matters. For the homework article, add one near-miss that exposes testing only an English pangram and generalising to the whole Punggol family interface. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: reading tracker. Explain the rule using small metadata that must remain legible across devices. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “One line may select different fonts for Latin, Chinese, emoji or mathematical symbols, and the adjustment is applied to each selected font run.” Apply this procedure: Use actual multilingual labels and symbols, inspect each rendered font and check baseline, line height and clipping. The expected mechanism is: Different runs can receive different used sizes in pursuit of the shared target metric, so whole-line evidence matters. For the reading tracker, add one near-miss that exposes testing only an English pangram and generalising to the whole Punggol family interface. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers testing only an English pangram and generalising to the whole Punggol family interface.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Use actual multilingual labels and symbols, inspect each rendered font and check baseline, line height and clipping.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS font-size-adjust syntax. For this chapter, useful prompts are: “What did you expect from Mixed scripts can use multiple fonts in one element?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing testing only an English pangram and generalising to the whole Punggol family interface be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny family planner with system-font fallbacks on different household devices. Include one ordinary case, one boundary and one deliberate failure caused by testing only an English pangram and generalising to the whole Punggol family interface. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: One line may select different fonts for Latin, Chinese, emoji or mathematical symbols, and the adjustment is applied to each selected font run. It shows a trace, not only a final value. The ordinary case should demonstrate “Different runs can receive different used sizes in pursuit of the shared target metric, so whole-line evidence matters.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Use actual multilingual labels and symbols, inspect each rendered font and check baseline, line height and clipping. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Mixed scripts can use multiple fonts in one element, separate the documented CSS font-size-adjust mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 17 OF 20 . Transfer with judgment
17. The @font-face size-adjust descriptor is different
The size-adjust descriptor scales glyph outlines and metrics for one declared font face, while font-size-adjust is an inherited element property that normalizes selected fonts. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is putting size-adjust on an element or expecting font-size-adjust to rewrite one font resource globally. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Draw separate boxes for per-face resource normalization and per-element fallback normalization.
For the The @font-face size-adjust descriptor is different chapter on CSS font-size-adjust, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on putting size-adjust on an element or expecting font-size-adjust to rewrite one font resource globally. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
@font-face{
font-family:FallbackTuned;
src:local(Arial);
size-adjust:102%;
}
.text{font-size-adjust:from-font}Explained result. The descriptor tunes FallbackTuned itself; the property then applies its metric policy to text where it wins the cascade. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: homework article. Contrast the rule using body text whose preferred web font may arrive after the fallback. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The size-adjust descriptor scales glyph outlines and metrics for one declared font face, while font-size-adjust is an inherited element property that normalizes selected fonts.” Apply this procedure: Draw separate boxes for per-face resource normalization and per-element fallback normalization. The expected mechanism is: The descriptor tunes FallbackTuned itself; the property then applies its metric policy to text where it wins the cascade. For the homework article, add one near-miss that exposes putting size-adjust on an element or expecting font-size-adjust to rewrite one font resource globally. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: reading tracker. Stress-test the rule using small metadata that must remain legible across devices. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The size-adjust descriptor scales glyph outlines and metrics for one declared font face, while font-size-adjust is an inherited element property that normalizes selected fonts.” Apply this procedure: Draw separate boxes for per-face resource normalization and per-element fallback normalization. The expected mechanism is: The descriptor tunes FallbackTuned itself; the property then applies its metric policy to text where it wins the cascade. For the reading tracker, add one near-miss that exposes putting size-adjust on an element or expecting font-size-adjust to rewrite one font resource globally. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: science display. Explain the rule using numbers, units and Latin text using different glyph runs. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The size-adjust descriptor scales glyph outlines and metrics for one declared font face, while font-size-adjust is an inherited element property that normalizes selected fonts.” Apply this procedure: Draw separate boxes for per-face resource normalization and per-element fallback normalization. The expected mechanism is: The descriptor tunes FallbackTuned itself; the property then applies its metric policy to text where it wins the cascade. For the science display, add one near-miss that exposes putting size-adjust on an element or expecting font-size-adjust to rewrite one font resource globally. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: CCA website. Transfer the rule using English and Chinese labels sharing one component. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The size-adjust descriptor scales glyph outlines and metrics for one declared font face, while font-size-adjust is an inherited element property that normalizes selected fonts.” Apply this procedure: Draw separate boxes for per-face resource normalization and per-element fallback normalization. The expected mechanism is: The descriptor tunes FallbackTuned itself; the property then applies its metric policy to text where it wins the cascade. For the CCA website, add one near-miss that exposes putting size-adjust on an element or expecting font-size-adjust to rewrite one font resource globally. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers putting size-adjust on an element or expecting font-size-adjust to rewrite one font resource globally.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Draw separate boxes for per-face resource normalization and per-element fallback normalization.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS font-size-adjust syntax. For this chapter, useful prompts are: “What did you expect from The @font-face size-adjust descriptor is different?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing putting size-adjust on an element or expecting font-size-adjust to rewrite one font resource globally be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny library catalogue with titles, call numbers and long multilingual author names. Include one ordinary case, one boundary and one deliberate failure caused by putting size-adjust on an element or expecting font-size-adjust to rewrite one font resource globally. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: The size-adjust descriptor scales glyph outlines and metrics for one declared font face, while font-size-adjust is an inherited element property that normalizes selected fonts. It shows a trace, not only a final value. The ordinary case should demonstrate “The descriptor tunes FallbackTuned itself; the property then applies its metric policy to text where it wins the cascade.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Draw separate boxes for per-face resource normalization and per-element fallback normalization. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For The @font-face size-adjust descriptor is different, separate the documented CSS font-size-adjust mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
The specification applies font-size-adjust after a @font-face size-adjust override, so normalization can make the descriptor appear to have no visual effect. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is stacking both techniques and counting their intended percentages as independent multipliers. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Test each technique alone and together while inspecting the overridden metric and final glyph geometry.
For the Using both adjustments requires care chapter on CSS font-size-adjust, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on stacking both techniques and counting their intended percentages as independent multipliers. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.text{font-size-adjust:ex-height .52}Explained result. When the later property re-normalizes the same metric, it can cancel the visible size difference expected from the face descriptor. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: science display. Stress-test the rule using numbers, units and Latin text using different glyph runs. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The specification applies font-size-adjust after a @font-face size-adjust override, so normalization can make the descriptor appear to have no visual effect.” Apply this procedure: Test each technique alone and together while inspecting the overridden metric and final glyph geometry. The expected mechanism is: When the later property re-normalizes the same metric, it can cancel the visible size difference expected from the face descriptor. For the science display, add one near-miss that exposes stacking both techniques and counting their intended percentages as independent multipliers. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: CCA website. Explain the rule using English and Chinese labels sharing one component. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The specification applies font-size-adjust after a @font-face size-adjust override, so normalization can make the descriptor appear to have no visual effect.” Apply this procedure: Test each technique alone and together while inspecting the overridden metric and final glyph geometry. The expected mechanism is: When the later property re-normalizes the same metric, it can cancel the visible size difference expected from the face descriptor. For the CCA website, add one near-miss that exposes stacking both techniques and counting their intended percentages as independent multipliers. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: family planner. Transfer the rule using system-font fallbacks on different household devices. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The specification applies font-size-adjust after a @font-face size-adjust override, so normalization can make the descriptor appear to have no visual effect.” Apply this procedure: Test each technique alone and together while inspecting the overridden metric and final glyph geometry. The expected mechanism is: When the later property re-normalizes the same metric, it can cancel the visible size difference expected from the face descriptor. For the family planner, add one near-miss that exposes stacking both techniques and counting their intended percentages as independent multipliers. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: library catalogue. Predict the rule using titles, call numbers and long multilingual author names. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The specification applies font-size-adjust after a @font-face size-adjust override, so normalization can make the descriptor appear to have no visual effect.” Apply this procedure: Test each technique alone and together while inspecting the overridden metric and final glyph geometry. The expected mechanism is: When the later property re-normalizes the same metric, it can cancel the visible size difference expected from the face descriptor. For the library catalogue, add one near-miss that exposes stacking both techniques and counting their intended percentages as independent multipliers. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers stacking both techniques and counting their intended percentages as independent multipliers.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Test each technique alone and together while inspecting the overridden metric and final glyph geometry.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS font-size-adjust syntax. For this chapter, useful prompts are: “What did you expect from Using both adjustments requires care?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing stacking both techniques and counting their intended percentages as independent multipliers be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny test laboratory with first-choice, fallback, missing-metric, loading and line-height cases. Include one ordinary case, one boundary and one deliberate failure caused by stacking both techniques and counting their intended percentages as independent multipliers. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: The specification applies font-size-adjust after a @font-face size-adjust override, so normalization can make the descriptor appear to have no visual effect. It shows a trace, not only a final value. The ordinary case should demonstrate “When the later property re-normalizes the same metric, it can cancel the visible size difference expected from the face descriptor.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Test each technique alone and together while inspecting the overridden metric and final glyph geometry. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Using both adjustments requires care, separate the documented CSS font-size-adjust mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 19 OF 20 . Transfer with judgment
19. Legibility needs content and accessibility tests
Matching one font metric can improve fallback consistency but cannot guarantee comfortable reading, prevent cramped diacritics or solve every low-vision need. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is choosing the largest x-height ratio from a screenshot and calling it universally accessible. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Test real languages, zoom, reflow, line spacing, bold text and user font overrides with people and measurable criteria.
For the Legibility needs content and accessibility tests chapter on CSS font-size-adjust, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on choosing the largest x-height ratio from a screenshot and calling it universally accessible. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.reading{font-size-adjust:from-font;line-height:1.5}Explained result. Metric normalization supports a readable system only when spacing, contrast, responsive layout and user preferences also survive. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: family planner. Explain the rule using system-font fallbacks on different household devices. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Matching one font metric can improve fallback consistency but cannot guarantee comfortable reading, prevent cramped diacritics or solve every low-vision need.” Apply this procedure: Test real languages, zoom, reflow, line spacing, bold text and user font overrides with people and measurable criteria. The expected mechanism is: Metric normalization supports a readable system only when spacing, contrast, responsive layout and user preferences also survive. For the family planner, add one near-miss that exposes choosing the largest x-height ratio from a screenshot and calling it universally accessible. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: library catalogue. Transfer the rule using titles, call numbers and long multilingual author names. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Matching one font metric can improve fallback consistency but cannot guarantee comfortable reading, prevent cramped diacritics or solve every low-vision need.” Apply this procedure: Test real languages, zoom, reflow, line spacing, bold text and user font overrides with people and measurable criteria. The expected mechanism is: Metric normalization supports a readable system only when spacing, contrast, responsive layout and user preferences also survive. For the library catalogue, add one near-miss that exposes choosing the largest x-height ratio from a screenshot and calling it universally accessible. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: test laboratory. Predict the rule using first-choice, fallback, missing-metric, loading and line-height cases. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Matching one font metric can improve fallback consistency but cannot guarantee comfortable reading, prevent cramped diacritics or solve every low-vision need.” Apply this procedure: Test real languages, zoom, reflow, line spacing, bold text and user font overrides with people and measurable criteria. The expected mechanism is: Metric normalization supports a readable system only when spacing, contrast, responsive layout and user preferences also survive. For the test laboratory, add one near-miss that exposes choosing the largest x-height ratio from a screenshot and calling it universally accessible. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: design decision. Contrast the rule using font-size-adjust compared with @font-face size-adjust, font-size and complete fallback selection. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Matching one font metric can improve fallback consistency but cannot guarantee comfortable reading, prevent cramped diacritics or solve every low-vision need.” Apply this procedure: Test real languages, zoom, reflow, line spacing, bold text and user font overrides with people and measurable criteria. The expected mechanism is: Metric normalization supports a readable system only when spacing, contrast, responsive layout and user preferences also survive. For the design decision, add one near-miss that exposes choosing the largest x-height ratio from a screenshot and calling it universally accessible. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers choosing the largest x-height ratio from a screenshot and calling it universally accessible.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Test real languages, zoom, reflow, line spacing, bold text and user font overrides with people and measurable criteria.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS font-size-adjust syntax. For this chapter, useful prompts are: “What did you expect from Legibility needs content and accessibility tests?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing choosing the largest x-height ratio from a screenshot and calling it universally accessible be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny design decision with font-size-adjust compared with @font-face size-adjust, font-size and complete fallback selection. Include one ordinary case, one boundary and one deliberate failure caused by choosing the largest x-height ratio from a screenshot and calling it universally accessible. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: Matching one font metric can improve fallback consistency but cannot guarantee comfortable reading, prevent cramped diacritics or solve every low-vision need. It shows a trace, not only a final value. The ordinary case should demonstrate “Metric normalization supports a readable system only when spacing, contrast, responsive layout and user preferences also survive.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Test real languages, zoom, reflow, line spacing, bold text and user font overrides with people and measurable criteria. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Legibility needs content and accessibility tests, separate the documented CSS font-size-adjust mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 20 OF 20 . Transfer with judgment
20. Choose the smallest honest typography intervention
Use font-size-adjust for fallback apparent-size continuity, @font-face descriptors for known resource metric alignment, font-size for intentional text sizing and better fallbacks for missing coverage. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is copying one ratio across every component without identifying the actual failure. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the failing state, selected fonts, metric evidence and acceptance test before adding the declaration.
For the Choose the smallest honest typography intervention chapter on CSS font-size-adjust, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on copying one ratio across every component without identifying the actual failure. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
body{font-family:SourceSans,system-ui,sans-serif;font-size-adjust:from-font}Explained result. The policy is justified when it stabilizes real fallback text without clipping, misleading measurement or masking an incomplete font stack. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: test laboratory. Transfer the rule using first-choice, fallback, missing-metric, loading and line-height cases. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Use font-size-adjust for fallback apparent-size continuity, @font-face descriptors for known resource metric alignment, font-size for intentional text sizing and better fallbacks for missing coverage.” Apply this procedure: State the failing state, selected fonts, metric evidence and acceptance test before adding the declaration. The expected mechanism is: The policy is justified when it stabilizes real fallback text without clipping, misleading measurement or masking an incomplete font stack. For the test laboratory, add one near-miss that exposes copying one ratio across every component without identifying the actual failure. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: design decision. Predict the rule using font-size-adjust compared with @font-face size-adjust, font-size and complete fallback selection. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Use font-size-adjust for fallback apparent-size continuity, @font-face descriptors for known resource metric alignment, font-size for intentional text sizing and better fallbacks for missing coverage.” Apply this procedure: State the failing state, selected fonts, metric evidence and acceptance test before adding the declaration. The expected mechanism is: The policy is justified when it stabilizes real fallback text without clipping, misleading measurement or masking an incomplete font stack. For the design decision, add one near-miss that exposes copying one ratio across every component without identifying the actual failure. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: homework article. Contrast the rule using body text whose preferred web font may arrive after the fallback. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Use font-size-adjust for fallback apparent-size continuity, @font-face descriptors for known resource metric alignment, font-size for intentional text sizing and better fallbacks for missing coverage.” Apply this procedure: State the failing state, selected fonts, metric evidence and acceptance test before adding the declaration. The expected mechanism is: The policy is justified when it stabilizes real fallback text without clipping, misleading measurement or masking an incomplete font stack. For the homework article, add one near-miss that exposes copying one ratio across every component without identifying the actual failure. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: reading tracker. Stress-test the rule using small metadata that must remain legible across devices. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Use font-size-adjust for fallback apparent-size continuity, @font-face descriptors for known resource metric alignment, font-size for intentional text sizing and better fallbacks for missing coverage.” Apply this procedure: State the failing state, selected fonts, metric evidence and acceptance test before adding the declaration. The expected mechanism is: The policy is justified when it stabilizes real fallback text without clipping, misleading measurement or masking an incomplete font stack. For the reading tracker, add one near-miss that exposes copying one ratio across every component without identifying the actual failure. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers copying one ratio across every component without identifying the actual failure.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the failing state, selected fonts, metric evidence and acceptance test before adding the declaration.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS font-size-adjust syntax. For this chapter, useful prompts are: “What did you expect from Choose the smallest honest typography intervention?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing copying one ratio across every component without identifying the actual failure be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny homework article with body text whose preferred web font may arrive after the fallback. Include one ordinary case, one boundary and one deliberate failure caused by copying one ratio across every component without identifying the actual failure. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: Use font-size-adjust for fallback apparent-size continuity, @font-face descriptors for known resource metric alignment, font-size for intentional text sizing and better fallbacks for missing coverage. It shows a trace, not only a final value. The ordinary case should demonstrate “The policy is justified when it stabilizes real fallback text without clipping, misleading measurement or masking an incomplete font stack.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the failing state, selected fonts, metric evidence and acceptance test before adding the declaration. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Choose the smallest honest typography intervention, separate the documented CSS font-size-adjust mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
Parent guide: choose the next useful step
Start with evidence, not a label such as careless. Ask for one prediction and one trace. If the first transition is wrong, rebuild the model. If the model is sound but syntax fails, practise reference use. If routine cases are correct but boundaries fail, vary ties, defaults, unsupported inputs, ownership or missing paths. If explanations transfer, move to a small project.
Keep a weekly record with four lines: concept, prediction, observed difference and next test. Stop when fatigue replaces reasoning. A smaller case tomorrow is more useful than another hour of copying tonight.
Seek specialist help when cause and effect remain invisible after examples are reduced, when accessibility or data-loss implications are unclear, or when an important repository, database or application state may be at risk. Good support should make the learner’s reasoning more independent.
Capstone practice with explained routes
1. homework article: model, boundary and recovery
Create a small homework article using body text whose preferred web font may arrive after the fallback. Combine “Apparent size differs at one CSS font size” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: Fonts set to the same font-size can have different lowercase height, cap height and character widths, so fallback text can look smaller or larger even when computed size is unchanged. Apply: Render the same representative string in each candidate font and compare the relevant metric rather than only the em box. Verify: Every run has a 16px computed font size, yet glyph design can produce visibly different text proportions. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
2. reading tracker: model, boundary and recovery
Create a small reading tracker using small metadata that must remain legible across devices. Combine “The omitted metric defaults to ex-height” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: When a number or from-font appears without a metric keyword, ex-height is the metric used by the grammar. Apply: Rewrite the shorthand mentally as ex-height plus the value and compare with the explicit form. Verify: The two declarations express the same metric choice and ratio under the current grammar. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
3. science display: model, boundary and recovery
Create a small science display using numbers, units and Latin text using different glyph runs. Combine “from-font derives the target from the first available font” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: from-font computes the target ratio from the selected metric of the first available font when that metric exists, otherwise it behaves like none. Apply: Test with the preferred resource present, delayed and unavailable, and inspect which font is actually first available. Verify: The effective target follows the metric of the first available font rather than a hard-coded ratio supplied by the author. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
4. CCA website: model, boundary and recovery
Create a small CCA website using English and Chinese labels sharing one component. Combine “The property is inherited” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: font-size-adjust applies to all elements and text and inherits, so a container policy flows into descendants unless the cascade changes it. Apply: Walk the computed cascade from the text run to its ancestors and record the winning value. Verify: Article descendants inherit the normalization, while the diagram subtree opts out through a more specific declaration. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
5. family planner: model, boundary and recovery
Create a small family planner using system-font fallbacks on different household devices. Combine “Numeric line-height is not increased by the adjustment” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: A unitless numeric line-height is based on computed font-size, so enlarging used glyphs can leave too little vertical room and create collisions. Apply: Test tall ascenders, descenders, diacritics and multiple lines at the worst predicted adjustment. Verify: The adjusted glyphs can outgrow a tight line box; the fix is a deliberate line-height policy, not abandoning measurement. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
6. library catalogue: model, boundary and recovery
Create a small library catalogue using titles, call numbers and long multilingual author names. Combine “Mixed scripts can use multiple fonts in one element” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: One line may select different fonts for Latin, Chinese, emoji or mathematical symbols, and the adjustment is applied to each selected font run. Apply: Use actual multilingual labels and symbols, inspect each rendered font and check baseline, line height and clipping. Verify: Different runs can receive different used sizes in pursuit of the shared target metric, so whole-line evidence matters. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
7. test laboratory: model, boundary and recovery
Create a small test laboratory using first-choice, fallback, missing-metric, loading and line-height cases. Combine “Legibility needs content and accessibility tests” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: Matching one font metric can improve fallback consistency but cannot guarantee comfortable reading, prevent cramped diacritics or solve every low-vision need. Apply: Test real languages, zoom, reflow, line spacing, bold text and user font overrides with people and measurable criteria. Verify: Metric normalization supports a readable system only when spacing, contrast, responsive layout and user preferences also survive. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
8. design decision: model, boundary and recovery
Create a small design decision using font-size-adjust compared with @font-face size-adjust, font-size and complete fallback selection. Combine “font-size-adjust normalizes a chosen metric” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: The property changes each used font size so the selected metric reaches the specified proportion of the computed font size. Apply: Name the metric, target ratio and actual font metric, then trace the specification formula before observing layout. Verify: For each selected font, the browser adjusts used glyph size until its x-height-to-font-size ratio matches 0.52. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
Frequently asked questions
How long should a practice session be?
Use one complete prediction–observation–explanation cycle while attention remains good. Ten to twenty focused minutes can be enough.
Should every option or function be memorised?
No. Memorise the governing distinctions and practise retrieving the official reference. Understanding means predicting and explaining, not reciting a parameter list.
What if the result is correct but the explanation is weak?
Treat it as partial success. Ask for a trace and change one boundary. A reliable model survives controlled variation.
Is the shortest solution the best?
Not automatically. Prefer the solution whose semantics, failure modes and maintenance cost are easiest to justify for the actual project.
When should official documentation be used?
Use it whenever syntax, supported types, SQL dialect behaviour or Git version details matter. Primary documentation settles the current contract.
How can a parent help without technical expertise?
Ask what was predicted, where the first difference appeared, what evidence matters and which smaller example could isolate it.
How do we test transfer?
Change the context, vocabulary and one boundary. Require the learner to identify the invariant before using a tool.
What should be saved after practice?
Keep the corrected rule, one trace, one boundary case and the next question. Avoid storing pages of unexplained output.
Can these exercises replace backups?
No. Use disposable examples and proper backups. Learning should not endanger schoolwork, repositories or personal data.
What counts as mastery?
The learner can predict, verify, diagnose, recover and justify a choice across more than one context, while knowing when to consult the current reference.
