This is part two of the total of 40 online web design tools that I’ve found to be most useful. Listed in alphabetical order below are the remaining 20 online resources for font, topography, and typography tools. The first twenty are contained in the post “20 online tools for web design.” To see the full-size screenshots for each tool, see the companion gallery here.
I use the word topography to refer to the “surface features” of a website, meaning the overall appearance and composition of the page elements, including both type, graphics, images, textures, and the total look and feel of a web design. While most of these tools are typographical in nature, the list also includes tools that help with conversions, tuning, CSS, banners, images, and colors.
[Editor’s Note: So as to avoid the confusion that the word topography seems to have created in presenting these tools, I’ve removed it from the titles. However, I respect the professional web designer’s use of his own terminology to describe the tools that he uses.)
#21 Google Font Previewer and API
This guide explains how to use the Google Font Previewer API to add web fonts to your pages. You don’t need to do any programming; all you have to do is add a special style sheet link to your HTML document, then refer to the font in a CSS style.
#22 HTML-Ipsum
This website by Chris Coyier presents this useful feature of Ipsum text already in HTML tags. Just click on the titles to copy text to your clipboard. Html-Ipsum gives you the Latin text already in HTML tags, as unordered list, ordered list, or a definition list, just to name a few examples. Check out his CSS Tricks, another great resource.
#23 Identifont
Identifont lets you identify a typeface from a sample by answering a series of questions about key characteristics. Identifont is the largest independent directory of typefaces on the Internet. It provides a range of features to help you locate fonts or find information about fonts:
- Find fonts by appearance
- Find fonts by name
- Find fonts by similarity
- Find picture and symbol fonts
- Find designers and publishers
The Identifont website is based on the Common Lisp Hypermedia Server, a Web server designed for advanced applications in AI and research, and developed at the Massachusetts Institute of Technology Artificial Intelligence Laboratory.
If you have a restricted set of letters, such as in a logo or heading, enter them into the font finder and you will be asked questions that can be answered from the letters you specified.
#25 Lorem Ipsum
“Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit…”
“There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain…”
The paragraphs, words, bytes, or lists of Lorem Ipsum are available including mock banners in several colors and a range of banner sizes.
#26 Microsoft Clear Type Tuner
Use this online tuner to adjust your Windows XP ClearType settings for better readability. Please note that the online tuner does not currently work with Windows Vista.
#27 Microsoft Typography
A selected list of Microsoft products and fonts listed by family also has a list of core fonts for the web, and a clear type font collection.
#28 PXtoEM
PXtoEM is a calculator that does conversions of pixels, ems, points, and percentages. Easily convert pixels to em to percent to points with this online tool.
#29 STC FontBrowser
This flash application will allow you to quickly preview the fonts active on your system.
#30 Texster
Though it appears to be in Russian language, this tool is a very helpful font selector with options to modify the size, line height, letter spacing, word spacing, and text indent in em, px, pt or %. Options for color and background color also. Just grab the CSS when you have configured what you need.
#31 The TTFTitles WordPress Plugin
This WordPress plugin lets you use images to replace the titles of your posts, thus circumventing the problem of guessing what fonts your end-users might have installed.
#32 Type Chart
Typechart lets you flip through, preview and compare web typography while retrieving the CSS:
- Browse typographic styles.
- Download CSS.
- Compare Windows (ClearType) rendering with Apple font rendering. Each style corresponds with a “style ID” which allows you to annotate prototypes and retrieve the CSS while coding.
#33 Type Navigator
TypeNavigator is the world’s first interactive visual font search system. Select from the forms on the left that best describes the font you are looking for, and then pick other attributes by selecting the radio buttons that define the characteristics, and then click “Search”.
#34 Type Tester
Typetester is an online application for comparison of the fonts for the screen. As the new fonts are bundled into operating systems, the list of the common fonts will be updated. Typetester’s code structure is XHTML, styled with the finest CSS and driven by the JavaScript for manipulating DOM structures. Typetester will not work without JavaScript enabled. Typetester is built by User Interface Studio.
#35 typeface.js
Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally. Here’s what it takes to make it run: load the typeface.js library and some typeface.js fonts, then proceed like normal.
#36 Typophile Forum
One of the best typographic related forums, where you can find very useful information, ask your questions, and find experienced people in the same realm.
#37 Typotheque Hi-Res FontTester
This is a useful tool; however it is limited to only the fonts available to buy from the site. You can create a PDF file from the end results.
WhatTheFont allows you to scan in or provide the URL of a font and it will tell you what it is. Have you seen a font in use and want to know what it is? Submit an image to WhatTheFont to find the closest match in their database. Or, let cloak-draped font enthusiasts lend a hand in the WhatTheFont Forum.
#39 Wordle
Wordle is a fun online application for generating “word clouds” from text or URL with RSS feed that you provide. The clouds give greater prominence to words that appear more frequently in the source text. You can tweak your clouds with different fonts, layouts, and color schemes. The images you create with Wordle are yours to use however you like. You can print them out, or save them to the Wordle gallery to share with your friends.
#40 Your Fonts
YourFonts.com is an online font generator that allows you to create your own OpenType fonts within a couple of minutes. Go make your own handwriting as a font!
Do you have any other tools that you would like to add to this list?
