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 alexeiva avatar davelab6 avatar erinmclaughlin avatar fitojb avatar fzembow avatar impallari avatar meirsadan avatar moyogo avatar sanchezmenendez avatar santhoshtr avatar simoncozens avatar troush avatar weiweihuanghuang avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

font-testing-page's Issues

Request for Tamil

Hi Pablo,

Please can you integrate Tamil testing. I am looking at the world scripts where there is Tamil, however a more elaborate testing interface will be very useful.

Thanks in advance.

Best,
Pria

License?

jQuery contentEditable() plugin is GPL 2.

Use webfont?

Hi Pablo et al.,

it would be great if the testing page couldn't only use local files dragged into the header, but also webfonts at a given online location. Even better would be if that location could be specified as part of the URL calling the font testing page. This way, it could be used with BrowserStack to inspect a font on various platforms and in various browsers.

Cheers, Christian

Add 4 blank text fields in OpenType features panel for custom features

Next to the ssXX selectors, you could add 4 blank 4-letter text fields (two next to ss10 and two next to ss20), with checkboxes next to each. This way, I could enter custom 4-letter OpenType feature tags (e.g. "fina" or "hist" or "afrc" or "ornm" or "unic" etc.) and have them also easily applied to the samples. The checkboxes would work the same way as they already do.

Highlight missing glyphs

On the "Latin" and "World Scipts" pages.

So that the missing characters get greyed out or become red or bold or

Don't know how to code this though.

I know you can use javascript (jsfiddle) or the unicode range in @font-face for styling but I'm not sure how to detect the missing glyphs.

Keyboard shortcuts: switch from a font to another

The idea is to quickly compare two or more fonts and make diffs between shapes and spacing to pop out. For that I suggest to add keyboard focus on the fonts tabs. Then it could be nice to see top numerals 1,2,3,4,5 switch to the first, second, third… font tab.

shortcuts illustration

[fontdrag.js] add "woff2" to acceptedFileExtensions?

Hello,

Now that both Chrome and Firefox (v35, via about:config) support woff2, it would be nice to be able to add support for the new format to the Font Testing Page.

For the time being, I simply rename the font file extension to, say, ".woff", and the WOFF2 is loaded correctly by supported browsers.

So I guess it's just a matter of adding the "woff2" extension to the fontdrag.js list of acceptedFileExtension...
(but maybe this feature request could also be forwarded to @ryanseddon's font-dragr repository)

Thanks a lot,

Cosimo

Font Smoothing

Hi,

There could an option to turn the css font smoothing on (font-smoothing: antialiased)

Don't You think?

Thanks.

New Layout

New improved layout will have:

  • Dropped font list and OT Panel in the left sidebar
  • Tabs Navigation at the Top

Make line-height a fixed px value

When comparing 2 fonts of 2 families (eg Lohit Devanagari and Ek Mukta Regular on http://www.impallari.com/testing/devatest.php) then the baseline of each line jumps because the 2 fonts have different vertical metrics.

It would be great if there was an option so that the line-height of the page was fixed and that jump didn't happen, so when you toggle the 2 fonts, you can more easily compare the differences

Kerning not working for some fonts

I've noticed toggling 'OpenType Kerning' doesn't turn on kerning in some fonts, it happens in Chrome 35.0.1916.153 with ttf, otf and woff versions (for example Roboto-Thin.ttf doesn't but CooperHewitt-Thin.otf, ClearSans-Regular.ttf works).

I know there is kerning in these fonts and when I tested it in another html page with text-rendering: optimizeLegibility the kerning works.

Should diacritics examples be marked-up with their language?

On the context-of-diacritics tests in the Latin 2 section, we have, for example "espanhóis" and "źródłosłowu" in the "ó" section. The first is Portuguese and the second is Polish. The Polish ó is a o-kreska which may be designed differently to o-acute; OpenType localisation features in the font can be used to select the appropriate glyph for a text.

For testing localised features, would it make sense to mark up all of the context-of-diacritics words in spans declaring their languages so the browser can at least have a shot at giving you the right glyph? For example, <span lang="pt">espanhóis</span> ... <span lang="pl">źródłosłowu</span> and so on.

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.