Typography Audit and CSS Fix for a Fictional Contractor HomepageTypography Audit and CSS Fix for a Fictional Contractor Homepage
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
A typography audit I did as a concept exercise for a fictional Toronto concrete contractor, Northline Concrete Forming Ltd. It is not client work. No real company, logo or result is shown.
I built a deliberately weak homepage, then audited it the way I'd audit a real site. I measured eight problems: 4 typefaces, 1.2 body line-height, 1.90:1 text contrast, lines of 177 characters, 12px body text on phones, uneven letter-spacing and mixed alignment.
Then I fixed the typography only. The content, colours and layout stayed the same. The fix is two free Google Fonts (Archivo and Source Serif 4), a fluid type scale from 360px to 1440px, body line-height 1.6, a 60-character line length and contrast of at least 5.9:1 for secondary text.
For handoff there is a drop-in CSS file and a Figma style specification, with style names that match the CSS variables, so a designer and a developer use the same names.
Live: northline-type-audit.netlify.app Built with HTML/CSS, Figma-ready specs and Claude. All numbers were measured in a browser.
Post image
Post image
Post image
Post image
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started