For designers nothing can be more handy than effective and time saving tools supporting their creative process. Of cause dependant on the specific needs free web-based tools can significantly help you accomplish tasks such as color selecting, color palette, creating own and unique fonts, editing images, and testing typography.

In this article tripwire magazine presents 30 essential Tools that hopefully will be useful for most Designers.



Typography and Font Tools

Bit Font Maker

This is not really AJAX but a very rich Javascript experience, BitFontMaker is an online bitmap fonts editor for Win and Mac allowing to create TTF fonts online simply by using a browser. The resulted application is amazing as functionalities offered and many pixel graphics designer will be certainly interested into give it a try. It’s easy to use but you’ll need help to read the help page cause it’s in japanese.


Font Struct

FontStruct is a free font-building tool brought to you by the world’s leading retailer of digital type, FontShop. FontStruct lets you quickly and easily create fonts constructed out of geometrical shapes, which are arranged in a grid pattern, like tiles or bricks. You create ‘FontStructions’ using the ‘FontStructor’ font editor. Once you’re done building, FontStruct generates high-quality TrueType fonts, ready to use in any Mac or Windows application. You can keep your creations to yourself, but we encourage users to share their “FontStructions”. Explore the Gallery of fonts made by other FontStruct users and download them or even copy them and make your own variations.



Fontifier lets you use your own handwriting for the text you write on your computer. It turns a scanned sample of your handwriting into a handwriting font that you can use in your word processor or graphics program, just like regular fonts such as Helvetica.



Typechart lets you quickly evaluate an assortment of web typography. Once you’ve discovered the font you like, you can use the Get CSS button to obtain the style rules for it.



The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated. Typetester’s code structure is XHTML, styled with the finest CSS and driven by the JavaScript for manipulating DOM structures. Typetester will not work without JavaScript enabled.


Font Tester

Font Tester is a free online font comparison tool. It allows you to easily preview and compare different fonts side by side with various CSS font styles applied to them. It is very useful for web developers who are looking for just the right font/style/color to use in their pages. To use it all you have to do is simply enter the text you would like to preview, modify the various CSS properties until you find a style you like, and then click on the Get CSS Code button to generate all the necassary CSS code to reproduce those styles in your webpage.


Markup and Content Tools


A web application for  creating web page templates. It has a very simple user interface, making itself a good tool for quick-and-dirty mockups of web layouts.


HTML Ipsum

A useful little website created by Chris Coyier. It provides you with the standard Latin text already in HTML tags. Clicking on any of the blocks automatically copies the text to your clipboard!



If you want to dramatically improve composition of your website design, you might need to consider applying the divine proportion to your design. This tools calculates the golden ratio for your designs.


Dummy Text Generator

This handy tool helps you create dummy text for all your layout needs. Dummy text: Its function as a filler or as a tool for comparing the visual impression of different typefaces


CSS Text Wrap

The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want.

Designer Plaything

Designer Plaything lets you experiment with different web typography and color combinations. It also allows you to check color accessibility. There’s a web-based version and a downloadable version which you can grab on this page.


Wellstyled Color Scheme Generator

Simple web tool that helps designers produce color themes.



CSSTXT is an uncomplicated web tool for generating CSS style rules for web typography.


Kotatsu – a simple html table generator

A highly useful tool creating a table and throw in column classes quickly

CSS Font and Text Style Wizard

Welcome to the CSS Font and Text Style Wizard, brought to you due to the popularity of the HTML and CSS Table Border Style Wizard. Use this wizard to experiment with font and text styles and generate sample CSS style source code. This wizard uses dynamic HTML to change the style of the table in-situ, without loading another page. It is cross-browser compatible with Firefox, Netscape, Internet Explorer, and other modern browsers.


CSS Type Set

CSS Type Set lets you experiment with different styles and attributes (such as font size, font weight, font family) of web typography. Once you’re satisfied with your tweaking, it’ll generate the appropriate CSS code for you.


Graphical Tools

Favicon Generator

Easily create your own custom favicons for free with Favicon Generator…


FavIcon Generator (dynamicdrive)

Use this online tool to easily create a favicon (favorites icon) for your site. A favicon is a small, 16×16 image that is shown inside the browser’s location bar and bookmark menu when your site is called up. It is a good way to brand your site and increase it’s prominence in your visitor’s bookmark menu.

More favicon tools:

FavIcon from Pics
Favicon.ico Maker


BGPatterns is a web tool for generating tiled patterns. Its intuitive (yet robust) user interface will allow you to tweak, edit, and resize a wide range of patterns.

Tartan Designer

Generate tartan patterns. For scottish lovers and fancy designers!



Web-based image editor with a Photoshop-like user interface; pixlr has similar features like layers, filters, and even a Clone Stamp tool.


kuler Create

Web-based application by Adobe that helps you create and share color themes.


Testing site layout and structure

Crossbrowsertesting (free/commerical) allows website designers to test the cross browser compatibility of their website across different browsers and operating systems. is a commercial service where users buy credits giveng 5 min usage each. Anyone can register and use the service for for free but the free service has a 5 min max length.


BrowserShots (free)

BrowserShots is a free open source service that allows you to make screenshots of any web page available on the Internet (be aware that robots.txt can prevent this service). Most browser types (Firefox, Opera, IE and Safari, Dillo, Epiphany, Flock, Galeon, Konqueror, Seamonkey etc.) in relevant versions is available and you can also choose between the following Operating System: Linux, Windows, Mac OS and BSD.


You can adjust the width of the screen size (640 – 1600), color depth (8 – 32 bits per pixel) as well as the JavaScript-, Java- and Flash-support. BrowserShots rely on distributed computers that are run by volunteers and the most popular Browsers may be quite busy and it this means that getting your screenshot may take some time. As screenshots become ready they will be available for viewing individually or for download of the full package.



Browsercam, probably the most featurerich screen capture services available. It even offers an extensive browser remote control service giving you access to check javascripts, DHTML, forms and other dynamic functionality on any platform. The number of available browsers, versions and operating systems is permanently growing. 90+ browsers, Linux, Win, Mac and even the presentation in different versions of browsers on mobile devices (BlackBerry, Win Mobile) can be tested. You can also adjust the screen resolution (640×480, 800×600, 1024×768), set up the access to password protected sites and download all screenshots in a .zip-archive.


The service offers everything you might ever need. Browsercam if not free but it has different price plans; the price varies bettween 20 and 1000$ per month. There is also a 24 hours free test evaluation which requires the registration on Browsercam.

W3C Link Checker (free)

Really handy tool for checking if all links on you web pages are valid.

link checker

Markup Validation Service (free)

Markup that is not well formed may give your site serious presentation issues in some Browsers while they are barely visible on others. It is always recommended to validate your site with the W3C Markup Validator and fix all the errors it reports.


Pin It on Pinterest

Share This

Share This

Share this post with your friends!