SVG `text` and Small, Scalable, Accessible Typographic Designs

CSS-Tricks

SVG `text` and Small, Scalable, Accessible Typographic Designs

Let's say you designed something with custom fonts that was a little bit fancy. Perhaps a certain word is positioned between the ascenders of another word below it. Some text is kerned out below to match the width of that same word.

This is something we might tell a graphic designer switching from print to web to avoid. It's too finicky. Too much touchy, unscalable absolute positioning. Too much risk from different font rendering behavior.

But with inline SVG, we can do it, and do it well.

SVG <text>

The big "trick" here is that SVG has a <text> element that is just that: text. Not outlines of text, just regular ol' selectable, accessible web text.

<svg xmlns="http://www.w3.org/2000/svg"
     width="800px" height="300px" viewBox="0 0 800 300">

  <text x="25" y="55" 
        font-family="'Lucida Grande', sans-serif" 
        font-size="32">

    Regular ol' text here. Hi.

  </text>

</svg>

See.

<text> is happy to use custom fonts

Using @font-face and custom fonts on your site? No problem. That SVG is happy to use them. This works with inline SVG, where you can set font-family with CSS:

<text class="hook">Some Cool Text Yeah.</text>

.hook {
  font-family: "proxima-nova", sans-serif;
}

but it even works for SVG-as-<img> (or background-image, presumably) as well, as long as the font-family references the custom font by the right name.

<text x="25" y="55" 
        font-family="'proxima-nova', sans-serif" 
        font-size="32">

Use Design Software

I haven't tested a ton of different software, but Adobe Illustrator can "Save As" SVG. When you design with text elements, <text> is what you get in the .svg file.

You might have to do a little hand-tweaking to remove or adjust the font attributes/styles.

The beauty of this is that it takes away finicky task of positioning with CSS and lets you do it right in software that is awesome at it. Then the actual positioning happens with that matrix transform.

Scales Perfectly

If you were trying to replicate a design like this in just HTML/CSS. It's not just that the positioning is finicky to begin with, it's that it doesn't scale. Something like font-size: 41px; top: 37px; left: 81px; works only at one size. Perhaps you could do something with vw units and percentages and stuff, but it's just a lot easier in SVG.

In SVG, the font-size you set is relative to the size of the SVG itself, not the whole document. So if you adjust the size of the SVG (it can easily be fluid width), your typographic design stays perfectly intact.

A fluid width kinda setup:

<div class="ad-wrapper">
  <svg class="ad">
    <text ... />
    <text ... />
    <text ... />
  </svg>
</div>

/*div*/.ad-wrapper {
  height: 0;
  padding-top: 100%;
  position: relative;
}
/*svg*/.ad {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

Scales proportionately. Text is still selectable as normal.

Design with fonts you have on the web

This workflow works best if you can fart around in local software with the fonts that you also have available via @font-face. For instance, if you were working in Open Sans, you could download a copy of that for desktop use from Font Squirrel but then use it on the web via Google Fonts.

I think Typekit makes this workflow pretty nice, with their desktop syncing feature. When you're picking out fonts, you can add them to a Kit to use on the web, as well as sync locally via the Creative Cloud thingy.

Then they are available right in Illustrator.

It's a little funky because the font-family names will be a little off. For instance, you might get like

<text font-family="'MarketOT'">Example</text>

from Illustrator, but on the web it'll need to be like

<text font-family="ff-market-web, cursive">Example</text>

But hey that's just part of the job. Maybe there is a good reason for it. Maybe someday they can get those things in sync.

When to use

If you're using the same custom fonts elsewhere on the site, it's a no-brainer, go ahead and use <text> based designs as needed. If the fonts in use aren't used elsewhere, it might be a tall order to include an entire custom font just for use in a single graphic. Or perhaps not. You'll have to balance the options yourself.

In the example I've used here, I used Proxima Nova and FF Market from Typekit, and the Kit was about 115K. Not too bad if the rest of the site was using those fonts too. But then I converted the example to outlines (meaning <text> is out and <path>s are used instead to draw the letter shapes), and the file ballooned from an incredibly tiny 4K to an incredibly large 260K (bigger than the entire fonts, albeit unzipped).

I'm sure in some cases outlining makes good sense, and sometimes even a retina raster graphic works, assuming you take all the necessary accessibility steps (a good alt tag at a minimum).

Demo

Here's a demo that shows everything at work, including the scaling, selectability, and the custom fonts at work:

See the Pen SVG with example by Chris Coyier (@chriscoyier) on CodePen.

---

SVG `text` and Small, Scalable, Accessible Typographic Designs is a post from CSS-Tricks

more info...