Web Development

20 online topography tools for web design

Ryan Boudreaux highlights 20 of his favorite online topography tools for web designers. These tools will help you with various elements of style, including word spacing, font selection, converting px to em, and more.

Do you need help with elements of style, word spacing, font selection, vertical motion, blocks and paragraphs, line height, converting px to em, and attention to additional details in body copy? This is a review of some of the best topography tools available online today for web designers. Listed in alphabetical order are forty online resources for font and topography tools. The first twenty are contained in this post, and the last set of twenty will be posted next week. For the first set of 20 you can also see the companion gallery which includes full-size screenshots of thumbnails below.

#1 abcTajpu 1.6.5 Firefox Plugin

With this add-on, when you are typing in Firefox or Thunderbird, you can easily type accented words, international characters, or symbols, just by right-clicking for a context menu. You can also define your own hotkeys for frequently used characters or symbols.

#2 Baseline Rhythm Calculator

Baseline Rhythm Calculator generates CSS from a base font size and line height in px entered by the user. Just type in the base font size and base line height, hit the "calculate" button, and the whole page will change according to your input. When you are satisfied, grab the auto-generated CSS code.

#3 Better CSS Font Stacks

These are great font stacks for your CSS style sheets that you can download all-in-one in a 22-page PDF (13.1MB) document.

#4 BitFontMaker

This is an online bitmap font editor for both Windows and Mac that allows you to create bit-mapped fonts on the fly. Edit the baseline font then give it a name and copyright, then click the "Create Font" button and your *.ttf file is created.

#5 Cool Text

Cool Text is a FREE graphics generator for web pages and anywhere else you need an impressive logo without a lot of design work. Simply choose what kind of image you would like. Then fill out a form and you'll have your own custom image created on the fly.

#6 Copy Plain Text

Have you ever copied something to or from Firefox, IE, or Office documents and been annoyed that the text formatting (bold, font size, etc) came with it? Don't you wish you could just copy the text itself, without having to copy it, paste it into notepad, and then copy it again? This extension gives you an option to copy text without the formatting. You can even set it to trim extra space in and around the copied text!

#7 CSS Type Set, Letter Press for the Digital Age

CSS Type Set allows you to visually and interactively style text and it generates the CSS. Create Your CSS style sheet online without knowing any coding. CSS Type Set is a hands-on typography tool that allows designers and developers to interactively test and learn how to style their Web content.

#8 CSS Typeset Matrix and code generator

Web-Typography Tool: CSS-Typeset Matrix and code generator is a matrix table that presents font sizes with both symmetrical and asymmetrical margins for various base font sizes -- in pixel and em units. It also generates the source code on the fly, and is created by Jan Quickels.

#9 CSSTXT : Creates A Style

CSS TXT is a style generator for text and advanced properties include sliding bars for styling, that generates a CSS file.

#10 CSSType - Web Safe Typography on Screen for Pixel Perfectionists

CSSType lets you preview and modify text with this online application. It allows modifying text, font, color, size, background, word-spacing, padding, line height, text indent, lettering spacing, and text align. Finally you can get and generate CSS output for use.

#11 Em based layouts - Vertical rhythm calculator

This tool converts pixel values to em values depending on the font size of the text. You can also set margins and paddings automatically, depending on the line height you've defined. Once installed on the PC, it runs on Adobe AIR runtime, and both can be found on the web site.

#12 EM Calculator

Em Calculator is a small JavaScript tool which helps making scalable and accessible CSS design. It converts size in pixels to relative em units, which are based on a text size.

#13 Facelift Image Replacement (or FLIR, pronounced fleer)

Facelift Image Replacement (or FLIR, pronounced fleer) is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via JavaScript and visible to all modern browsers.  The free download is available from the web site.

#14 Flipping Typical

Flipping Typical allows you to enter text and then preview it in many different fonts at one time. Flipping typical is a way to explore the popular typefaces you have on your computer. If you want to see another font that's not there - just click the font name in the black bar at the top of the screen, type in the name of a font, it will become the main font and will be remembered. You can also change the sample text from "flipping typical" to anything you wish, as I have done with the text "Web topography."

#15 Font Burner

Font Burner is a website enhancement tool that makes it easy for you to add new fonts to your website. Its archive of fonts work universally in all browsers and on all computers. By adding a simple block of code to your web pages you can try out any of the hundreds of font at Font Burner.

#16 Font Finder

Font Finder is another Firefox plug in that allows a user to analyze the font information of any element on the page.

#17 Font Picker

This simple tool shows you all the fonts installed on your computer and helps you choose which one is most suitable for a particular project.

#18 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 necessary CSS code to reproduce those styles in your webpage.

#19 Fontifier

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.

#20 Fontstruct

FontStruct lets you quickly and easily create fonts constructed out of geometrical shapes, which are arranged in a grid pattern, like tiles or bricks. FontStruct is a free font-building tool by FontShop. Once you're done building, FontStruct generates high-quality TrueType fonts, ready to use in any Mac or Windows application.

The final set of twenty font and topography tools will be presented in the next post.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

7 comments
conceptual
conceptual

A master knows the tools and the terminology of his craft Let's not forget the techniques that inspired the tools or the experiences that gave birth to the techniques.

RudHud
RudHud

Good explanation. While you're at it, why not call blocks controlled by CSS "quadrangles"? Plus the US Geological Survey issues typographic maps. Hey, they have printed names on them, don't they?

bethernet
bethernet

It's very careless to mix up these two totally different words - this goes way beyond a "typo" ESPECIALLY when one of the "topography" tools listed is called "CSSType - Web Safe Typography on Screen for Pixel Perfectionists"

pat.kujawa
pat.kujawa

ty??pog??ra??phy (t-pgr-f) n. pl. ty??pog??ra??phies 1. a. The art and technique of printing with movable type. b. The composition of printed material from movable type. 2. The arrangement and appearance of printed matter. to??pog??ra??phy (t-pgr-f) n. pl. to??pog??ra??phies 1. Detailed, precise description of a place or region. 2. Graphic representation of the surface features of a place or region on a map, indicating their relative positions and elevations. 3. A description or an analysis of a structured entity, showing the relations among its components: In the topography of the economy, several depressed areas are revealed. 4. a. The surface features of a place or region. b. The surface features of an object: The topography of a crystal. 5. The surveying of the features of a place or region. 6. The study or description of an anatomical region or part.

Selena Frye
Selena Frye

I found that "topography" is used by designers in a generic way to refer to the "surface details" of web sites, which includes "typography" (specifically) in addition to other style elements. This is what I understood to be the case when checking the term myself. However, if Ryan's spellchecker simply went rogue, I will stand corrected!

Ryan Boudreaux
Ryan Boudreaux

Typography refers, of course, to the use of type, in addition, the art and practice of typography began with the invention of moveable type and the printing press. Topography in the use here borrows from the "surface features" meaning of the word to describe the overall appearance and composition of the page elements, including both type and graphics and other features such as background colors and images, textures, especially in the case of web design including the look and feel, and encompassing the total user experience and interactions. However, getting back to the point, the intent of this two part series is to highlight forty online web design tools that can aid the web master, web developer, interaction designer, web applications programmer, or web experience engineer.

Editor's Picks