Font Tester is a free web-based font comparison tool. It
allows you to easily compare different fonts
side by side and adjust the various CSS properties of those fonts in
real-time.
The reason I decided to make this site is because I've always found it
quite difficult to get a good idea of what a particular font is going to
look like at a particular size. In the past what I used to do to
compare/preview fonts is simply write out the HTML or CSS code for a particular
font and then preview it in my web browser. If I wanted to make a change, I
would then go back to my code, make the change, save the file, and preview
it again in my web browser. I would pretty much constantly go back and forth like
that...source code -> browser -> source code -> browser
until I finally found a font that I liked.
After I had decided on a font, I would then have
to decide on a size. "Hmm, what size should I choose?", I thought.
"Should I use one of the built-in CSS font size keywords (small, medium,
large, etc.) or should I type in my own font size manually? And if so,
what length unit should I use (em, px, %, pt, in, etc)? What do the
different length units look like? How does a 10pt Verdana font differ
from a 10pt Arial font?"
After finally deciding on a font size that I liked, I then had to decide
on a color, and choosing just the right color was usually a hassle within
itself. I know from experience that all of this "back and forth, tweak this, tweak that, try this value, try that value" can be a very time
consuming and mundane task, especially when considering all of the
available fonts (and font styles) there are to choose from.
Font Tester is a tool I've written to make the whole
process of comparing different fonts (and choosing the right color scheme) much easier and faster. All
you have to do is supply it with the text you would like to preview, then
modify the various CSS properties of that text to find a style you are
comfortable with. You can change the font's size,
it's family, it's
alignment, it's
line height, whether
or not it is bold/italic/underline, it's
letter spacing, it's
word spacing, it's
indentation, and even it's
direction.
You can also choose what color and background color you would
like for your text using the real-time color picker.
The color picker is also especially useful because it gives you direct
access to the HSV (Hue, Saturation, Value) and RGB (Red, Green, Blue)
values for the color you've chosen. The color picker also includes a
convenient dropdown list of the 216 web-safe colors and another dropdown
list of over 1,000 named colors (such as HoneyDew, GreenMist, and HotPink) for you to choose from.
Now, choosing just the right color for your text can be accomplished in
just a matter of seconds (and without having to write a single line of code!).
Font Tester also includes a handy character map
which you can use to easily find the corresponding HTML entity for a
particular character (or to generate a snippet of HTML code to reproduce
that character in your webpage).