Specific case, webfont or bitmaps

Question

I'm making a html5 canvas app and I'll be using a pixel art font, that will be always the same size (maybe additional size for mobile devices). I only need uppercase, some basic punctuation and numbers, total of 50 symbols.

I tried converting this font I have with cufon http://cufon.shoqolate.com/generate/ , but it scales really bad. It gets pretty blurry or distorted. It would do eventually, but it is not perfect.

So I was thinking, since I am using canvas, if I should just use a spritesheet with all the letters and symbols since there is such a small number of them in my case and make a script that would just display every string of text on screen using those letter sprites.

Would this solution hurt performance very much?

I was thinking also if it is possible to change the default size of the font. I noticed that there is a certain size of every font not made for web, where it is displayed perfectly in a web browser. When I resize, it starts to distort. Is it possible to somehow change it?

Answer 1

If you want distortion free scaling, convert your font to SVG.

Normal fonts are raster drawings...composed of fixed pixels that scale badly.

SVG is vector drawing...composed of lines+curves that scale very well.

You can use your SVG fonts directly in browsers except in Firefox and IE.

For those 2 browsers, you will have to learn a little about embedding SVG in your document--it's not that hard. You can build a text factory that builds text-output using the SVG glyph data.

Here is a website that will convert TTF fonts into their SVG glyphs:

http://www.freefontconverter.com/

Good luck with your project!