Typefaceoff is a drag-and-drop tool for proofing and comparing typefaces in a browser.

The tool works locally; font files are not uploaded to any server.

Typefaceoff: https://typefaceoff.github.io/typefaceoff/

Typefaceoff is released but a little basic. We envisage it becoming a useful tool for anyone who puts text on a page (Office and Google Docs count!) so if you're in for an adventure, give it a spin, and we encourage you to help us build upon it by giving feedback or making code contributions. Check out our contributing guidelines, ROADMAP and open issues to get into it!

This project uses:

• React for front-end,
• vanilla CSS for styling, and
• Vite for server tooling.

Node.js 16+ is recommended for development; Typefaceoff is not tested with older versions. The package manager of choice is pnpm—installation instructions on the pnpm website.

For a smoother contribution process, we recommend you:

• configure your code editor to use the Prettier and ESLint extensions; and
• enable your editor’s format on save option.

After cloning your fork of this repository and navigating to its root folder, use these commands to set up a development server and run Typefaceoff locally in your browser.

# Clone your fork of the Git repository and open it
cd typefaceoff

# Install dependencies
pnpm install

# Set up pre-commit hooks for code formatting
pnpm run husky

# Start the development server
pnpm run dev

It should look something like this:

In the example above, you could then load http://localhost:5173 in your web browser to see Typefaceoff in action. Press q in this window to terminate the server.

The following commands may also be useful:

# Build for production
pnpm run build

# Locally preview the production build
pnpm run preview

# Run linter to catch errors
pnpm run lint

# Run formatter to format code
pnpm run format

• Dr Kelly Blincoe, for making us do this. (Typefaceoff started as an assignment for SOFTENG 310 Software Evolution and Maintenance at Waipapa Taumata Rau, the University of Auckland.)
• Those whose work inspired this project:
  • Pablo Impallari for the Font Testing Page,
  • Roel Nieskens for Wakamai Fondue, and
  • Peter Nowell for Font Proofer.
• All the many great typeface designers out there.

MIT. © 2023–present Typefaceoff contributors.