Type Connection is a game that teaches you how to pair certain types of fonts together based on certain characteristics, and you learn by sending two different typefaces on dates. First you pick a font, then a date strategy, and finally a partner. If it works out you'll learn why your choices were good. If you fail, you'll be told why and sent back to try again.

You start with a few choices between popular serif and sans-serif fonts—a distinct difference you'll learn early on in the game (if you don't already know). All the fonts are noticeably different so whichever you choose will lead to a different kind of pairing. Whether you fail or succeed in creating a happy couple, you'll end up with plenty of information about your choices and learn a little bit more about pairing typefaces in your designs. All the fonts and pairings are designed to teach broader principles through specific examples, and you can play again to make different choices and learn more. Even if you happen to be pretty good at pairing your typefaces, it's worth failing to learn why certain choices don't work. The information you'll learn from failures of font love can be just as valuable.

Overall, Type Connection is a cute and clever way to teach you quite a lot of useful information about how different fonts and type styles affect your designs. If you're looking to learn from scratch or just brush up your skills, it's a really fun (and free) way to do it.

Type Connections | via Swissmiss

Windows/Mac/Linux: If you've ever hacked around in your computer's terminal or command prompt, you've had moments where there's way too much text to fit on your screen. ProFont, made especially for terminals and programming, is meant to be tiny, so you can read lots of data all at once.

Coders are more than a little particular about their comfortable setup, so ProFont may not be a new default setting in editors of choice. But for those want to give it a go, or for casual users who'd like something that's very readable at any size, ProFont is a nifty little font that lets you fit more text onto a screen and scan it for what you're looking for. I learned about ProFont from a programmer who said it was his first post-installation step on any Mac he uses, and I've found a small but dedicated set of fans for ProFont on the web.

Installing ProFont isn't always obvious. Here's a good how-to for Ubuntu, and an easily installed version for Windows. The Mac version from Tobias Jung's site should be straightforward to plug in.

ProFont for Windows, for Macintosh, for Linux | Tobias Jung

Web development and design are two great skills to have because they allow you to work from anywhere and create amazing, beautiful sites and apps. Nonetheless, it can be hard to get started when you don't know what to do. We can help you out with these ten great tips and tools.

10. Get Educated

Tips and tools are useless if you don't know the basics. If you're still struggling with the initial concepts of programming and design, we've got a few lessons that can help you. To get started with web development, our Lifehacker Night School series can teach you HTML and CSS as well as JavaScript, which pretty much covers the basics. We also have Photoshop lessons which can teach you how to mock up a web site layout. We also have a basic lesson on color theory. To pick up a few more design skills, check out this list of resources. It'll help you get inspired and discover ways to learn more of the basics. If you want to learn more, check out Code Academy for additional programming lessons. When you're ready to take your first coding project from start to finish, be sure to read this.

9. Build Up Your Font Library

Picking the right font can make or break a great design. I mean, just imagine replacing every instance of Helvetica Neue with Comic Sans. Right? Right? Whether you've got a font of font knowledge or you don't know your serifs from your sans-serifs, you can always benefit from a good font collection. My favorite resource is DaFont, but that's just one of many. FontPark offers over 70,000 free fonts and YourFonts will even let you make your own. For more places to find free typefaces, check out our fonts tag page.

8. Use Dummy Tools

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Man, I could go on writing that genius material for pages with this Lorem Ipsum text generator. If you're not familiar, Lorem Ipsum (or Lipsum for short) is what many designers and developers use to generate fake placeholder text for their designs. You don't necessarily have actual content when you're creating a design for a web page, magazine, or other layout with lots of text. Lipsum generators supply you with placeholder text designed to fill titles, sentences, and/or paragraphs when you're lacking. But you don't have to rely on the standard stuff. There are many varieties of Lipsum generators, such as Cupcake Ipsum. Bear claw sugar plum sweet roll. Sesame snaps gummies gummies sweet roll oat cake chupa chups lollipop lemon drops!

Text is not the only thing you might need to generate for your designs. What if you don't have images? The Dummy Image Generator is basically the Lipsum equivalent for pictures. You just enter a size and it spits out a placeholder. This is very handy during both the design and development processes.

7. Steal

You know how there are no original ideas and everything is a remix? Don't feel like you have to come up with a design nobody's ever seen before or original code when there are tons of existing code snippets freely available on the web that you can use as you please. Great ideas come from building on the ideas of others, so feel free to steal a little bit. Obviously you don't want to copy anyone's idea verbatim or use anything without permission, but you can gain a lot of inspiration from looking at the work of others and borrowing little things they do to make your design look great and your code even more powerful and efficient. I like Snipt for finding code snippets. When it comes to design, you just need to browse the web. Pinterest is quickly becoming a large resource for posting examples of great design, but you don't really have to look any farther than the Lifehacker community. We have a number of designers in our midst and recently we featured the landing pages of a few along with tips on how you could learn from their process. Check it out and see if there are any techniques or ideas worth "stealing."

