Việt Type 2nd ed. Trương Support
Việtnamese Typography Second Edition Donny Trương Support This Book

Design Challenges

Diacritics are marks placed above, below or through the letter, and they change the pronunciation of the respective character.

Maja Turčić, Antun Koren, Vesna Uglješić, and Ivan Rajković

The design of diacritical marks, and their seamless integration with the letters, is crucial in making Vietnamese writing clear and legible. The marks must be consistent in the entire font system to create uninterrupted flow of text. The strokes of the marks have to work well with the base letters to help readers determine the meaning of words. They must not get in the way of the base letter and collide with adjacent letters. Considering balance, harmony, space, position, placement, contrast, size, and weight, designers must overcome each challenge to create a successful typeface for Vietnamese. The examples in this chapter serve as references for designers to avoid pitfalls when creating Vietnamese letters.

Position

The position of diacritical marks can vary. As illustrated here, accents can be placed on the right side of the circumflex, on either side (usually the acute, dấu sắc, on the right and the grave, dấu huyền, on the left), or on the top. Accents on the right are ideal for consistency and the natural flow of text. Accents on either side are more distinguishable, but might slow down the process of saccades. Accents on the top are more balanced, but might affect the leading. For the ease and comfort of reading, accents (and the hook above, dấu hỏi) on the right are recommended, but type designers should choose the positions that best fit their design.

Directions
Minion 3 (top), designed by Robert Slimbach, has accents on the right side. Spetral (middle), by Production Type, has accents on either side. Vollkorn (bottom), designed by Friedrich Althausen, has accents on the top.

Avoid Collision

The diacritical marks must not collide with adjacent letters. The accents must appear balanced with their base letters as well as letters next to them. In the following example, the acute (dấu sắc) crashed into the letter t and the grave (dấu huyền) crashed into the letter đ in Palatino (bottom). The results are jarring and distracting; therefore, collision in accents must be avoided, which Noto Serif (top) has accomplished.

Bất đồng
Noto Serif (above) has cleared accents. Palatino (below) has collided accents.

Kerning

To avoid collisions, letters with accents need some spacing adjustments. The key is not only to balance between the letters, but also the diacritical marks. The letters and the diacritical marks need to be in harmony as a whole. In the following example, the vowels with the grave accent (above) are loosely kerned to prevent touching their preceding uppercase letters and to work together as a unit to form a word.

kerning
Garamond Premier, designed by Robert Slimbach, sets with loose kerning (above) and without (below).

Kerning Horns

If the length of the horn on the letter U is too wide, it can effect the spacing with the next letter. With diagonal letters in particular, the gap between the letters (Ư and T) can be as large as a word space if the letters are cleared of each other. On the other hand, tightened up the kerning can obscure part of the critical element of the U-horn. Shortening the length of the U-horn is preffered over the overlapping of the two letters.

kerning
Source Sans (top), designed by Paul D. Hunt, handles the space between ƯT and ƠT better than Roboto (bottom), designed by Christian Robertson.

Pairing Horns

In Vietnamese words, the letter ư and ơ often go together as a pair: ươ. Here are a few examples: Trương (my last name), trường (school), thương (love), tương (soybean), trước (before), sương (dew), chương (chapter), phương hướng (direction), xương sường (rib), and tưởng tượng (imagine). As a result, the design and placement of the horn on both letters should be as consistent as possible. The shape of the horns on both ư and ơ should be similar. They should also have the same height.

Pairing Horns
IBM Plex Sans (top left), designed by Mike Abbink and Bold Monday, has horns that are similar in shape and consistent in height. Acumin (bottom left) has horns that are similar in shape, but inconsistent in height. Noto Serif (top right), by Google, has horns that are similar in shape, but slightly inconsistent in height. Baskerville (bottom right, designed by John Baskerville, has horns with inconsistent shapes and heights.

Size & Weight

In Vietnamese, diacritics play an important role in marking tones—without them, meaning can be miscommunicated. Therefore, the size and weight of diacritical marks need to be seamlessly integrated into the typeface. Tone marks need to be as clear and as strong as their base letters.

Size & weight
Paytone One, designed by Vernon Adams, has sturdy and striking diacritical marks. Roboto, designed by Christian Robertson, has odd size and position at black weight.

Harmony

Because diacritics are critical in Vietnamese, they need to be decipherable by themselves as well as coherent with the letters. The size, shape, and weight of the accents must balance with their base letters. The space between the base glyphs and the diacritics must be proportional and consistent. For example, Arno, designed by Robert Slimbach, has calligraphic features that are in harmony between letter strokes and accents. The diacritical marks were designed to be part of the letters.

Harmony
Arno (above), designed by Robert Slimbach, has clear contrast and stylistic harmony.

Capitals

Accented capitals pose a challenge for leading because of the limit of space. For capital letters and diacritical marks to work together, type designers need to modify the accents, letters, or both. The size and weight of the accents must balance the base letter. Reshaping the letters is a daunting task; therefore, adjusting the accents is an easier solution. The accents and their angle can be reduced to accommodate the letters. The space between accents and capitals can also be closer together, but they must not touch. Attaching the accents to the capitals reduces legibility.

Capitals
Bild (above), designed by David Jonathan Ross has legible accents. Arial (below), designed by Robin Nicholas and Patricia Saunders, has distorted accents on uppercase letters.

Dotted i

Accented or not, the lowercase i is supposed to preserve its dot and diacritical marks need to be placed above it. In most digital fonts (if not all), however, the lowercase i drops its dot when accented. Although the dotless i with accent is technically incorrect, it doesn’t affect legibility as long as the diacritical mark is discernible. Furthermore, the accent combined with the dotless i behaves like a ligature and it doesn’t interfere with leading. Because native readers are accustomed to the dotless i, preserving the dot on the accented letter i is unnecessary.

dotted i
Playfair, designed by Claus Eggers Sørensen, with modification to include the dot (below) and with original setting (above)