/typefaceoff

Browser tool for facing off typefaces.

Primary LanguageTypeScriptMIT LicenseMIT

Typefaceoff

Screenshot of Typefaceoff

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!

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!

💾 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:

setup

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

📄 Licence

MIT. © 2023–present Typefaceoff contributors.