Typefaceoff

Typefaceoff is a 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 is in alpha

Typefaceoff is in early stages of development. Really. We envisage it becoming a useful tool for anyone who puts text on a page (Office and Google Docs count!), but it isn’t quite ready for widespread adoption.

If that doesn’t put you off, give it a spin, and we encourage you to help us build it by giving feedback or making code contributions. Check out our contributing guidelines and open issues to get into it!

💾 Development

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.

🔧 Set-up

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

🙏 Acknowledgements

• 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.

📄 Licence

MIT. © 2023–present Typefaceoff contributors.