Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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?

share|improve this question
add comment

7 Answers 7

up vote 4 down vote accepted

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.

share|improve this answer
add comment

Try Inkscape - it's an open source alternative to Illustrator. I haven't used it much myself, but it began as an SVG editor, so converting text to paths and saving as SVG should be easy.

http://inkscape.org/

share|improve this answer
1  
Inkscape is an impressive piece of software. It's UI isn't as polished as AI, but it's feature set is quite robust and I find many of its drawing tools much more akin to FreeHand, which I had always preferred over AI anyways. –  DA01 Aug 18 '11 at 15:11
add comment

Inkscape certainly converts fonts to paths (Select, then Shift-Ctrl-C).

The standard save format is SVG - either 'Inkscape' (extended) SVG or 'plain' SVG.

It also has an SVG Font Editor.

BTW - I'm assuming this CSS was no good to you:

<span style="letter-spacing: 5px">Kerning</span>
share|improve this answer
add comment

Inkscape is actually better at SVG than Illy. Illy does funny things when saving as SVG, basically does not respect SVG specifications. Use Illy for AI, but Inkscape is a better choice if you have SVG compliance in mind.

share|improve this answer
add comment

As stated, Inkscape is the tool to go with. But note that an SVG image isn't text anymore. While that's fine for an illustrative type display, you're likely going to want actual text on your site for SEO and accessibility reasons.

Have you looked into using CSS webfonts? That might be an acceptable compromise.

share|improve this answer
add comment

Here's another program that works great with SVGs: iDraw on the Apple Mac/App Store.

share|improve this answer
    
Hi Dude (:P)! Welcome to GD. Thanks for adding an answer. It would be great if you could explain why you think this program is good for what's being asked (why do you prefer over others?). That way users don't have to go to the page to understand what the program does, and the answer is more complete. –  Yisela Feb 27 '13 at 21:25
add comment

If you have Photoshop CC, you can have a look at Photoshop SVG Exporter, it is a Photoshop SVG plugin: http://www.layerhero.com/photoshop-svg-exporter/

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.