Giter Club home page Giter Club logo

font-testing-page's Introduction

Font Testing Page

Stable releases available for use at http://www.impallari.com/testing

The Font Testing Page is a tool primarily intended for type designers to 'Drag and Drop' and quickly test their fonts into a browser. It can also be used by Type and Art Directors, Graphic Designers, Teachers and Students interested in seeing how a typeface works on the web.

There is a short video demonstrating this tool, http://vimeo.com/40296571

Operation is simple:

  • Drag the font you want to try to the upper area of the Testing Page
  • Add more fonts and you'll see their file names and file sizes as buttons

Below the drop area you see some buttons to select different layouts:

  • Headlines: Displays examples: 72, 60, 48, 36 and 30 to 12.
  • Text: Displays text blocks, from 20 to 10.
  • Adhesion: Shows examples using only 'adhesion' text. Intended for the early stages on a typeface design.
  • Hamburgefonstiv Examples using 'Hamburgefonstiv' text.
  • Lowercase only: Displays examples of 72, 60, 48, 36, 30, 24, 18 and 16 to 10.
  • Caps: Displays examples of words in Sentence Case at 60.
  • All Caps: Displays examples of words in All-Caps at 60.
  • Layout: Displays examples of Headline, Subhead and Body text.
  • Kern: Displays examples of combinations of letters and miscellaneous signs.
  • Latin: Diacritics for 103 Latin languages, pangrams and text samples.
  • And many many more...

Notes:

  • Requires Firefox or Chrome
  • 100% safe: Your fonts are only stored in your own browser (using localStorage) and nothing gets uploaded to any server

Secret tips for the "Filter text" tool:

  • When working on text fonts: Set the size to 18px or lower, and you will get nice blocks at all text sizes at the same time.
  • When working on display fonts: Set the size to 200 and you get a small cascade, set it to 300px and you get a full cascade (Great for deciding on your font's spacing/fitting).

Developers:

To download the latest version and use it locally:

git clone https://github.com/impallari/Font-Testing-Page.git;
cd Font-Testing-Page;
php -S 127.0.0.1:8080

Then visit http://127.0.0.1:8080 to see your local version of the tool.

Thanks:

License:

Code is available under the MIT License, see LICENSE.md for full details

Page text is available under the Creative Commons Attribution-ShareAlike v3.0 License

font-testing-page's People

Contributors

adrientetar avatar davelab6 avatar erinmclaughlin avatar fzembow avatar impallari avatar meirsadan avatar santhoshtr avatar troush avatar weiweihuanghuang avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.