Skip to content

impallari/Font-Testing-Page

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

bugfix in Tools Better Adhesion tab, when selecting "some" as a upper/lower case option. No longer shows deprecated warnings
18eb6dc

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
 
 
 
 
js
 
 
 
 
 
 
 
 
 
 
 
 

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