6. Pimp Out Photoshop

For most web designers, Photoshop is an essential tool. It's capable of a whole lot, but you can expand its capabilities by adding new actions, brushes, shapes, and more. Actions are basically macros for Photoshop, allowing you to automate tedious tasks you don't want to do "by hand." Here are 100 existing Photoshop actions to expand your collection, but if you need something specific you can always just create your own.

Expanding your shape and brush collections can also provide you with new options. Shapes give you vector images you can use in your designs, and brushes will let you paint with a variety of objects and styles. This ultimate shape collection should give you a good start, but you'll quickly find that if you perform a web search for "Photoshop shapes" and whatever type of shape you're looking for (start with silhouettes for a good set of options) you'll turn up some good choices. You'll find that Photoshop brushes are in an even greater abundance. Just take this collection of 2,000 for example. Brushes can allow you to paint with shapes, emulate real paintbrushes, or even create interesting effects. It's also easy to create your own.

5. Quickly Generate Complex CSS Code Visually with a CSS Generator

The CSS3 Generator, the CSS3 Maker, and the CSS3 Border Radius Generator are all great examples of ways you can generate the more complex CSS code you often forget. Drop shadows, animations, and rounded corners are very cool effects you'll want to employ on occasion, but since you'll use them less often and they require a bit more effort than your average style it helps to have a generator handy to create the code for you. It's important to know what you're doing when you're writing the code and to understand the code that comes out of the generator, but you can save yourself a little time when you're in a hurry or just can't remember the exact syntax. Here are plenty more you can add to your arsenal.

4. Download Free Resources

Design can be tough when you have to take your own photos, draw your own pictures, and create virtually everything from scratch. Sometimes it's best to have a little help when you, say, need to add an iPhone 4S with interface elements to your layout. The internet is filled with plenty of free and available Photoshop-ready resources to help you enhance your designs without putting in additional hours of work. Take these 30 free gadget PSDs for example. Most of the time, all you have to do is search for the item you want. That said, you can find plenty of great images, backgrounds, icons, and more at sites like psdGraphics, The Noun Project, Design Kindle, and PSD Collector. DeviantART can also be a good resource. Some assets will require attribution and others are simply available for your benefit with no reciprocation required. You don't want to overuse these great resources, but they can be very helpful when utilized in the right ways.

3. Get a Great Programming-Friendly Text Editor

Just as Photoshop is an indispensable tool to a web designer, a great programming-friendly text editor is to a programmer. We have favorites for Windows and OS X, so be sure to check those out if you're looking for some good options. You may also want to check out our favorite text expansion apps as well so you can store your favorite code snippets and insert them into your code with just a few keystrokes.

2. Know How Your Site Will Look on Different Kinds of Screens and Web Browsers

It's easy enough to put together a design for a web site when you're the only person who's viewing it. When it's live on the web, however, it'll be showing up on screens of all shapes and sizes in various web browsers. Before you deploy, you're going to want to test and make sure things look the way you want. Screenfly can show you how your site will look on different displays. Browsershots will let you see how your site is rendered by many different browsers running on Windows, OS X, and Linux. All you have to do is choose the browsers you want and wait for screenshots to appear. It may not be as efficient as testing your site on an actual computer, but it's certainly much more affordable.

1. Use a Framework

Frameworks can make the development—and even design—process go a lot faster. This is because most web projects are not particularly unique in the way they're created. Just as you'll end up stealing little ideas and code snippets around the web, you'll also end up borrowing grand concepts and principles that have long been standard. Frameworks let you take advantage of this by taking a lot of the effort out of standard coding. This saves you time and a lot of the headache that often comes with the tedious process of starting from scratch.

So what frameworks should you use? On the development side of things, Blueprint is great for CSS layouts, Ruby on Rails for Ruby programmers, Zend and CakePHP for PHP developers, and Django for Python coders. You generally won't hear the word "framework" in a conversation about design, but the idea does translate nonetheless. The Grid System and the 960 Grid are two great examples. If you want to save a little time by following principles that have worked for ages, check out a framework. It'll help you adhere to best practices, and you won't regret it.

Chrome: If you're a designer or just curious to see what fonts are used on your favorite web sites, the free Chrome extension ‘What's the font?' reveals this information easily. After installing the extension you just need to right-click the highlighted text with the font you want to identify and choose the menu option for ‘What's the font?'.

Of course you can delve into the page's source code and find that information yourself without the extension, but that takes more time and can be confusing if the page uses many fonts. The big drawback to this extension for me is that it can't identify fonts in images. We covered a similar-sounding webapps What the Font?! and What Font years ago that can find fonts in image files, but going to a webapp and uploading a file isn't quite as convenient as a browser extension where you only need to highlight text.

As long as you can consign yourself to visiting one of the above soluions for identifying fonts in images, ‘What's the font?' may be a useful tool and the price is certainly right.

What's the font? | Chrome Web Store via Addictive Tips