Fonts are a styling detail where the associated requirements can take many technical writers by surprise. Most of us are not graphic designers and as such, most of us are happy with the default options.
They are not always enough, though.
This is where I provide an overview of several details related to adjusting fonts. It is worth it to understand both the reasons and the means to adjust fonts based on the situation. The means discussed here include instructions for how to adjust style sheets in ways that are compatible with at least DoX CMS. I will, for example, share how to best specify different fonts when languages involve different alphabets.
Situations
These situations involve example circumstances where separately added fonts are either required or very helpful. Those who are aware of them in advance, will be prepared when push comes to shove.
Different alphabets
Sometimes, translations involve languages where the default fonts either fail to fully cover them or do so sub-optimally. For example, the Noto Sans font family was developed to remove the icons for missing symbols (▯ or �) from online content. Its name comes from the phrase ‘no tofu’ because the box for a missing symbol icon looks like a block of tofu. But besides such incidents, the default fonts can also just look bad for different writing systems compared to fonts which were developed specifically for them.
In such situations, you can specify different fonts for related languages to have appropriate alternatives for each different writing system.
Special character sets
Besides the need for different alphabets, some situations can also require you to specify other specialized character sets. The most obvious examples of this involve monospace fonts and dingbat fonts.
Monospace fonts consist of characters which each have the same horizontal space reserved to them. Thus, a period has the same space reserved for it as the letter M, for example. The most recognizable and most frequently encountered monospace font is likely Courier since systems include it by default. These fonts are commonly used to document lines of code. However, numbers in the table of contents and page numbers, for example, can also benefit from the use of such numbering to make their layouts cleaner.
Dingbat fonts such as Windings, on the other hand, contain various decorations in place of letters. Some of them are purely decorative and others, such as arrows, have more practical applications. Of course, some versions of arrows such as ↑ are compatible with many other fonts which makes it unnecessary to add a dingbat font for them.
Branding
Companies with brand style guides generally only use the fonts specified in them. At times, there are obviously reasons to distinguish between technical content and marketing content in this respect. In these cases, you should request or recommend a selection of fonts, which remains coordinated with the rest of the brand image, for technical content.
You should not minimize the significance of brand recognition even for technical content. Many users likely spend more time with your technical content than the marketing content that you control directly. Their experiences with that content contribute to their brand experience.
Of course, usability of content affects this experience more than its style. Tasteful styling can enhance the related impressions, though, by creating more of a distinction between them and other experiences of reading manuals. Depending on how the person remembers and what they pay attention to, this can even help with recall of specific content, or at least its location.
Differences
Different fonts also have their benefits and issues within the same writing systems. These differences determine how well a given font is suited for its use case. The most important such factor is how readable the font is when it is applied to a use case. Fonts can also affect readers’ attitudes towards the text, though, and this, in turn, can affect their reading habits and interpretations. For example, Times New Roman and many other serif fonts are experienced as more serious on average. Depending on the reader, this can, for example, reduce surface browsing and more interpretative applications of instructions.
Besides differences between displays and prints and the like, you should also account for readers’ different needs. Some fonts claim to be designed to be dyslexia-friendly. Others emphasize how they remain more readable to people with limited vision. Such differences are something that you should observe as part of the overall assessment. Comic Sans is unlikely to come on top overall but the Atkinson Hyperlegible font family, for example, can be worth considering.
Serifs
The most discussed difference between fonts relates to the effects of serifs. These are the added parts at the ends of characters which add more angles to their lines. Times New Roman is the most renown such serif font. Similarly, Arial is likely the most familiar font that lacks them, making it a sans serif font.
A common but less than absolute principle is that small text is better served by a serif font. Their added details make each letter more recognizable.
Similarly, sans serif fonts are recommended for web content in particular. The reason is how low resolution or small screens in particular can benefit from simpler characters. On modern screens, this is less of a consideration. Although, even with them, the OLED sub-pixel patterns can have impacted legibility before the changes in 2026.
Distinct characters
Ideally, fonts are designed to make characters which are easy to confuse otherwise sufficiently distinct. If readers need not stop to interpret unclear cases when they browse through text, they can find the correct parts faster and there will be reduced risk of confusion. This matters even more for codes, where misinterpretations are not permitted, than for words.
For example, the characters I, l, and 1 must be clearly distinguishable from each other. Letters such as d and b, as well as p and q, should differ in ways other than them just mirroring each other. If one character differs from another only by virtue of being an incomplete version of the same shape, the missing parts should leave clear enough gaps. An example of this are c and o.
Character dimensions
Besides your choice of font size, the specific characters in use contain other notable differences in their measurements.
Even with the same font size, different fonts can have characters that differ in height. This is largely a matter of the proportionate sizes of the largest and the smallest characters in a set. Fonts which are more uniform in this respect work better with smaller font sizes because no character is left too small to decipher. Fonts with greater contrasts in character size can leave some characters illegible or require you to increase the overall font size.
Different fonts also use different stroke widths. This is also a matter of the relative width of their widest and thinnest lines because you can also adjust the overall thickness as needed. If there is a high contrast here, the thinnest lines can be hard if not impossible to perceive properly for smaller font sizes. Thus, at least the body of your text should not involve such fonts.
It can sometimes come as a surprise just how bad the default spacing some fonts have. It can prove inconsistent or overly tight. It is harder to adjust for inconsistency. But overly tight (or loose) spacing can be fixed by adding a value for the letter-spacing rule in your style sheet.
Adjustability
Fonts can also differ in terms of how much you can adjust them. For traditional fonts, you should ideally specify separate versions for different font weights and for italics. Even combinations of these factors need their own font files. Separate files for each variant are not always necessary but they are more reliable than changes to the default fonts made by compilers. For example, a separately specified bolded font can apply a different adjustment to stroke width for serifs than to characters’ bodies. The more such variants that a font has, the better you can adjust it to the situations where they are needed.
There are also variable fonts which require no separately specified variants. Those baseline fonts were designed to account for variation with the help of freely scaling variables for details such as stroke width. Not all compilers support them by default, and they can also still have unrelated issues such as bad spacing.
Methods
These instructions focus on how you can control fonts with style sheets. This section includes the means to add them to styles, change fonts between languages, and to control their details.
How to add fonts
To add fonts to styles used in DoX CMS, you must first upload their files in the system. Do this in the Styles > Files menu and use the Upload File command there. We mainly recommend TTF or OTF files for this.
I recommend that you use a separate style file to add fonts. This makes their location clear without a need for them to take up space in your primary style sheets. You can then add these files into the same style.
This is the format to use in style files:
@font-face {
font-family: title;
src: url(address);
}For these values, title is the name for the style that you must use elsewhere in your style files. If a name has empty spaces, you must write it inside quotes.
Address, on the other hand, is the location of the font file. In DoX CMS, this value is /Content/StyleFiles/filename where you must replace filename with the actual filename (including its file extension).
Variants
When you add a variant of the same font, you use the same value for the font-family rule. You then add the other rules that match the variant’s use case. Such rules include font-weight and font-style. Thus, a variant that is both bolded and italicized would look like this:
@font-face {
font-family: title;
src: url(address);
font-style: italic;
font-weight: 700;
}The title value is the same as the baseline font’s, and the address value must match the location and filename of the variant.
700 as the value for font-weight rule corresponds to normal bolding. The default stroke width corresponds to a value of 400. Values below that are used for lighter variants of a font. The whole range consists of multiples of a hundred between 100 and 900.
Language-specific fonts
Languages that use different alphabets are particularly likely to require you to use different fonts for them.
The most general requirement here is that parts that specify the used fonts also get language-specific alternatives where their selectors include the [lang] attribute. This attribute belongs to the root element of the publication. Thus, you can add its value at the start of the selector separated from the rest of the selector with just an empty space.
You must repeat this solution with each part of a publication that has a specified font, though. And with each selector involved with them. The additional work required doubles if you must also account for previews. They include the language as an ID value rather than with the lang attribute. For the same language-specific rules to also apply there, you must thus also add selectors where the same language values have been added as ID values such as #fi.
As such, the better implementation involves the use of CSS variables. In this case, you use these variables as the primary values for the font-family rule. Then, you only need to specify the default values and language-specific exceptions for these variables. I recommend the use of a separate style file for variables’ values, too.
An implementation based around variables looks something like this:
body {font-family: var(--font_default);}
.titleWrapper,
.dita-title,
[doxelementclass="cover_title"] {font-family: var(--font_title);}
body {
--font_default: Arial;
--font_title: Roboto;
}
[lang="jp"] body, #jp body {
--font_default: NotoSansCJK;
--font_title: HeiseiMincho;
}Other variants
These are additional rules which let you adjust and adapt fonts.
Other stroke widths
I already mentioned that there are more alternatives for stroke widths than just the default and standard bolding. You can use the same method to include more version from the same font family. Besides just a light version, you can also set extra thick versions such as Arial Black as variants of the same baseline font.
Spacing
I also already alluded to the uses of the letter-spacing rule which controls how far apart characters are from each other. You cannot specify it directly as part of a font’s default values. Instead, you must specify it separately, together with the used font for each related part. This can help fix too tightly spaced but otherwise suitable fonts. The used value adds the specified amount of additional empty space between characters. Negative values, by contrast, deduct the specified amount from between characters.
Variants of minor details
There are a number of font-variant rules that control minor variants of fonts:
- font-variant,
- font-variant-alternatives,
- font-variant-east-asian,
- font-variant-ligatures, and
- font-variant-numeric.
They control tiny details such as variants of individual characters. However, they can improve the usability of your fonts either as part of the default setup or situational adaptations. For example, for variants of numbers, you can more clearly distinguish a zero from the letter O or make numbers monospaced only in the table of contents.
Summary
It can prove necessary for you to adjust fonts in style sheets for reasons such as accounting for other writing systems related to translations, special situations such as lines of code, and compliance with the brand image. The default font options do not necessarily function ideally across all writing systems, and they can even be missing some of the special characters for different alphabets.
Differences between fonts affect their suitability for different use cases. Serifs can make small text more readable but small or low resolution screens can smudge such letters. Fonts can also differ in terms of how distinct similar characters are and, for example, relative dimensions such as the proportionate heights of the tallest and shortest characters. Depending on the extent to which fonts must be adapted between use cases, the number of available variants for a font can affect its suitability.
Fonts must be added to the system first and then to styles as part of at least one of the included style sheets. You can add the variants of the same font separately and instead of giving them different names, just specify applicable details such as the amount of bolding to switch to that font from the default option. This is a better option than to specify each variant of the same font as its own font.
For languages that use different alphabets, you apply different fonts by adding their language codes to selectors related to fonts. The best implementation for them is to specify the default fonts with the help of CSS variables, though. In this case, the only language-specific changes involve changing the values of these variables rather than changing the fonts separately for each part where they were originally used.
You can use style sheets to apply even further changes to fonts. Instead of just a value for bolding, you can adjust stroke width with a number of values that scale in either direction. If they have too tight or too loose spacing, you can adjust this separately. And there is also a set of rules which let you adjust a number of tiny details to match your needs. For example, you can add a dot inside zeros like this to make them more distinct from the letter O inside codes which may contain either.