10 Typography Tools for CSS

An article by WeContrive    2 Comments

If you have spent any amount of time in the website design game, you know that CSS is a staple you can’t ignore. As Flash takes a back seat more and more, this method of coding is becoming more necessary by the day. It is also becoming a basic for graphic forms, one example being typography.

More than just a font, typographic art has become a movement on the online world. From creation of new lettering to the use of those fonts on website design to more clearly altered context or providing visual appeal, you can’t get away from it. CSS makes it easier than ever to manipulate and utilize typography for your web designs.

Tools to use CSS typography pop up every so often, but not all of them are as great as others. Here is a collection of excellent typography-related, CSS-compatible applications for you to use in your own work.

1. Font Tester

Font Tester is a useful little tool that will give you the ability to directly compare different fonts without having to go page to page. Instead, it puts them beside each other to see all at once. You get a nice, clear view that focuses well on details. This is one of the better tools for this purpose, and it is easy (and free) to use.

2. Typograph

Drag-and-drop applications, especially those with a simple interface for users, are fantastic. This app uses that design, allowing you to put everything on a single grid to determine web layout. It tries hard to be an all-in-one program, so you can limit the other tools you have to use.

There are some nice calculators and measurements included, which is fantastic. But otherwise, there are no frills here.

3. Typographic Grid

If you don’t like making your own CSS grids, you can usually find more than just a few available on the web premade. This one was done by designer Chris Coyier set to a vertical rhythm and made to give a basic platform for beginners. It won’t be much good for advanced users who want to create a more complex CSS font.

But it is perfect for something simple, especially if you can make your own grid but just don’t feel like doing it. It is even better if you can’t and will give you a starting point for making your own in the future.

4. Serif Font Search

Font searches are rare, at least when it comes to finding one that is of any real use. This search allows you to name the characteristics of a font, and it will do a search for anything that most closely matches. It is a great way of narrowing down your typography needs and finding something you really want.

Think of it as the perfect place to start if you only sort of know what you are wanting in a font but you would like to see examples that embody those needs.

5. CSS-Typeset Matrix

You can better come up with measurements using this tool. The matrix provides you with the ability to set your parameters and then do measurements based on pixels instead of more traditional methods. This might be helpful if you are planning to integrate the CSS typography into a previously formed website or design.

6. PXtoEM

The standard units of measurement for CSS typography are PX, %, PT or EM. But you can’t always start where you want. So if you are looking for a good conversion tool, this one will cleanly convert them to any format you need. It’s great if you want to have the same typography in more than one unit of measurement for later use or samples.

7. Baseline

The best part about this application is the tool that allows you to see some of the latest experimentation done with the still-new HTML5. Working off of a baseline grid, this is a great app because of the CSS reset as well as many other features that have made it one of the more popular tools on the web.

8. Typetester

You can use this tool to basically look at and play around with fonts you already have laying around on your computer or flash drive. Just upload them onto the app and change the size, the spacing, the line grid and more. It is easy to use, and while it’s limited in comparison to some software, it is nice for light tweaking.

9. TypeNavigator

With a preset questionnaire of sorts, you can find any font name by answering queries about the look, with specific details in mind.

Once it narrows down the list, you can usually get pretty good results. It also gives a list of possibilities, which is perfect if you are interested in seeing similar fonts you might prefer.

10. WhatTheFont

A nice, easy-to-use tool that you will be sure to love, this is a photo-recognition application. You take a picture of any font you like, then upload it into the app.

It will go through a list of cataloged letters to give you the name. This is fun to use when you are out and looking at things like posters and want to remember the font used for future reference.

Conclusion

CSS typography is all the rage and growing in popularity by the day. What are some of your favorite tools that can be used to this end? Let us know in the comments.

Post Source: webdesignfan.com