Design Challenges

The design of diacritical marks, and their seamless integration into the typeface, 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 the 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 Vietnamese typeface. 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 below, 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 type.

Directions
Adobe Text Pro (top) has accents on the right side. Baskerville (middle) has accents on either side. Times New Roman (bottom) 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 example below, the words Bất đồng (“divergent”) have accents crashing into each other when set in Palatino (bottom). The results are jarring and distracting; therefore, collision in accents should be avoided. In particular, type designers need to pay close attention to the grave (dấu huyền). When positioned on the left of the circumflex ( ˆ ), the grave might crash into the preceding letter, like đ or T.

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 example below, 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 Pro, set with loose kerning (above) and without (below)

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 clear and strong. In the example below, the words Tuổi đá buồn (“Stone’s age of despair”) are set in Garamond Premier Pro (top) with the diacritical marks that were carefully crafted to match the weight and the size of the letters. On the other hand, the bottom illustration has hacked marks with incorrect proportions.

Size & weight
Garamond Premier Pro, with original diacritics (above) and modified (below)

Harmony

Because diacritics are critical in Vietnamese, they need to be decipherable by themselves as well as coherent with the letters. In the example below, the words Hãy cố chờ (“Let’s keep waiting”) are set in Arno Pro (top), which has calligraphic features that are in harmony between letter strokes and accents. In comparison, Arial (bottom) has even contrast and little harmonization between its letters and accents. As a result, Arno Pro has much higher legibility than Arial.

Harmony
Arno Pro (above) has clear contrast and stylistic harmony. Arial (below) has even contrast and little harmony.

Capitals

Accented capitals pose a challenge for leading. For capital letters and diacritical marks to work together, type designers need to modify the accents, letters, or both. Reshaping the letters is a daunting task; therefore, adjusting the accents is an easier approach. 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. In the example below, the words Để gió cuốn đi (“Gone with the wind”) are set in Open Sans (top), which has clear accents with generous space given to the capitals. Arial (bottom), on the other hand, has distorted accents with tight space. As a result, Open Sans is a more legible typeface for capitals.

Capitals
Open Sans (above) has clear, legible accents. Arial (below) has distorted, illegible accents.

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.

dotted i
Garamond Premier Pro, with modification to include the dot (above) and with original setting (below)