Code Monkey home page Code Monkey logo

fontastica's Introduction

fontastica

About Fontastica

In design, typography is a hugely important factor. Choosing the right type for the design at hand can be very challenging. For some designers, it is as easy as "choosing free fonts"; for others, the task can be more daunting, especially if you're are not aware of the resources available. For designers who do not code, or for developers who do not design, it can be tricky to find fonts that will work well and look good.

There are already some free resources on the web. However, the problem with most these resources is that they are static. Everyone has a different idea of what good design is and which typefaces go well together. Static resources are good but they can only go so far: what if you dislike the combinations listed? What if you want to compare a combination? What if you already have a font and want to find a good match for it?

In the end, that was the aim: to create a resource where designers could browse font combinations and compare them side-by-side, where they are given choices rather than being made to search for combinations themselves.

How to use the site

The idea behind the site is to create a user-generated resource of fonts that work well together. This is achieved by serving random combinations of fonts to the user in the rating area. If you like what you see, simply click "I like this!" - otherwise, click "This sucks!" It's pretty straightforward, really.

Alternatively, if you see a single font you like, you can view information about that font by clicking on the name in the sidebar, and there you can see a list of fonts that other users have thought work well with it. If you're still not satisfied, you can choose to view that font with others either as a header or body text, and keep going through until you find something you like.

Site information

Fontastica is the brainchild of me, Sophie Shanahan-Kluth. It's my final year project for university so quite a lot of work has gone into this. You can either keep up with me on Twitter, or visit my personal site.

The site's fonts are served by Typekit, and it's set in Freight Sans Pro with Skolar for the headers. The site itself is built in PHP and MySQL with a smidgen of JavaScript thrown in here and there.

The fonts you can tag and rate are pulled from Google Web Fonts using their API.

The dummy text on the rate pages is pulled in from the Gutenberg Project. Each one is a fable by Aesop, so hopefully you'll enjoy reading them as much as you enjoy browsing the combinations and picking your favourites.

If you come across an error, please get in touch and let me know how you got it - the usual bug report garb. And then refresh the page a few times, because the error messages are from Firefly - more entertainment for you.

fontastica's People

Contributors

iamsophiesk 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.