Developer

20 more online tools for web designers

By // April 7, 2011, 4:42 AM PST

Image 1 of 20

  • 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.

  • 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.

  • 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.

  • Lino Type Font Finder

    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.

  • 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.
     

  • 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.

  • Microsoft Typography

    This tool features 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.

  • 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.

  • STC FontBrowser

    This flash application will allow you to quickly preview the fonts active on your system.

  • 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.

  • 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.

  • 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.

  • 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."

  • 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.

  • 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.

  • 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.

  • 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.

  • What The Font (My Fonts)

    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.

  • 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.

  • 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?

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.

Related Topics:

Developer Mobility Tech & Work CXO Software Hardware Smart Persons Guides

By Ryan Boudreaux

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...