School of Art at George Mason University
… be continued for section 3:
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.
The position of the diacritical marks can vary. As illustrated here, accents can be placed on the right side of a circumflex, on either side (usually an acute on the right and a grave 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 (including a hook above) positioned consistently on the right are recommended, but type designers should choose the positions that best fit their design.
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, an acute (dấu sắc) crashed into the letter t and a 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.
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 graves (above) are loosely kerned to prevent touching their preceding uppercase letters and to work together as a unit to form a word.
If the length of a 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.
In Vietnamese words, the letter ư and the letter ơ 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 the placement of the horns on both letters should be as consistent as possible. Their shapes should be similar. They should also have the same height.
SIZE AND 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. Tone marks need to be as clear and as strong as their base letters.
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.
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 touched. Attaching the accents to the capitals reduces legibility.
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 the leading. Because native readers are accustomed to the dotless i, preserving the dot on the accented letter i is unnecessary.
The purpose for this guide is to collect and showcase typefaces with full support for Vietnamese. Although display typefaces contribute an important role in Vietnamese typography, the design of their diacritics can be playful and experimental. The focus, therefore, is on text setting. Each typeface has been chosen based on flexibility, legibility, readability, and versatility of both the letters and their diacritical marks.
For close analysis, I have created a standard specimen that highlights all the Vietnamese typographic features. For the second edition, I introduced a five-star rating system to evaluate the design of the diacritics. The rating is based on how well the accents are related to their base letters. Are they part of the typographic system? Are they strong, clear, and discernible? Do they improve or hinder readability?
My recommendations are limited to my access to fonts, but I will continue to add more as I acquire them. My thanks to the following type foundries for provided me their typefaces to be used on this site: Darden Studio, DJR, Huerta Tipográfica, Kilotype, Juanjo López, Rosetta, and TypeTogether.
… continue in section 5 …
BAN TU THU
1: About the author: Donny Trương is a designer with a passion for typography and the web. He received his master of arts in graphic design from the School of Art at George Mason University. He is also the author of Professional Web Typography.
◊ Bold words and sepia images has been set by Ban Tu Thu – thanhdiavietnamhoc.com
◊ A brief HISTORY of VIETNAMESE WRITING – Section 1
◊ A brief HISTORY of VIETNAMESE WRITING – Section 2
◊ A brief HISTORY of VIETNAMESE WRITING – Section 3
◊ A brief HISTORY of VIETNAMESE WRITING – Section 5