Typography rules to ensure Vietnamese diacritics are always correct and beautiful.

Many Vietnamese brands choose fonts because they look good in Latin samples, only to discover misaligned diacritics, broken stacked diacritics, or misplaced heavy diacritics when typing in Vietnamese. This error stems from a lack of clear typography rules, not from the designer's fault on individual pages. Typography rules in brand standards exist to prevent such errors from occurring in the first place.

Conditions not to be overlooked when selecting typefaces.

Before discussing hierarchy or font size, you need to verify one thing: does the font fully support Vietnamese diacritics? Vietnamese uses tonal marks and diacritics that sit on vowels, creating combinations like "ộ", "ướ", "ặ". Many foreign fonts only have basic European diacritics, lacking these combined characters. When absent, the system tries to combine diacritics from a different character set, causing spacing and positioning issues.

The three groups that need the most scrutiny are stacked diacritics (tonal marks placed over circumflex or tilde, such as ấ, ẳ), the hooks of ư, ơ, and the under diacritics like heavy marks (ộ, ặ, ượ). A typical Vietnamese text is not enough to reveal errors, so a separate test font set is needed, as mentioned later.

Quality of the typeface is a criterion for selecting typefaces from the very beginning, not something to fix later.

Criteria for selecting typefaces for Vietnamese.

Test with real Vietnamese text.

Type a complete set of difficult characters: ẤN ĐỘ, ỔN ĐỊNH, KỶ NIỆM, THẲNG, LẶNG, TRƯỜNG, NGƯỠNG, then Nghiêng ngửa, Lượm lặt, Tưởng tượng. After that, check these areas: do the tonal marks collide with the circumflex or tilde; do the hooks of Ư, Ơ in uppercase collide with the diacritics of adjacent letters; can the question mark and tilde at the smallest size on the screen still be distinguished?

• Separate diacritics: retype the sentence using Unikey with the Unicode composite encoding (separate diacritics), displayed at 12 to 14px on a real Windows machine. Separate diacritics from the letters indicate a typeface that hasn't been set for diacritics.
• Line spacing: place two lines on top of each other, the upper line containing g, p, y, and the lower line containing Ẫ, Ỗ; there must be a white gap between the top of the diacritic and the bottom of the letter. Type the sequence Ẫ Ằ Ỗ Ữ in large size in Word on Windows: the diacritics being cut off is often due to the font file declaring a low height, and adjusting line spacing cannot save it. In browsers, it is often due to the text container.
• Locked text: (fixed text cluster of the logo) type the brand name and a few hypothetical sub-product names, including characters with both upper and lower diacritics like Ặ, Ậ. Any diacritic that does not have a proper position is where the system will break as the business grows.
• Real materials: print the smallest text on the exact paper or decal that will be used, including white text on a colored background if applicable, then have someone who hasn't read the content read it aloud. Misreading even one diacritic means it is not acceptable.

The hierarchical letter structure in law.

After selecting a font that meets the requirements, the typography system must clearly define the hierarchy of use. Each level serves a different reading function and needs specific regulations regarding size, weight, and context of use. Typically, a set of standards requires at least three levels:

• Heading: used for major section titles, banners, page titles. A large size, often using a higher weight.
• Body: used for long texts, the main content. A medium size, prioritizing readability over aesthetics. This is the level most read, so it is essential to test Vietnamese diacritics thoroughly.
• Caption / Label text: used for annotations, labels, and secondary information. Small size requires careful consideration of clarity at small dimensions, especially with overlapping text.

Frontify and Kedraco both note that the guidelines need to list approved typefaces along with their hierarchy, size, and usage for each platform to maintain consistency across all digital and print products.

Number of typefaces and alternative typefaces

In addition to the primary font, the typography system must specify a fallback font (the font displayed when the primary font cannot be installed). This is a point that many standards overlook. When sending Word, PowerPoint, or PDF files through machines that do not have the font installed, the operating system automatically selects a default font, often breaking alignment, line breaks, and overall layout.

Common errors when creating a type system

• Choosing a typeface because it looks good in Latin samples, without testing Vietnamese diacritics. The errors only become apparent when the team starts typing real content.
• Not specifying alternative typefaces leads to documents opening on different machines with completely different typefaces, disrupting the layout.
• Using too many typefaces without clear role definitions makes the publication appear inconsistent, even though each page may look beautiful individually.
• There is no distinction between commercial use licenses and web use: some typefaces allow printing but do not permit embedding in websites or applications.

This article is for reference. The scope, pricing, and specific commitments of Sinh Vũ are detailed in the proposal and signed contract.