Sign In/My Account | View Cart  
advertisement


Listen Print Discuss

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.

Comment on this articleGot a question or a comment? Share it in our forum.
(* You must be a member of XML.com to use this feature.)
Comment on this Article

Titles Only Titles Only Newest First
  • Vertical Align
    2009-10-20 11:29:12 Bugdoug [Reply]

    I am not sure if you would be able to assist with this or not. I utilize SVG to create print artwork through an online ordering system. We use the combination of database fields and a standard html form to create a online variable data template that the user can input information and then generate a real time proof on screen. We then create a final file that we process through Adobe Illustrator in order to print the file. (This is a very brief summary of the process.)


    I am having an issue with one particular clients business card template. I am trying to get the text within a text span to justify to the bottom. Basically, if the end user doesn't enter data into a field, the tspan will close and the other tspans below will move up to take the place of the previous tspan. I am able to do this using dy coordinates on the tspans. I would like to be able to have the tspans move down rather than up (default). I have searched and searched and tried many different things but I cannot seem to find a solution that will work with the Adobe SVG viewer. I can send an example if needed. Any advise? (Please let me know if this isn't an appropriate post for this article.) Thanks!

  • SVG Enabled Mozilla
    2004-04-26 12:40:11 HHHartley [Reply]

    You appear to have coded your SVG examples so that they require the Adobe SVG Plug-In. It would be nice if you set them up so that those of us with native SVG support in Mozilla could see them. It seems sort of silly for me to have to install a plug-in when the browser can handle the format natively.


    --
    HHH

    • SVG Enabled Mozilla
      2004-04-26 15:11:45 Fabio Arciniegas [Reply]

      Thank you for your comment, Hart.


      Let me start by saying I applaud the efforts of the SVG mozilla project, it is a lot of work and they are making a great go at it.


      There are several issues, however, that prevent us from making pages that exploit current SVG mozilla instead of relying on the Adobe Plugin:


      1. Availability. only some mozilla versions have SVG support (e.g. I just tried downloading mozilla 1.6 for windows)


      2. Embedding mechanisms. The efficacy and presentation of available embedding mechanisms other than the one used varies widely from browser to browser. One of my favorite Mozilla-Specific sites http://www.skeeter-s.com/svg/ displays some of the issues and some history on the matter.


      3. Implementation Status. Finally and most importantly, the current feature set of Mozilla's SVG (4/26/04) is less developed than that of Adobe's plugin, and in particular lacks some of the features I use in this and other articles. This is by no means a criticism of the Mozilla SVG team, is just a reflection of the fact that implementing a big specification takes time. Below [1] you will find the first paragraph from the Status page of Mozilla SVG (http://www.mozilla.org/projects/svg/) as of 4/26/04.


      I hope this answers your question,
      Fabio



      [1]
      " While we are still a long way away from full SVG support, the subset currently implemented is already pretty useable. We have support for all basic shapes including beziers, stroking and filling with opacity and much of the DOM.


      Big areas of the SVG specification where we're still lacking include clipping, filters and declarative animations. "






  • 2004-04-19 13:54:21 Erika [Reply]

    Very informative. The kind of information that us SVG enthusiasts need!
    One thing that I am missing in SVG from Photoshop is layer decorations such as shadows and outlines. How do I make that in SVG?


    • Typographic Treatments
      2004-04-20 10:22:33 Fabio Arciniegas [Reply]

      Erika, Thank you for your kind note and your question.


      Using filters you can create most of the classic typographic treatments like shadows, blur, bevel, emboss, all in the declarative style of SVG.


      Part 3 of this article is devoted exclusively to giving a cookbook of such techniques, so stay tuned.


      In the meantime, just because you asked about shadows, let me provide a little teaser (copy paste this SVG into a file):


      <?xml version="1.0"?>
      <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" version="1.1">
      <defs>
      <filter id="dropShadow" x="0" y="0" width="150" height="150">
      <feOffset in="SourceGraphic" dx="0" dy="0" result="topCopy"/>
      <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="shadow"/>
      <feOffset in="shadow" dx="3" dy="3" result="movedShadow"/>
      <feMerge>
      <feMergeNode in="topCopy"/>
      <feMergeNode in="movedShadow"/>
      </feMerge>
      </filter>
      </defs>



      <g filter="url(#dropShadow)" >


      <text x="10" y="45"
      style="font-family:Verdana; font-size: 20pt; fill:green;">Shadows</text>
      <text x="10" y="65"
      style="font-family:Verdana; font-size: 20pt; fill:green;">and</text>
      <text x="10" y="85"
      style="font-family:Verdana; font-size: 20pt; fill:green;">Tall Trees</text>
      </g>


      </svg>

    • SVG filters
      2004-04-20 10:10:56 Sara_J_Porter [Reply]

      SVG, as it is vector, doesn't really have the exact same qualities as raster images. The filter effects in Photoshop (like drop shadow) are done with SVG filters. If you Google "SVG + Filters" you'll come up with many web pages showing good examples. I found a great page on Adobe's site (who else?) at http://www.adobe.com/svg/demos/samples.html


      Also, Illustrator (9, 10 and CS) has SVG filters, but they are actually under the /Effects /SVG filters (as they don't permanently change the artwork under them).


      Sara Porter
      Purdue University