In my last article on Understanding Typography, I wrote about what goes into the design of typography and how to manipulate it to improve on your website’s layout and to enhance user experience. In this article, I’m listing 10 of my favorite tools for typography on the Web.

These can help with building HTML grids and content areas, creating CSS styles, generating font names, and a bunch of other cool stuff. Check out some of the links below and be sure to let us know your thoughts in the post discussion area.

Recommended Reading: Understanding Typography: Writing For the Web

Font Matrix

This online guide was posted by the 24ways design blog. It features a matrix table of all the standard web fonts you’ll find by default from various software vendors. Popular titles include Windows, Mac OS X, Microsoft Office, and Adobe Creative Suite programs.

Colour Contrast Check

Color contrast is often a problem when you venture outside of the standard black-and-white model. When you find a match it feels like design perfection. Yet a poor color combo choice looks very bad and will negatively influence the overall design. This small web tool can help you pick out a set of colors to match each other for any style layout.

HTML-Ipsum

Are you in need of a Lorem Ipsum tool that can do more than just output text? This online HTML generator will create code blocks for the most common page elements. Some examples include unordered lists, definition lists, web forms, tables, and plenty of other solutions.

Typechart

Typechart is one of my favorite tools as a CSS developer. I am frequently looking to match a specific font on my system to a web project, but I just don’t have the time to flip through my entire collection. This awesome tool lets you sift through popular choices of font families and even download the proper CSS code!

PX-to-EM.com

Unless you reset the default browser text size you’ll likely have issues matching up ems with pixels. This in-browser app provides both a conversion table and user interface for px to em. It’s a very simple tool for sure, but it offers a handy guide with really simple functionality – and you can’t beat the free price tag.

CSS Type Set

I don’t recommend sticking with CSS Type Set for too long as it’s truly a beginner’s tool. It allows you to generate CSS code based on specific font properties you select. While very useful at first, over time it becomes a crutch to lean on. And you won’t be able motivated to master the CSS properties by yourself. But if you need to save time on a project, this tool cannot be overlooked.

flipping typical

Here is one really unique example of a font preview library. flipping typical includes a handful of fonts which are native to your Operating System. It auto-scans your font directory to pick up the most web-safe solutions. You can compare them side-by-side and easily choose between your favorite options. This is another great time saver you bookmark and don’t think about until the last minute.

Typographic Grid

There is a lot of talk about designing around the grid in HTML and CSS. You likely understand the concept of how grids work, and measuring a website in pixels is no different. This grid tutorial by CSS-Tricks is more like a guided effort to introduce the basics of typography for the digital era. It’s a much more advanced topic in the realm of web design. But if you have some patience I recommend going through the details to see how these grid properties can actually affect your page layout.

WhatTheFont!

We’ve all found a logo or image with some really cool unidentifiable font. WhatTheFont has made rounds on the Internet for a few years and it’s still a favorite of mine. You choose an image to upload and their script will analyze text within the picture to match up any similar typefaces. The app will even link you to external products where you can purchase each font at your convenience.

Baseline/Line-Height Calculator

Finally a really powerful tool for generating line height and rhythm properties. Simply input values for the base font size and line-height, or include your own custom CSS code off to the side. The app will generate previews in a few different styles so that you can get an idea of how these properties would look on your own website.

Related posts:

1. Understanding Typography: Writing For the Web
2. 18 Helpful Tools for Better Gmail Experience
3. Understanding Pseudo-Element :before and :after
4. Regular Expressions: 30 Useful Tools and Resources

Editor’s note: Thinking of finally quitting your job and going into freelancing full time but still have burning questions that you want answered? Well, we’re hoping to address that in this week-long "Freelancing for Beginners" series, starting with tonight’s post.

For me, when I started freelancing full-time, it was (somewhat) the case of following others, more than anything else.What struck me most was the ease with which freelancers work, especially, if one could get everything done with the Internet and a computer. But if that’s the only reason you want to become a freelancer then you’re in for a bad time.

(Image Source: Fotolia)

Earlier we had an article about 9 things you should know about going into full-time freelancing, and if you have read it you would know that despite what freelancing has to offer, it’s not a career path for everyone. It’s not that we are discouraging you from taking up freelancing (full-time or partime), in fact the point of this article is to give you reasons why you should give it a go.

The first reason why you should try freelancing is…

1. To Satisfy Your Creative impulse

Many individuals are just born creative and talented. They usually have a great desire to exhibit skills in some form, yet in a normal desk job, it’s rare that they could ever find a platform to showcase their talent.

(Image Source: Fotolia)

