How to create SVG for good typography on the web without buying Illustrator?

I have a web font which I would like to display using SVG instead of in HTML. The reason for this is that I want to display large typographically beautiful text, and I don’t see any way of getting the control of Kerning that I need with HTML/CSS rendered text.

I own the font (or it’s free, rather) and it would be easy to display it as a bitmap and be done with it – but it is very large, and I’m trying to get the whole page to load in under half a second, so I believe SVG is my answer.

I own Photoshop, but do not have any budget for Illustrator. Though, I guess I could use the trial short term – it would be nice to be able to edit and and make changes a month out from now. Are there any vector tools which would meet my need, simply to create SVG from text so I could manually adjust the kerning to display on the web?

Answer

Try Kern.js. which is based on Lettering.js (both jQuery plugins):

http://www.kernjs.com/

http://letteringjs.com/

That would hopefully give you kerning control without sacrificing SEO and accessibility.

Update:

I just found out about kerning.js, which may offer even more control than Kern.js:

http://endtwist.github.com/kerning.js/

Also based on Lettering.js.

Attribution
Source : Link , Question Author : Subcreation , Answer Author : Philip Regan

Leave a Comment