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 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 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.
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 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.
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.
Srikanth is a Web Developer and SEO. Check out his portfolio for more information.