For instance, a designer working in a software firm may come across a great design idea, but there isn’t really a chance to try the idea out since he has to work within the confines of his job scope or the project requirements. In most cases, even if he were to suggest that the team tries his new idea, more often than not, it’s just "not the right time to try something so new" – give me a show of hands if you have heard this.

Don’t get Mad, Get to Work!

In this case, you can put your idea to good use in freelance: produce a good sample and put it in your portfolio, or keep the idea in your "Idea Book" for a chance to try it out in the future, or just go all out and make it, then feature it in design websites or enter it into competitions.

2. To Obtain Added Income

There is no dearth of individuals who spend more than half their life grumbling about low pay in their jobs. No matter what salary you draw every month, it usually runs out way too early. If your job isn’t taking too many hours out of your day, you can use your spare time to work on freelance projects.

Side Income

It’s a win-win situation: you get to keep your job and your benefits, and you can find potential clients for freelance work from your network of acquaintances.

There are many companies that prefer to engage freelancers rather than employ a full time in-house artist, designer, developer or writers. You can take advantage of that and earn yourself some extra pocket money in the process.

Recommended Reading: Tips to Getting More Design Projects

3. To Open up new career options

Freelancing prepares you for a professional career ahead. It also harnesses your skills, and for those who catch on fast and who are willing to learn new things, the sky is the limit.

In the beginning, however, you may find that things may advance slower than expected. It’s not easy to convince someone to try something new, let alone pay for a freelancer who has yet to make a name of himself (or herself). But as you build your clientele list and become an expert in your field, things will indefinitely become way easier.

Recommended Reading: Networking Guide For Individuals Who Work Online

This opens up the opportunity to really do something you love (if you aren’t already doing it) and in this career choice, you can have a part in making the rules.

4. to work from home

This is what makes freelancing an attractive option to pursue, and the crucial factor that makes everyone want to fill in ‘freelancer’ as their occupation.

For starters, there are plenty of ways you can save on working from home: transportation expenses, money for gas (or petrol depending on where you come from), the time spent getting to and from work, buying lunch and other work-related expenses.

The essentials

If you work from home, you’ll only need:

• a stable Wi-Fi connection
• a (cell)phone number or video conference tool
• an email account and possibly a printer (if invoicing on paper is still your thing)

The (probably) best thing to come out of this is that there will be no more meetings, office politics and drama from the workplace. You get to focus on just getting the work done and be paid for just that.

5. To Pick up holidays at will

Those who have worked in the office know how hard it is for them to get their days-off approved from the bosses. It’s different for freelancers. Provided that you have completed your project, simiply don’t accept any new assignment for a self-imposed break from work. Pack your bags and slip to your favourite destination with your family or friends.

(Image Source: Fotolia)

If there comes a need to get back to work – a.k.a. an emergency – just whip out your laptop or smartphone and you can continue as if you have never left. It is up to you to make it your vacation fun, you get to decide where you want to tune in or tune out.

Conclusion

Bear in mind that you need to have self-discipline to pull through, the kind of discipline that was imposed on you at the workplace. You can always be more more lenient with yourself, nonetheless and by having proper time management and knowing where to set your boundaries, there’s no stopping you.

So there you have it, five simple reasons why you should give freelancing a try. Are you all hyped up and going "this is so the life for me", hold your horses. You might want to check out tomorrow’s post. Remember to tune in tomorrow.

Related posts:

1. What’s So Great (And Not) About Freelancing
2. 9 Things You Should Know About Freelancing Full-time
3. Freelancing and Co-Working: Best of Both Worlds
4. Freelancers: 8 Awesome Reasons Why You Should Join Online Forums

It’s been awhile since our last UI KIt handout. To end this dry spell, here is an amazing freebie: Blitz UI Kit.by PSD Freebies.

It is all organized into one neat psd file that allows for endless customizable options. The kit includes checkboxes, tags, buttons, menus, sliders, switches and much more. You can resize them to any size you like. Enjoy using this UI Kit for your next web project, app, or software program.

The Blitz UI Kit is free and you can download, edit and use it for your individual or commercial projects. Please do not host the downloaded source file on your server then/or redistribute them as your own either in part or whole. If you like the icons, do consider sharing it with a retweet, Recommend, Share, Like or +1  :-)

Hope you enjoy this UI Kit!

• Download Blitz UI Kit

A Word from its creator – Michael Reimer

Michael Reimer is a professional web designer from Canada. You can view more of his work at his new site bestpsdfreebies.com, where he offers a radically awesome and free collection of PSD resources. You can follow him on Twitter to get his latest freebie updates.

Related posts:

1. [Freebie] Rainbow UI Kit (PSD)
2. [Freebie] Web GUI Kit (PSD)
3. [Freebie] “BiZ” Business Website PSD Templates
4. [Freebie] Pinterest Icon Set