How To Use SVG Font Properties

Posted: 01 Dec 2015 05:30 AM PST

I've said throughout this series that SVG text gains the best of both worlds in that it's rendered as a graphic while still being selectable and searchable text.

So far, I've been focused in the "rendered as graphic" world. Today I want to talk more about the text side of things. I want to talk about how you can change the font of the text and set its weight and similar.

Much of what's in this post will likely be familiar to you in that you've set font-size as a CSS property. We'll look at these properties as attributes on SVG text elements here. You can think of this post as a review of what you can do with text in general and how to manipulate SVG text specifically.

SVG Font Selection Properties

SVG provides seven different font properties along with shorthand to set five of them. You're probably familiar with the five, though the other two are possibly new to you. They were for me.

Here's the list of all the font properties you can use with SVG. You can use any of them as attributes on the <text> or <tspan> elements. You can also set them as CSS properties, though I'll be using them as attributes throughout this post.

font-family
font-style
font-variant
font-weight
font-size
font-size-adjust
font-stretch
font

The font shorthand is only available as a CSS property and can't be used as an attribute on SVG elements. One thing to note when using it with SVG is the line-height has no effect. With SVG it's assumed to the the same as the font-size.

I trust you know how to work with the first five properties and have used them before in stylesheets. I'll show you a quick example that uses all five and then we can talk in a little more depth about font-size-adjust and font-stretch.

In the following example I repeated the text "SVG" four times, each time using a different font-family. I also adjusted an additional font property on each so you can that they work.

1  2  3  4  5  6

<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">      <text x="130" y="100" font-family="Palatino" font-variant="small-caps">svg</text>      <text x="230" y="100" font-family="Helvetica" font-style="italic">SVG</text>      <text x="330" y="100" font-family="Georgia" font-weight="bold">SVG</text>      <text x="430" y="100" font-family="Verdana" font-size="1.5em">SVG</text>    </svg>

The font-families in order are Palatino (font-variant), Helvetica (font-style), Georgia (font-weight), and Verdana (font-size). In parenthesis is the property I adjusted for each. I set the first in lowercase, because I chose a value of small-caps for the font-variant and it's easier to notice the difference this way.

Again, while you could set all these properties in a CSS file, here they're all set as attributes on the <text> element.

I'm assuming you don't need any more explanation about this example and may not even have needed me to show it. Let's move on to the properties you may not be familiar with.

The font-stretch Property

The font-stretch property allows you to adjust how much the glyphs are expanded or condensed. It's done by having the browser choose the appropriate face from a family of fonts.

Browser support is currently limited to Internet Explorer, Edge, and Firefox and while you may never have used it, font-stretch is a valid CSS property with the following possible values.

normal
wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
inherit

You might think the property does exactly what it says and stretches or condenses whatever font you're using, but that's not quite right.

The font-stretch property is meant for fonts that come with several faces and it substitutes the best face based on the value set on the property.

I think this will make more sense with an example. Here I set three lines of text and for each I used the font Myriad Pro. I chose Myriad Pro, because it included a condensed version. I set the font-stretch property on the second line of text to condensed and the third line to expanded.

1  2  3  4  5

<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">       <text x="120" y="80" font-family="myriad pro">This text is Myriad Pro</text>       <text x="120" y="120" font-family="myriad pro" font-stretch="condensed">This text is Myriad Pro condensed</text>       <text x="120" y="160" font-family="myriad pro" font-stretch="expanded">This text is Myriad Pro expanded</text>    </svg>

Because this only works in a few browsers and because you may or may not have Myriad Pro installed on your computer, I'm showing a screenshot of the results when I viewed the code in Firefox.

Let me explain what's going on. The first line of text doesn't have a font-stretch property set so you see the normal font-face. The second line of text is set as condensed so Firefox substituted the condensed face of the font. The third line is set to expanded. Since I don't have an expanded version of Myriad Pro, Firefox used the normal face.

I hope that makes sense. The idea is that supporting browsers choose the best face of the specific font based on the value of font-stretch and the available faces of the specific font.

The font-size-adjust Property

Hopefully when you set font-families on HTML elements you use a font-stack in case someone viewing the page doesn't have your first choice installed.

The downside is that different fonts have different x-heights and if the second choice in the stack is used, it might throw off the font-size and consequently throw off any measurements you've based on that font-size.

This happens because all fonts have an "aspect value," which is the difference in size between the lowercase x and uppercase X of that font. The font-size-adjust property allows you to change the aspect value so the different fonts will display at the same size.

Again support is limited, this time to Firefox only and as with font-stretch, I think this will make more sense with an example

Here I have two lines of SVG text each with two <text> elements. On each line Baskerville is the font on the left and Futura is the font on the right. I placed lowercase x's in the middle so you can better compare the different sizes of the same letter.

1  2  3  4  5  6

<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">      <text x="120" y="100" font-family="baskerville">Baskerville xx</text>      <text x="300" y="100" font-family="futura">xx Futura</text>      <text x="120" y="130" font-family="baskerville">Baskerville xx</text>      <text x="300" y="130" font-family="futura" font-size-adjust="0.42">xx Futura</text>    </svg>

Due to the lack of browser support I'll again show a screenshot instead of the live code. On the first line of text I didn't set the font-size-adjust property. This is the control group. You can see that Futura has a larger x-height than Baskerville.

On the second line I set the font-size-adjust of Futura only to 0.42. You can see it now has a smaller x-height. I tried to make the x-heights of both equal, though it's possible I'm off a bit. Even if I am, I hope it's clear what happened.

Closing Thoughts

I suspect much of this post has been a review. Something tells me you've used most of these font properties before, but as CSS properties and not as attributes on SVG elements. I trust you're now aware they can be used as attributes.

The two properties that might have been new to you are font-stretch and font-size-adjust. Neither has much support at the moment so you probably won't be using them right away, but hopefully you'll know how when support is better.

My goal with this post was to show you that SVG text is text and the same font properties you often set on regular text will work with SVG text too.

Next week I want to continue to look at SVG text as text and talk about the spacing properties SVG provides. We'll look at word-spacing and letter-spacing and a couple of other properties as well.

Download a free sample from my book Design Fundamentals.

The post How To Use SVG Font Properties appeared first on Vanseo Design.