Drag and drop font testing page
PabloImpallari
Posts: 806
The Font Testing Page is a tool primarily intended for type designers and independent foundries. It can also be used by art directors, graphic designers, teachers and students interested in seeing how a typeface works on the web.
There is a short video at:
Operation is simple:
- First, you must accept the request from the browser.
- Then drag the font you want to try to the upper area of the Testing Page.
Below you will find 8 buttons: Headlines, Text, Lowercase Only, Adhesion Only, Caps, All Caps, Layout and Kern.
- Headlines: Displays examples: 72, 60, 48, 36 and 30 to 12.
- Text: Displays text blocks, from 20 to 10.
- Lowercase only: Displays examples of 72, 60, 48, 36, 30, 24, 18 and 16 to 10.
- Adhesion only: Shows examples using only 'adhesion' text. Intended for the early stages on a typeface design.
- 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.
Use it freely at:
http://www.impallari.com/testing/
- Requires Firefox 3.6+/Chrome 13+
- 100% safe: Your fonts are only stored in your own browser 'localStorage'.
- Nothings gets uploaded to the server.
By Pablo Impallari (impallari.com) and Pablo Cosgaya (omnibus-type.com).
Based on Fontdrag (fontdragr.com) and Dave Crossland's FontTest.
There is a short video at:
Operation is simple:
- First, you must accept the request from the browser.
- Then drag the font you want to try to the upper area of the Testing Page.
Below you will find 8 buttons: Headlines, Text, Lowercase Only, Adhesion Only, Caps, All Caps, Layout and Kern.
- Headlines: Displays examples: 72, 60, 48, 36 and 30 to 12.
- Text: Displays text blocks, from 20 to 10.
- Lowercase only: Displays examples of 72, 60, 48, 36, 30, 24, 18 and 16 to 10.
- Adhesion only: Shows examples using only 'adhesion' text. Intended for the early stages on a typeface design.
- 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.
Use it freely at:
http://www.impallari.com/testing/
- Requires Firefox 3.6+/Chrome 13+
- 100% safe: Your fonts are only stored in your own browser 'localStorage'.
- Nothings gets uploaded to the server.
By Pablo Impallari (impallari.com) and Pablo Cosgaya (omnibus-type.com).
Based on Fontdrag (fontdragr.com) and Dave Crossland's FontTest.
5
Comments
-
Is there a link or am I missing it?0
-
Yep.. link added
http://www.impallari.com/testing/0 -
Thanks Pablo.
Smart interface.
FWIW, for my workflow "hamburgefonstiv" would be more useful than "adhesion."0 -
"hamburgefonstiv" added.
Let me know witch other things can be added, or improved.0 -
Now that's responsive development! :-)0
-
This is a great tool. It would be nice if the layout, lowercase, and Caps buttons worked in combination with adhesion and hamburgefontsiv.0
-
Very nice.0
-
@James:
Nice suggestion. I will think how to make that combination possible without bloating the interface.0 -
The user and all related content has been deleted.0
-
You do not even need to change the interface to do it. Just allow both buttons to be on at once.0
-
-
The user and all related content has been deleted.0
-
Just added 2 more tabs:
- Diacritics for all 105 Latin Languages & Latin Pangrams
- Non-Lating Pangrams0 -
the non-Latin fonts don’t update for me. I can’t get Arabic or Devanagari to work. I haven’t tested anything further. Using Chrome on Win XP, uploading OTF files. Actually, the Latin portion of the fonts in question do change, but the non-Latin portions do not.0
-
Hi Paul:
The text there is copy/pasted from wikipedia.. maybe there are some encoding problem.
If you can send me new text strings for Non-Latin, I will be happy to replace them.
Btw: I dragged 'Adobe Arabic', 'DroidNaskh' and a few more, and Arabic it's working here.
I can't test Devanagari as I don't have any Devanagari font.
0 -
Updated to version 6:
- We added the 'Hinting Tab' so you can easily spot hinting problems on your fonts.
- All the text are now editable, so you can write whatever you want while you are testing
- The source code is now available for everyone to download (Please be nice and keep the credits at the bottom of the page)
http://www.impallari.com/testing/
0 -
The user and all related content has been deleted.0
-
Yep, but only if the filename starts with numbers.
If the numbers are at the middle or at the end, seems to work fine.0 -
I recognize it would require far more complicated programming, but it would be cool if, when editing the text in the first, waterfall, tab, the text in each size changed accordingly.1
-
The user and all related content has been deleted.0
-
@Craig
Great Idea.. will look into it.
@James
The filenames are handled at lines 64 and 65 of the fondrag.js file.droppedFileName = droppedFullFileName.replace(/\..+$/,""); // Removes file extension from name droppedFileName = droppedFileName.replace(/\W+/g, "-"); // Replace any non alpha numeric characters with -
I'm not very experienced with reg-ex (regular expressions) so I can't fix it.
If someone can provide me a better reg-ex, I will replace it.
Otherwise you will have to rename your files and simply add any letter before the numbers.
0 -
The user and all related content has been deleted.1
-
James, there are apps that batch rename files quickly and for free.0
-
Thanks for sharing this, Pablo. It’s very handy.0
-
@PabloImpallari
I should have some spare time at the end of the week, if you would like, I'll see if I can figure out the reg-ex issue.0 -
Thanks James!
If you find a solution, you can post it here: http://www.impallari.com/projects/update/32 attached as a zip file.0 -
This is a really tool. I only have one problem. It does not show kerning. I’m using Chrome on MacOSX 10.7.0
-
@Georg
That's up to the browser. Try Firefox ( 'liga' and 'calt' also ON by default).0 -
You have to use the "text-rendering: OptimizeLegibility" for kerning to show in some browsers, perhaps it could be built in in the testing page in next version if not there already.0
-
Updated to v7
Including a handy OT Features Panel for Firefox
This should work on the latest versions of Firefox for Mac, PC and Linux.
For older versions of Firefox, it may be necessary to change the "gfx.font_rendering.harfbuzz.level" preference to "1" in about:config in order to access the OpenType features.
I'm also working on the next update -v8- to make it work on all browsers.2
Categories
- All Categories
- 43 Introductions
- 3.7K Typeface Design
- 803 Font Technology
- 1K Technique and Theory
- 618 Type Business
- 444 Type Design Critiques
- 542 Type Design Software
- 30 Punchcutting
- 136 Lettering and Calligraphy
- 83 Technique and Theory
- 53 Lettering Critiques
- 483 Typography
- 301 History of Typography
- 114 Education
- 68 Resources
- 499 Announcements
- 80 Events
- 105 Job Postings
- 148 Type Releases
- 165 Miscellaneous News
- 270 About TypeDrawers
- 53 TypeDrawers Announcements
- 116 Suggestions and Bug Reports