Bitmap Fonts You can Use for Web Projects

Share

When used at smaller sizes, typefaces such as our beloved Helvetica, Verdana, Tahoma, etc. which are designed for print usually becomes harder to read and unattractive to the eye. Even if you apply anti-aliasing (that option in the Character Palette that’s supposed to make your fonts appear smoother), it is still not enough to make these fonts look better on screen. So what’s our next option?

I’m sorry to say this, but we need to say goodbye to our favorite printer fonts and instead, use bitmap fonts, otherwise known as pixel fonts. Bitmap fonts, being resolution-dependent, are able to produce a crisp clean image even at very small sizes. However, since these fonts were designed specifically for computers, they can’t be scaled and must be used at the sizes at which they were designed or at exact multiples. Also, it is important not to apply any anti-aliasing to them.

bitmap font

To avoid common problems when using bitmap fonts in your web designs, I included here a set of guidelines from minifonts.com

1) Bitmap or pixel fonts should be set on a page with a 72 ppi resolution.
2) Anti-aliasing (font smoothing) should be off.
3) The type size should be the ‘designed size’ or multiple of it. You will find this size in your ReadMe file.
4) All tracking and kerning should be set to zero and character widths to 100%.
5) Leading (line spacing) can be specified as required.
6) Always specify your font sizes in pixels, not points. A ten pixel font is not necessarily the same as a ten point one. Change your setup to work in pixels and set your document resolution to 72 ppi (pixels per inch).
7) Do not use a centered paragraph style. The math required to center text can result in fractional spacing and vertical rows of pixels can mysteriously disappear. Always set your pixel fonts ranged left and center it by moving the whole layer.
9) Save as GIF images at a 1-bit color depth, resulting in a small file size.

Below are bitmap fonts that you can use in your designs.  They are great for website photo captions, because you can get a lot of text into a small area and for website interfaces, especially navigation buttons.

1) BITMAP  FONT – SILKSCREEN
Source: Kottke.org
Description: Silkscreen is a four member type family for your Web graphics created by Jason Kottke. Silkscreen, with both Mac and Windows versions, is free for personal and corporate use.

bitmap font

DOWNLOAD BITMAP FONT

2) BITMAP FONT – UNI 05
Source: minimi.com
Description: Uni 05 is part of the miniml font collection which are are specifically designed to remain aliased in Flash. It’s free to use but available only for Windows platform. Best to use for really small sizes such as 5-6 points

bitmap font

DOWNLOAD BITMAP FONT

3. BITMAP FONT – BIT LOW
Source: dafont.com
Description: This set of pixel fonts can be used in both PC Windows and Mac OS X platforms

bitmap font

DOWNLOAD BITMAP FONT

4. BITMAP FONT – KHARON 4A MINI
Source: orgdot.com
License: Freeware
Platform: PC/ MAC OS X

bitmap font

DOWNLOAD BITMAP FONT

5. BITMAP FONT – VISITOR
Source: dafont.com
Description. Includes two font files that you could download and use for free in your web projects
Terms of Use: Free
Platform: PC/ MAC OS X

bitmap font

DOWNLOAD BITMAP FONT

6. BITMAP FONT – MICHAEL SCHMIDT’S SEMPLICE PIXEL FONT
Source: pixelfonts.style-force.net
Description. Available in two sets, regular and extended. Also, check out the other pixel fonts that can be downloaded from this site.
Terms of Use: Free for personal use only

bitmap font

DOWNLOAD BITMAP FONT

7. BITMAP FONT – PIXEL EX
Source: swipnet.se
Description: If you required really small characters (4 pixels), this one is a good option.
Terms of use: Free
Platform: PC

bitmap font

DOWNLOAD BITMAP FONT

8. BITMAP FONT – PIXELATION
Source: dafont.com
Terms of Use: Free for personal use only
Platform: PC/ MAC OS X

bitmap font

DOWNLOAD BITMAP FONT

9. BITMAP FONT – PERFECT DOS PIXEL
Source: bestflashanimationsite.com
Terms of use: Freeware
Platform: PC/ MAC OS X

bitmap font

DOWNLOAD BITMAP FONT

10. BITMAP FONT – ATTITUDE SO
Source: bestflashanimationsite.com
Terms of use: Freeware
Platform: PC/ MAC OS X

bitmap font

DOWNLOAD BITMAP FONT

11. BITMAP FONT – FFF HARMONY
Source: bestflashanimationsite.com
Terms of use: Freeware
Platform: PC/ MAC OS X

bitmap font

DOWNLOAD BITMAP FONT

12. BITMAP FONT – C&C Red Alert
Source: N3tRunn3r
Terms of use: Freeware
Platform: PC/ MAC OS X
Description: These 2 Command & Conquer: Red Alert Fonts look best in size 10. ZIP file includes the Internet Font and the LAN Font of C&C Red Alert.

bitmap font

DOWNLOAD BITMAP FONT

13. BITMAP FONT – SPORTSTER EB
Source: bestflashanimationsite.com
Terms of use: Freeware
Platform: PC/ MAC OS X

bitmap font

DOWNLOAD BITMAP FONT

Share and Enjoy:

  • StumbleUpon
  • Twitter
  • Mixx
  • Facebook
  • del.icio.us
  • Digg
  • Reddit
  • Yahoo! Buzz

8 Responses to “Bitmap Fonts You can Use for Web Projects”

  1. AliNo Gravatar on February 13th, 2009 at 12:02 am

    Thanks for providing the download links to all the fonts. i can understand the effort you had put in to gather all these . Thanks a lot.

  2. tobyctNo Gravatar on February 22nd, 2009 at 12:02 am

    Good post. I personally just use Silkscreen for very small type. Have used others but find this one works the best.

    Thanks

    T.

  3. boniponNo Gravatar on April 7th, 2009 at 1:35 am

    Some of the fonts you have given are not sized at 8px. Thats a difference.. Thanks anyway

  4. adminNo Gravatar on April 7th, 2009 at 7:54 am

    @bonipon – Pixel fonts also vary in sizes. :) and we just have to choose those fonts that fit our requirements. Thanks for the comment.

  5. adminNo Gravatar on April 7th, 2009 at 7:55 am

    @tobyct – my favorite also. Thanks.

  6. Reg ScannerNo Gravatar on February 19th, 2010 at 9:32 pm

    What a really very good post, thank you very much. I have stored this site to my personal favorites.

  7. Dale SpanfellnerNo Gravatar on March 7th, 2010 at 5:32 pm

    Great posting, thanks a lot!

  8. big brown eyesNo Gravatar on May 21st, 2010 at 5:36 pm

    Coca Cola spends tens of millions every year, even though it’s number one¡­ just building the brand.

Leave a Reply