A run of the typography-audit skill on an invented brief (a fictional school newsletter, fictional town of Saltmere). Run by SkillLift. Everything below is the real output, unchanged.
## Typography Audit Findings
### newsletter.html
- [CRITICAL] `size-body-text` (newsletter.html:7): `font-size: 13px` on `body`, below the 16px floor (16-24px desktop).
- Fix: Set `font-size: 1rem` (16px) at every breakpoint; use 1.125rem for long-form desktop reading.
- [CRITICAL] `size-line-height` (newsletter.html:7): `line-height: 1.2` is far too tight for paragraph text (target 1.45-1.6).
- Fix: Use unitless `line-height: 1.5` on `body`; keep about 1.15 on headings.
- [CRITICAL] `punct-smart-quotes` (newsletter.html:25, 29, 33): Straight quotes and apostrophes in rendered copy ("Seaweed Science", "we are only borrowing...", It's, "The Salt Road", "It's going to be the best spot in the school").
- Fix: Replace `"` with `“`/`”` and `'` with `’`.
- [CRITICAL] `punct-dashes` (newsletter.html:25, 29): Double hyphens (`--`) used as an em dash.
- Fix: Use `—` (unspaced) or a spaced `–`, and apply one style throughout.
- [CRITICAL] `punct-dashes` (newsletter.html:20): Hyphen between "Week 5" and the date.
- Fix: Use a spaced en dash `–` (or an em dash) for the break.
- [HIGH] `size-line-length` (newsletter.html:8, 12): Paragraphs run the full 1180px container, well over 75 characters per line.
- Fix: Constrain text with `max-width: 65ch` and centre the column with `margin: 0 auto`.
- [HIGH] `spacing-paragraph-margins` (newsletter.html:12): `margin: 0 0 4px` lets paragraphs run into the next heading.
- Fix: Use `margin-bottom: 1em` on paragraphs.
- [MEDIUM-HIGH] `layout-center-alignment` (newsletter.html:12): `text-align: center` on every `p`, including 100-word paragraphs.
- Fix: Set `p { text-align: left; }`; keep centring for short display lines only.
- [MEDIUM-HIGH] `spacing-subhead-proximity` (newsletter.html:9-11): All headings have `margin: 0`, so a heading sits no closer to its content than to the section above.
- Fix: Give h2 `margin-top: 2.5rem; margin-bottom: 0.75rem` and h3 `margin-top: 2rem; margin-bottom: 0.5rem`.
- [MEDIUM-HIGH] `hierarchy-size-contrast` / `hierarchy-heading-levels` (newsletter.html:18-20, 23-24, 27-28, 31-32): Three heading levels (40/30/26px) stacked at the same weight 900 with no body text between them; levels are near-equal and read as one block.
- Fix: Use one heading per section (h2) and turn the second line into a plain-weight subhead or lede; drop h3 where it only restates the section.
- [MEDIUM] `hierarchy-weight-contrast` (newsletter.html:9-11): `font-weight: 900` on all three heading levels; weight is not separating levels.
- Fix: Use size + weight 700 for h2 and lighter weight (500 or regular) for the subhead.
### Summary
- CRITICAL: 5
- HIGH: 2
- MEDIUM-HIGH: 3
- MEDIUM: 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Saltmere Primary News</title>
<style>
body { font-family: Arial, sans-serif; font-size: 13px; line-height: 1.2; color: #222; margin: 0; background: #fff; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 24px 30px; }
h1 { font-size: 40px; font-weight: 900; margin: 0; text-align: center; }
h2 { font-size: 30px; font-weight: 900; margin: 0; text-align: center; }
h3 { font-size: 26px; font-weight: 900; margin: 0; text-align: center; }
p { text-align: center; margin: 0 0 4px; }
.meta { font-size: 11px; }
</style>
</head>
<body>
<div class="wrap">
<h1>Saltmere Primary School</h1>
<h2>Term 4 Newsletter</h2>
<h3>Week 5 - 2 November</h3>
<p class="meta">An invented school in the invented town of Saltmere</p>
<h2>From the Principal</h2>
<h3>A busy and happy month</h3>
<p>Welcome back to the final stretch of the year. Our students have settled into Term 4 with energy, and the corridors have been full of talk about the harbour walk, the spring concert and the great "Seaweed Science" project that Year 4 began last week. I want to thank every family who helped with the coastal clean-up on the 14th -- more than 90 parents, grandparents and neighbours turned up at Gull Point, and the tide pools have never looked better. As Mrs. Okafor said on the day, "we are only borrowing this shoreline from the next lot of children." It's a line I keep coming back to. Please remember that the school gates now close at 8:55am and that late arrivals sign in at the front office, where Mr. Venn will be happy to help.</p>
<h2>Spring Concert</h2>
<h3>Thursday 19 November, 6:30pm</h3>
<p>Rehearsals are well under way and the hall is already humming. Every class will perform, from the Prep percussion group to the Year 6 choir, who are working on a new arrangement of "The Salt Road". Doors open at 6:00pm and seats are unreserved, so we suggest arriving early if you'd like a place near the front. Please don't bring large bags, as the aisles need to stay clear. The P&F will run a tea and cake stall in the library afterwards, and all of the proceeds will go towards the new reading garden. If you can bake a plate of something, please leave it at the office by 3pm on the day -- nut-free items only, please.</p>
<h2>Reading Garden</h2>
<h3>Help us reach $4,000</h3>
<p>The garden committee has raised $2,650 so far, thanks to the plant sale, the bake stall and a very generous donation from the Saltmere Harbour Bowls Club. The next step is the timber seating, which we hope to order before the holidays. "It's going to be the best spot in the school," says Year 5's Priya, who has already drawn three versions of the plans. Working bees are on Saturdays from 9am to noon and no experience is needed, just boots and a hat.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Saltmere Primary News</title>
<style>
body { font-family: Arial, sans-serif; font-size: 1rem; line-height: 1.5; color: #222; margin: 0; background: #fff; }
.wrap { max-width: 65ch; margin: 0 auto; padding: 2rem 1.5rem; }
h1 { font-size: 40px; font-weight: 700; line-height: 1.15; margin: 0 0 0.25rem; }
h2 { font-size: 28px; font-weight: 700; line-height: 1.15; margin: 2.5rem 0 0.75rem; }
.sub { font-size: 18px; font-weight: 400; line-height: 1.3; margin: 0 0 0.5rem; }
p { text-align: left; margin: 0 0 1em; }
.meta { font-size: 14px; }
</style>
</head>
<body>
<div class="wrap">
<h1>Saltmere Primary School</h1>
<p class="sub">Term 4 Newsletter – Week 5, 2 November</p>
<p class="meta">An invented school in the invented town of Saltmere</p>
<h2>From the Principal</h2>
<p class="sub">A busy and happy month</p>
<p>Welcome back to the final stretch of the year. Our students have settled into Term 4 with energy, and the corridors have been full of talk about the harbour walk, the spring concert and the great “Seaweed Science” project that Year 4 began last week. I want to thank every family who helped with the coastal clean-up on the 14th—more than 90 parents, grandparents and neighbours turned up at Gull Point, and the tide pools have never looked better. As Mrs. Okafor said on the day, “we are only borrowing this shoreline from the next lot of children.” It’s a line I keep coming back to. Please remember that the school gates now close at 8:55am and that late arrivals sign in at the front office, where Mr. Venn will be happy to help.</p>
<h2>Spring Concert</h2>
<p class="sub">Thursday 19 November, 6:30pm</p>
<p>Rehearsals are well under way and the hall is already humming. Every class will perform, from the Prep percussion group to the Year 6 choir, who are working on a new arrangement of “The Salt Road”. Doors open at 6:00pm and seats are unreserved, so we suggest arriving early if you’d like a place near the front. Please don’t bring large bags, as the aisles need to stay clear. The P&F will run a tea and cake stall in the library afterwards, and all of the proceeds will go towards the new reading garden. If you can bake a plate of something, please leave it at the office by 3pm on the day—nut-free items only, please.</p>
<h2>Reading Garden</h2>
<p class="sub">Help us reach $4,000</p>
<p>The garden committee has raised $2,650 so far, thanks to the plant sale, the bake stall and a very generous donation from the Saltmere Harbour Bowls Club. The next step is the timber seating, which we hope to order before the holidays. “It’s going to be the best spot in the school,” says Year 5’s Priya, who has already drawn three versions of the plans. Working bees are on Saturdays from 9am to noon and no experience is needed, just boots and a hat.</p>
</div>
</body>
</html>