CSS-Lifesavers For Efficient Web Design

Texster
Texster is a CSS code generator that allows you to preview 19 fonts as you adjust size, color, line height, character spacing, word spacing and indent properties - so there are no surprises.

Syncotype Baseline Overlay Bookmarklet
Either install the Safari/Firefox bookmarklet or add one script tag to your page, and the Syncotype box appears in the upper right. Enter your line height and offset from the top of the page in pixels and Syncotype overlays your baseline in red.

CSS Font Matching
A list of font comparisons for web development and CSS that compares all three major systems: Linux, MacOS X and Windows.

CSS Font and Text Style Wizard
This tool allows you to easily apply CSS styling to text and generates HTML and CSS source code for you to copy and paste.

Grids with CSS: generators and useful tools

1Kb Grid
A simple tool that generates lightweight CSS-grid and lets you download it. Very useful.

Fluid 960 Grid System
A set of comprehensive templates for rapid interactive prototyping, based upon the 960 Grid System, covering main design elements such as forms, typography, graphics and various dynamic components.

Grid System Generator
The grid system generator will create fixed grid systems in valid CSS/XHTML for rapid prototyping, development and production environments. In addition to the css framework, it creates a background file (sample) that you can use in Fireworks, Illustrator, OmniGraffle, Photoshop, Visio (etc.) to aid in prototyping and design.

BluePrint CSS Architect
This tool will generate the CSS required to layout an XHTML template. It uses Blueprint CSS at the core, but it does not implement the Blueprint grids through classes. Rather, it generates the same CSS for the IDs you have already defined in your template.

BOKS
BOKS is a visual grid editor that was designed for designers who believe the grid system is good, but haven’t had time to fall in love with it yet. Since it is an AIR application, it works on Windows, Mac and Linux and provides a user interface for Blueprint CSS’s framework.

CSS Grid Calculator
Use the CSS Grid Calculator to quickly visualize page layout and draw grids in a variety of ways. It provides accurate visual feedback on how text blocks and page divisions will appear in browsers and returns style declarations for divisions and code to copy and paste into your CSS.