SVG and Typography
Editor's Note: SVG is back in style on XML. Fabio Arciniegas and Antoine Quint will be covering typography, video and mobile topics over the coming weeks.
Mixing the worlds of documents, programming, and visual design is a familiar experience for XML developers, especially when dealing with presentation technologies like SVG. Such mixtures can produce exciting new representations of information. They can also become ugly messes if one fails to learn the relevant aesthetic and design principles.
 |
| Fig.1 Type can be essential for Charts, Diagrams, and GUIs, as well as for Artistic Works |
One aspect that you want to get a good grasp on, if you work with SVG, is typography. Few things have its power to make or break a visual work. The goal of this article is to review key ideas about typography so that you can use it effectively, either by applying the rules in visual explanations and GUIs or by bending the rules in your artistic output (Fig.1.)
This article is divided in four parts, each corresponding to a particular area of the combination of SVG and typography:
Foundations and Character Treatment
Position, Alignment, Direction, Colors, Fonts
Character Treatment
Hyphens, Quotations, Spaces,
Symbols, Ligatures, Non-Latin characters
Static Design Strategies implemented on SVG
Crop,
Backward/Forward, Blur, Contour, Crowd, Contrast Weight, Gradation, Highlight,
Path, Outline, Overlap, Repeat, Reverse, Shadow, Tilt
Dynamic Presentation Strategies implemented on SVG
Fade ins, Color Tweening, Scrolling, Type Effect, Bounce, Animate through contour,Size Transitions,
Menus, Montage.
Before we begin, please make sure you have the Adobe SVG plug in installed, as most images from this point on are SVG.
Foundations
Using the text element, its attributes, and CSS
styling one can position and format glyphs in SVG in the ways one
has come to expect in desktop graphics. The following sections
outline the basics and the particular features SVG offers for their
treatment.
Positioning, Alignment, Direction
Positioning of text in SVG appears quite obvious: The two
attributes x and y determine the position of
the text:
<text x="44" y="62">Hello World</text>
Position
That's only the beginning of the story. The first thing to point
out is that the values accepted by x and y
are lists of points, not necessarily single values. Positioning,
therefore, is not restricted to just one value for the beginning of
the text but can be specified independently for each glyph of the
text, as illustrated in the billboard of Listing 1:
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="350"
height="155" version="1.1">
<rect x="1" y="1" width="320"
height="130"
style="fill:#008683; stroke:black;"/>
<g style="font-family:Beachman Script; font-size: 36pt; fill:#D5E9D7">
<text x="22 47" y="62 65">TheMerryWives</text>
<text x="150" y="100">ofWindsor</text>
</g>
</svg>Listing 1 Positioning
Fig 2. Merrywives.svg
For the sake of a less monotonous appearance, in Listing 1 we have
specified that the first glyph of the string "The Merry
Wives" is positioned a little higher, at
coordinates (22,62); after that, we have specified that
the next glyph will be positioned at (47,65). The
remaining glyphs, since they are not explicitly positioned, are
automatically rendered sequentially according to the left-to-right
default writing.
Alignment and Direction
As usual, knowing one more answer creates two more questions. What
part of the glyph is exactly being positioned
at (22,62)? what other options for direction, apart
from left-to-right, are available?
The position specified by the coordinates refers to the alignment-point of the glyph (Figure 3). What the alignment point is depends both on the font you are using and some SVG parameters. When dealing with Latin characters, the alignment point is by default the intersection of the left-most point of the glyph and the baseline.
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220"
version="1.1">
<rect x="1" y="20" width="220"
height="220" style="fill:black;"/>
<text x="20" y="120" style="font-family:Arial;
font-size: 42pt; fill:white;">TVC15</text>
<line x1="20" x2="20" y1="0" y2="220"
style="fill:white"/>
<line x1="0" x2="220" y1="120" y2="120"
style="fill:white"/>
<circle cx="20" cy="120" r="2" style="fill:white"/>
</svg>Fig 3. AlignmentPoint.svg
Writing "left to right, with left anchoring, aligning to the baseline" (i.e. the default Latin way) is not the only option possible. The rendering of glyphs can altered by specifying the direction of writing, the anchoring, and the alignment baseline. These other three SVG features complete our basic picture of positioning, alignment, and direction; they are illustrated in the code and graphic below (Fig 4):
The "text-anchor" property is used to align a string
start, middle, or end to the specified point. The reason for these
names (as opposed to "horizontal left-, middle-,
right-alignment") is that they must serve also for characters
that are displayed top to bottom, in which case the start is the top
and the end is the bottom. The possible values are start |
middle | end | inherit.
The "writing-mode" property controls the initial
direction of the text. It is controlled by three logical directions:
left to right, right to left, or top to bottom. The actual possible
values for this property are: lr-tb | rl-tb | tb-rl | lr | rl |
tb . We will revisit this and other properties
like glyph-orientation-horizontal in the light of
internationalization in the next section.
Finally, the "alignment-baseline" property is used to determine
the vertical alignment of the text with respect to its parent; for
example, it can be used to align text by its middle points. The
possible values are auto | baseline | before-edge |
text-before-edge | middle | central | after-edge | text-after-edge |
ideographic | alphabetic | hanging | mathematical. Since a
thorough discussion of all the options is too long for this article,
let me just point to the appropriate SVG
specification section. The key point, however, is to know that you
can escape the baseline as the vertical alignment for a text
chunk. Another useful property for these purposes
is baseline-shift; its possible values are baseline
| sub | super | <percentage> | <length> | inherit.
Position, Direction, Anchoring
Let's look at some examples.
| Fig 4. AlignmentPoint.svg |
- Baseline shifts are used often in scientific notations to denote
super and subscript. Note the use of the tspan element. Like its HTML
counterpart,
span, this element temporarily overrides styling properties on the text. In this case we use it to write the superscripts (baseline-shift:super) without having to create a new text element, calculating by hand its position point. - Widget labels in GUIs are right aligned (
anchor: end). This prevents their different lengths from translating into a visual mess. - Writing Latin characters from top to bottom
(
writing-mode:tb) is not unusual in tables and charts when horizontal space is scarce. Note that in the code for Fig. 4 (listing 2) we also usealignment-baseline:middleto center the horizontal labels on a very tight space.
The code for Figure 4 is included here, in listing 2:
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="450" height="450">
<!-- WRITING MODE TOP TO BOTTOM EXAMPLE -->
<g>
<line x1="30" y1="120" x2="30" y2="240"/>
<text x="40" y="170" style="writing-mode:tb">March
10</text>
<line x1="50" y1="120" x2="50" y2="240"/>
<text x="60" y="170" style="writing-mode:tb">March
11</text>
<line x1="70" y1="120" x2="70" y2="240"/>
<text x="80" y="170" style="writing-mode:tb">March
12</text>
<line x1="90" y1="120" x2="90" y2="240"/>
<text x="100" y="170" style="writing-mode:tb">March
13</text>
<line x1="110" y1="120" x2="110" y2="240"/>
<line x1="20" y1="165" x2="170" y2="165"/>
<text x="115" y="165" style="alignment-baseline:middle;
font-size:10">Defect 21 Fixed (Networking)</text>
<line x1="20" y1="155" x2="170" y2="155"/>
<text x="115" y="155" style="alignment-baseline:middle;
font-size:10">Defect 22 Fixed (COM)</text>
<line x1="20" y1="145" x2="170" y2="145"/>
<text x="115" y="145" style="alignment-baseline:middle;
font-size:10">Defect 23 Fixed (GUI) </text>
<line x1="20" y1="135" x2="170" y2="135"/>
<text x="115" y="135" style="alignment-baseline:middle;
font-size:10">Defect 24 Fixed (GUI) </text>
<line x1="20" y1="125" x2="170" y2="125"/>
<text x="115" y="125" style="alignment-baseline:middle;
font-size:10">etc.</text>
<circle cx="40" cy="160" r="2"/>
<circle cx="80" cy="140" r="2"/>
<circle cx="100" cy="150" r="2"/>
<circle cx="100" cy="130" r="2"/>
</g>
<!-- LABELS ALIGNED TO THE LEFT EXAMPLE -->
<g>
<text x="100" y="80" style="text-anchor:end; font-size:10">Name:</text>
<text x="103" y="80" style="font-size:10;font-style:
italic">Jean Cocteau</text>
<text x="100" y="90" style="text-anchor:end; font-size:10">Email
Address:</text>
<text x="103" y="90" style="font-size:10;font-style:
italic">jean@filmcocteau.com</text>
</g>
<!-- SUPERSCRIPT EXAMPLE -->
<g>
<text x="80" y="50" style="font-size:10">y=x<tspan
style="baseline-shift:super">2</tspan>+z
<tspan style="baseline-shift:super">42n</tspan></text>
</g>
</svg>
Other aspects of position and direction, including bidirectionality, will be discussed in the internationalization section.
Fonts and Colors
It is no secret that by varying the
colors and fonts in a GUI, a poster, or any other graphic you can
dramatically affect the message it contains. Consider Figure 3. By
changing the fonts and colors used, it can easily appear as an
invitation for the Shakespeare play, a really cool name for a soccer
league, or even the title of some questionable DVD.
The cultural implications of our font and color choices are only one aspect illustrated by this example. Another visible issue is readability. Both the fonts used and the contrast provided by the colors chosen will affect the readability of the text, making it even more important to understand the principles and common practices.
A Bit of Color Theory
Since there are whole books written about color theory, the goal here is not to go through it all, but to understand the basic terminology and the notion of color schemes, that is, the strategies to come up with good color combinations. Armed with that knowledge we can discuss some time-honored strategies for combinations of type and color and discover an infinite amount of color combinations in a sound way.
Ever since Newton first arranged colors in a circle in 1666, there has been discussion about the best way to arrange color wheels. Several kinds of color wheel exist, including those based on red, blue, and green, the additive primaries (i.e., visual wheels), and some based on red, blue, and yellow (mixing wheels).
For our purposes, the classic 12-hued wheel developed by Johannes Itten at the Bauhaus (left) seems appropriate. After all, although we are used to RGB codes, it is a bit more obvious to say "yellow and red produce orange" than to say "the difference between yellow and orange is the average of their green components".
The SVG graph below shows Itten's mixing wheel (click on "play animation" for some SVG family fun). The primary hues are red, yellow, and blue. The secondary hues are obtained by mixing two primaries; the result are violet, orange, and green. Finally, the tertiary hues are made by mixing a secondary and an adjacent primary.
Color Schemes
Using the wheel we can talk about strategies for picking colors or color schemes. For example, complimentary colors are located opposite to each other in the wheel, like orange and blue. Normally, it is not a good idea to use complimentary colors for digital type because of their diminished legibility; complimentary vibrant colors like red and green will compete for the eye and become tiresome over long texts.
Some other color schemes include:
|
Primary, Secondary, Tertiary. As color schemes, these names refer to any combination of their respective set of hues. For example, a secondary scheme is any combination of secondary hues, i.e. orange, violet, and green. |
|
Monochromatic: A color scheme with various tones of a single hue. A tone is the result of mixing a hue with white or black. A color with added white is a tint, a color with added black is a shade |
 |
Analogous: Colors that are adjacent to each other on the color wheel. |
|
Neutral: Combination of different tones of a single hue. |
|
Split complementary: Combination of a hue and two hues adjacent to its complement. |
Pages: 1, 2 |
