SVG and Typography
by Fabio Arciniegas A. | Pages: 1, 2

Typical issues of Type and Color

This article won't go into a catalog of color combinations; for that purpose there are excellent swatchbooks (e.g. Krause's color index) and software (e.g. ColorImpact 2). The goal was to review how combinations are chosen and the terminology that will allow us to identify common issues and sort them confidently in our SVG practice (the terminology introduced here is used in all three parts of the article). Let's then review some of them:

Figure 4 Type Color Color and Spacing: More space between words makes a line of text seem lighter. The same goes for space between characters and words. This is usually needed when the color scheme does not offer much contrast (e.g. the blue neutral combination below). Some lesser-known CSS properties applicable to the text control this feature in SVG include:

• 'letter-spacing' indicates an amount of space that is to be added between text characters.
• 'word-spacing' indicates an amount of space that is to be added between text characters.

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="450" height="150" 
version="1.1">
<g style="font-family:Arial; font-size: 10pt;word-spacing: -2">
  <text x="20" y="20">
  I quickly wake up, there is confetti everywhere, </text>
  <text x="20" y="34">
  brief flashes of Ernesto Sabato Jr. talking to Linda:
  </text> 
  <text x="20" y="48">
  'honey, you're looking positively 
  <tspan style="text-decoration:bold">uma-esque</tspan>'
  </text>
  </g>

<g style="font-family:Arial; font-size: 10pt;word-spacing: 1;letter-spacing:.5"
  transform="translate(0,90)">
  <text x="20" y="20">
  I quickly wake up, there is confetti everywhere, </text>
  <text x="20" y="36">
  brief flashes of Ernesto Sabato Jr. talking to Linda:
  </text> 
  <text x="20" y="52">
  'honey, you're looking positively 
  <tspan style="text-decoration:bold">uma-esque</tspan>'
  </text>
  </g>

Listing 3 Spacing and Color

Smaller Type needs Higher Contrast: The smaller the type the higher the contrast you will need to make it legible. Avoid mixing small text with an analogous or neutral color schemes.

Liberal on Display, Conservative on Text: There are two basic categories of type, text and Display. Text type must be readable at small sizes and display the time-honored ideals of readability and elegance that you see in fonts like Bodoni or Times New Roman. On the other hand, display type (fonts like Shadow Tag) is often not concerned with legibility as much as it is with style and is not really intended for blocks of text. Using classic fonts and color palettes for text and limiting all those avant-garde experimental fonts and colors for display is a good heuristic.

Defaults: It is a well known design practice to have a set of default fonts/color combinations to work with. For example, Bodoni, Century Gothic, Garamond, and Bakerville are usually a good base for your serif needs (Arial, Futura, Helvetica and Franklin Gothic good sans serifs). Similarly, since SVG designs and GUIs usually comprise similar elements, it is a good idea to have defaults for recurrent elements like menus, tooltips, labels, and so on. The SVG below illustrates two of my personal defaults, as we delve into the other parts of this article we will grow this list to accommodate other UI elements and design strategies.

Labels

Avoid bold and other variations in labels. Assuming the label is part of a dialog or a larger UI, a good default for its background is pure white; or, if you want to give a less modern, yet acceptable look, use neutral gray (RGB 192,192,192). Use sans-serif fonts, preferably Tahoma. Always align labels to the right. If you want to use color for required types (as opposed to an icon or note) use red.

<text x="100" y="120" style="font-family:Tahoma; text-anchor:end; 
font-size:10;text-anchor:end; fill:#ff0000;">Zip Code:</text>
   

Tooltips

Tooltips are small and stay in the screen for very short spans of time, so you want to keep them as readable and high-contrast as possible. Use sans serif fonts, tints of yellow (or pure white) for their background

<rect x="47" y="58" width="50" height="16" 
  rx="4" ry="4" style="fill:#FEEFB8; stroke:black;"/>
  <text x="50" y="70" style="font-family:Arial; font-size:10;">16 
  Valves</text>

In-lined Emphasis: To add emphasis to a portion of the text, we may vary a number of attributes, like weight, color, italics, kerning, etc. To do so without having to calculate the start point of several pieces of <text>, we use the <tspan> element as shown in previous examples. Do not use underline for emphasis and prefer italics and subtle inter-word spacing to bold for emphasis.

Thin Strokes: Although most popular SVG viewers do a good job at anti-aliasing fonts, avoid using fonts with thin strokes if they are to be used in small sizes. Chances are some stokes will be lost on the resize. This goes double if you are using a color background.

Primary tints: When using a primary or secondary color scheme try to stay away from pure hues for background, especially for UI elements. Although not an iron rule, tints generally make for better backgrounds and enhance readability. Take for example the tooltip on the "favorites" list above.

Stretches: In SVG the total length occupied by the text can be specified using two attributes:

• textLength: determines the total length the glyphs and its intermingled spaces will take.
• lengthAdjust: determines whether the text is fit in the length by stretching only the space between glyphs or if the glyphs are stretched too. The two accepted values are spacing and spacingAndGlyphs.

There might be good exceptions, but in general, stretching or compressing glyphs looks gimmicky and amateurish. Avoid it.

Outlines: Not as dramatic a no-no as stretches, but still to be handled with care are outlines. Outlines are controlled via two CSS property:

• stroke: already used before in a number of occasions, this property when is applied to a text element means the outline color of the glyph.
• stroke-width: self-explanatory.

<g style="font-family:ITC Machine; font-size: 20pt; fill:#065188; stroke:#E4E9ED; 
  stroke-width:.5">
  <text x="22" y="190">The Merry Wives of Windsor</text>
  </g>

Don't be concerned if you don't see "shadowing" or some other favorite design trick in the above list. The above covers only the most common issues/strategies dealing with type and color; part III of this article will be devoted explicitly to a wider array of static design strategies implemented in SVG.

---

---

2. Vertical Align
   2009-10-20 11:29:12 Bugdoug
4. SVG Enabled Mozilla
   2004-04-26 12:40:11 HHHartley
• SVG Enabled Mozilla
  2004-04-26 15:11:45 Fabio Arciniegas
6. 
   2004-04-19 13:54:21 Erika
• Typographic Treatments
  2004-04-20 10:22:33 Fabio Arciniegas
• SVG filters
  2004-04-20 10:10:56 Sara_J_Porter