April 16, 2010 7

5 Useful Typography Tools to Aid you Web Design

By Srikanth AD in Web Design

Typography plays a key role in web designing and it has to chosen sensibly to meet the needs of overall design of a website. Beautiful typography can always enhance the website’s look and feel.

Following are some useful typography tools and resources which help designers in styling their web content. These tools can be pretty handy for testing and experimenting with different types of fonts for your website.

CSSTYPE

CSSTYPE enables you to live preview text, as you modify it. You can choose the font type, alignment, size, background color, line height, word-spacing etc., You can preview the text entered in normal, bold, italic, upper and lower cases at the same time. Once you are satisfied with the font properties and styling, you can click on ‘Generate CSS‘ link to get the corresponding CSS output.

CSS-Typeset Matrix and Code Generator

‘CSS Web Typography Matrix and code generator’ is a handy tool, which enables you to quickly and easily calculate font sizes and line spacing in em and px. The results are presented as a matrix. This tool computes symmetrical margins, asymmetrical margins and provides you the corresponding CSS code.

Typechart

Typechart enables you to preview, flip through, and compare different web typography while retrieving the CSS. You can browse different typographic styles and download CSS.

It lets you compare Windows font rendering with Apple font rendering. Each style corresponds with a “style ID”, which allows you to annotate prototypes and retrieve the CSS while coding.

Fontstruct

FontStruct is a free font-building tool, which lets you quickly create fonts constructed out of geometrical shapes, which are arranged in a grid pattern, like tiles or bricks.

Once you’re done building, FontStruct generates high-quality TrueType fonts which can be used in both Mac and Windows based applications.

HTML Ipsum

HTML Ipsum is a handy website which provides you with standard text with various HTML tags. For instance, if you want to build a sample form, an ordered list, an empty table, a navigation list etc., then you can quickly copy the HTML code by clicking on any of the blocks provided.

The code will be automatically copied to your clipboard. These blocks of HTML code can be quite useful which designing websites.

You might also want to check out Em Calculator, Typetester and Font Tester.

About Srikanth:
Srikanth is a Web Developer and SEO. Check out his portfolio for more information.

Tags: , , , , , , , ,

7 Responses to “5 Useful Typography Tools to Aid you Web Design”

  1. Andrew says:

    very informative! Thanks buddy :)

  2. Thanks very good for report, I follow your blog

  3. Really nice and impressive blog i found today.

  4. mbt shoes says:

    Nice post…Thank you for sharing some good things!!

  5. Thanks for best news!

  6. nice to be here…. thanks for share

  7. Steve says:

    very informative! Thanks buddy :)