Web site/application for font comparisons

[linjer]

In continuation of our discussion on reddit here, this issue is to track the idea that all these fonts are best directly compared is a configurable setting which is of most interest to the particular developer.

[chrissimpkins]

Original suggestion:

Also, FWIW, a simple font comparison tool where people can directly compare a single body of text between 2 fonts may be your long term solution here. Perhaps you can include a few ready to code sample texts, one showing all the typical chars that vary (e.g., 0OIL1{}'") and then people may be able to choose a canonical code snippet of a chosen language, folded (so its a single line, stacked for easier comparison) and expanded (so its in block form).

[linjer]

Please update me with how you decide to address this, so I may follow and possibly contribute.

[chrissimpkins]

Sorry, this discussion has taken place in multiple issues and I am going to consolidate it here.

[chrissimpkins]

From @larsenwork

Personal preference but I'd say zooming in on examples can be a bit misleading and not really that relevant - I'd rather have a filterable preview of code examples.

So the user can set a couple of criteria like:

Pixel font
Semi-condensed
Slashed zero
Normal sized operators
Haskell ligatures
Supports all latin languages, cyrillic, greek

with live updates so only fonts meeting you criteria is shown.

[chrissimpkins]

From @larsenwork

I'd recommend you set it all up using github pages so read a bit about that if you're not familiar with how it works, buy a domain name and host the CDN at cloudflare.

Use modern web technologies and don't bother about legacy support - your visitors will not be browsing using IE8 and will have no problem switching a browser.

I saw this the other day and thought it looked great: http://tympanus.net/codrops/2015/06/16/filterable-product-grid/ (should be easy to change so you can make multiple selections)

[chrissimpkins]

From @chrissimpkins

Sounds great. I have multiple GH pages sites (for software documentation) and a paid Cloudflare account so we will be all set from that standpoint. I will need advice/help on the frontend design if you'd be willing to pitch in. Web design is definitely not my forté.

Like the concept in that link. That would work well with this project. Will get a repository set up for the website and be in touch once I do a bit more research into the best way to present it and am prepared to discuss a site scaffold in more detail. Thanks much.

[chrissimpkins]

from @larsenwork

You may already know this but it's really easy to loop through content with jekyll e.g. https://github.com/larsenwork/animalnoteheads/blob/gh-pages/_includes/tables.html#L13

[chrissimpkins]

from @larsenwork

So what we could do is to make every font a blog entry with a lot of metadata so it's filterable (and that meta data can always be expand/adjust down the line).

This way you only have to write the demo text once and just for-loop through all fonts.

Categories could be use for major groupings like bitmap, outline

[chrissimpkins]

from @chrissimpkins

Is it as simple as just adding new meta data fields to the header section of new posts?

[chrissimpkins]

from @larsenwork

could use tags for meta - they are defined in the frontmatter http://jekyllrb.com/docs/frontmatter/

[chrissimpkins]

The above discussion was merged from other issues and the discussion is current at this point. I will ask anyone commenting on this issue, to do so in this thread.

[larsenwork]

:+1: So basically what we'll be creating is something like https://www.google.com/fonts but with preview + filters related to coding instead of general typography

[chrissimpkins]

What are your thoughts about this project to organize and display fonts by tags? It was recommended by a font foundry and looks pretty good:

http://ofont.net/

[tomByrer]

Most of the work is done for you: http://katydecorah.com/font-library/

[chrissimpkins]

thanks for sharing this. this would be perfect. let me dig through the site to see how she put it together and how we could transition it to these faces.

[chrissimpkins]

http://sourcefoundry.org/hack/playground.html

Most Codeface fonts are currently supported. Because of licensing issues you need to install fonts that are not available in Web font builds in order to compare. This uses the ACE editor and you can adjust text size, syntax highlighting, and the fonts used.

Enjoy!