Home » » Typography Tools for Web Designers

Typography Tools for Web Designers

Written By Vinayak Shejole on Saturday, February 25, 2012 | 2:41 AM

What follows is a list of such tools – ones that will help you to introduce great typography to your designs.
CSS Type Set
csstypeset
This is a handy CSS tool that lets you input some example text, and then tweak it using a friendly user interface. In the end, you get the CSS code the modifications you’ve made.
flipping typical
flippingtypical
This tool displays nice font previews for the phrase you’ve input. This is helpful when you want to check what your text looks like in different fonts at the same time.
FontStruct
FontStruct
This tool lets you design your own fonts. This is something you might find valuable if you want to present a truly custom look no one else has.
FontBurner
FontBurner
FontBurner is a tool that enables you to include custom fonts on your site. By custom I mean fonts that are not generally meant to be used on websites. FontBurner makes it simple because you only have to download your chosen font, upload it to your site, and then use a piece of CSS code to apply it to any text.
HTML-Ipsum
HTML-Ipsum
This is an HTML edition of the standard Lorem Ipsum tool. The idea is simple. It’s a dummy text generator, but this time it provides an HTML output. So you can generate paragraphs, lists, forms, tables, navigation menus, and more.
Typetester
Typetester
This tools is a kind of combination of CSS Type Set and flipping typical. It lets you choose three different fonts, set various CSS parameters of them, and then compare the results visually.
WhatTheFont
WhatTheFont
This is one of the old-school tools for web designers. There’s probably no better place if you want to find out what the name of an interesting font you’ve seen is.
CSS Compressor
CSSCompressor
At some times CSS code can become really big and cluttered, which causes your website to take a lot more time to load. CSS Comprossor takes CSS code and compresses it to the smallest possible size while retaining all the settings.
CSS Layout Generator
CSSLayoutGenerator
This is a really handy tool if you don’t want to spend time on creating your CSS layout manually. Using a simple user interface you can create any standard layout (for example: single column, two columns, and so on). HTML5 supported.
css3 drop shadow generator
css3dropshadowgenerator
Different kinds of shadows are getting popular in modern CSS3 designs. This simple generator lets you create some cool shadows without the need of constructing the code manually.
PrimerCSS
PrimerCSS
This is a very clever tool. What it actually does is it takes any HTML code you input, looks for every CSS class and ID used inside of it, and presents you with a generated CSS code for all the classes and IDs.
ProCSSor
ProCSSor
This tool takes your CSS code and prettifies it. It’s a strictly visual thing, but it’s still very cool. You can choose from many different presets when it comes to the code’s layout and presentation.
PXtoEM
PXtoEM
A simple PX to EM converter. Translating PX values to EM is something you often have to do when converting your new design from Photoshop to HTML and CSS. This is a frustrating task if you’re doing it without any tool to help you.
CSS3 Generator
CSS3Generator
CSS3 has introduced a lot of new possibilities for web designers. For instance, now you can use things like: shadows, rounded corners, @Font Face, transitions, and more. CSS3 Generator gives you the possibility to have all those things generated instead of having to craft the code manually.
Share this article :

0 comments:

 
All Rights Reserved Copyright © 2011. Perfect Designing Developer