Website Template for Type Foundries

Your typefaces are the product, so the website should behave like a specimen book. Foundry sets every headline in your own variable font and lets visitors play with it: move the pointer and the weight and optical size follow, type in the tester and see your family at any size.

Signature interaction. Pointer-driven type specimen: weight follows the pointer across, optical size follows it down, fast movement softens the corners, a click switches on the alternates.

Features

• Live type specimen. The hero headline's variable axes follow the pointer, with a live readout.
• Editable type tester. Type your own text and adjust size, weight, optical size and softness.
• Family rows. Each family set in its own axes, sweeping its weight on hover.
• Licence calculator. Desktop, web and app tiers that reprice as the seat count changes.
• Specimen pages. A poster page per family with a five-weight waterfall and images in use.
• Notes and contact. A journal list, custom type enquiries, address and socials.

What's included

• A home page and 8 family specimen pages, generated from one content file
• Every word, image, link and colour in content.json, so no code changes are needed to make it yours
• README and a buyer guide for editing, building and deploying
• The Studio Engine: Vite, TypeScript, smooth scrolling and animation
• Self-hosted open licence (OFL) fonts and generated placeholder images
• QA notes with the test results

Built right

• Lighthouse mobile 97 to 100 performance, 100 accessibility, best practices and SEO
• Keyboard accessible, works without JavaScript and respects reduced motion
• About 60 KB of JavaScript gzipped
• Deploys as static files to any host

Requirements: Node.js 20 or newer to edit and build.

Tags: website template, type foundry, typography, variable fonts, font website, portfolio template, Vite