Computer Fonts Explained: Bitmap, Vector, TrueType, and Font Rendering

Every day at work we run into different fonts, whether we’re writing documents, browsing web pages, or writing code — there’s no getting away from them. It’s worth having a basic understanding of how fonts actually work.

1. The Loose Idea of a “Font”: What Is a Font Face?

In everyday life and in computing, what we loosely call a “font” actually refers to a Font Face. It’s a complete visual design scheme, containing the concrete shape (glyph) of every character (Latin letters, digits, punctuation, Chinese characters, and so on) in a particular style.

You can think of it as a “picture manual”: when the computer wants to display the letter A or the Chinese character 永, it has to consult this manual to decide whether that character should be drawn round and soft, sharp and angular, or with little serif “claws.” A font’s “appearance” and its “encoding” are stored separately — encoding is only responsible for assigning each character an “ID number,” while the font face determines what the person (character) behind that number actually looks like.

2. Font Families: Classifying Fonts by Appearance

The world of fonts is dazzlingly varied, so for ease of recognition and use, fonts are grouped into different “families” based on their visual characteristics. The font-family setting commonly seen in web pages or word processors refers to exactly this.

2.1 Serif Fonts

Characteristics: small extra decorative strokes at the start and end of each stroke, called “serifs” — like each stroke growing tiny claws.
Feel: classical, formal, with good reading continuity — less fatiguing over long stretches of reading.
Common examples: SimSun (宋體), Source Han Serif (思源宋體), Times New Roman.
Uses: print books, formal documents, and long-form web body text where reducing visual fatigue matters.

2.2 Sans-Serif Fonts

Characteristics: clean, crisp strokes with no extra decorative claws, usually ending flat.
Feel: modern, minimal, clear.
Common examples: Heiti (黑體), Microsoft YaHei (微軟雅黑), Source Han Sans / Noto Sans (思源黑體).
Uses: excellent for screen display (web pages, mobile interfaces). When Windows 7 switched its default font from SimSun to Microsoft YaHei, on-screen reading comfort improved dramatically. The Traditional Chinese version is called Microsoft JhengHei.

2.3 Monospace Fonts

Characteristics: every character occupies exactly the same horizontal width (e.g., i and w take up the same display width).
Uses: essential for code editors, since monospacing lets code line up perfectly, making it easier to debug and read.
Common examples: Source Han Mono (思源等寬體), Microsoft’s Cascadia Code, Courier New.

2.4 Other Font Families

Script: mimics human handwriting, giving it a warm, personal feel.
Fantasy/decorative: heavily stylized display type, suited to titles or posters.

2.5 On Font Weight

Beyond style, fonts also vary in thickness — that is, weight. Examples include Black, Bold, Regular, and Light. The heavier the weight, the stronger the visual impact, typically used for headings; the lighter the weight, the more elegant and gentle it feels, commonly used for body text or annotations.

3. The Secret Behind Font Files: The Collaboration Between Adobe, Microsoft, and Apple

A font’s appearance can’t just appear out of nowhere — it has to be stored in a specific file format. The technical evolution behind this is really the history of ongoing competition and collaboration between three giants: Adobe, Microsoft, and Apple.

PostScript Type 1 (led by Adobe): In the early days of personal computers, Adobe developed the PostScript page description language and released the Type 1 font format. It describes character shapes using Bézier curves, giving very high print quality, but at the time it was a “proprietary format” — Adobe earned substantial profits from licensing it, and the font file structure was complex.
TrueType (Apple and Microsoft joining forces): To break Adobe’s monopoly on printing fonts, Apple developed the TrueType format in the early 1990s, and Microsoft soon joined in. TrueType uses quadratic Bézier curves (unlike Type 1’s cubic curves), computes faster, and is fully open to license. From this point on, the display quality of personal computer screens leapt forward significantly.
OpenType (Adobe and Microsoft’s landmark collaboration): Around the turn of the millennium, both sides realized cooperation beat competition. Adobe and Microsoft jointly released the OpenType format (file extension .otf). It’s essentially a superset of TrueType, merging PostScript’s curve capabilities (CFF) together with TrueType’s technology. OpenType supports up to 65,535 characters, enough to hold the entire Unicode character set, and it supports advanced typesetting features like ligatures and character variants. Today, OpenType has become the world’s dominant font standard.
TrueType Collection (TTC, an Apple technology): Apple’s TTC format allows multiple fonts (such as a “light” weight and a “bold” weight) to be packed into a single file, sharing common stroke data — substantially saving storage space (especially important for large CJK character sets).
Collaboration on CJK fonts (Adobe and Google): Entering the internet era, Adobe and Google collaborated across companies and countries to develop the Source Han / Noto Sans font family. This is an open-source font family aimed at “No Tofu” (no missing-glyph boxes), striving to fully cover the various regional writing conventions for Chinese characters across Taiwan (TW), Hong Kong (HK), Japan (J), Korea (K), and Simplified Chinese (SC). It’s the largest open collaborative font project in the history of East Asian typography.
Web font formats (WOFF): Entering the web era, organizations including Microsoft, Mozilla, and Opera led the development of WOFF (Web Open Font Format) and its more advanced successor, WOFF2. These formats add a compression layer on top of OpenType/TrueType, specifically designed to let browsers download fonts faster.

4. Using Fonts on the Web

In web design, font configuration isn’t just about aesthetics — it’s also about performance and licensing.

4.1 The Fallback Mechanism

Web pages usually specify a list of fonts, such as font-family: "Microsoft YaHei", "SimSun", sans-serif;. The browser tries them starting from the first one, and if the user’s system doesn’t have a given font installed, it automatically “falls back” to the next font in the list. This is exactly why serif or sans-serif is always tacked on at the end as a final safety net.

4.2 Using the System Font (System UI)

To avoid wasting bandwidth downloading large font files, many websites simply use the system-ui keyword, which forces the browser to invoke the default interface font of the user’s operating system. This achieves an effect of “one-second loading” that also blends perfectly with the user’s existing environment.

4.3 Web Fonts

If a designer insists on using a specific beautiful font (such as a Source Han font or a particular Latin typeface), the font file must be uploaded directly to the web server via the @font-face syntax, so users download that font while browsing. However, Chinese web fonts are extremely bandwidth-heavy — a complete Chinese font file can be 5-10 MB, which severely slows down page load times. In practice, this is usually handled by dynamically extracting only a “commonly used character subset,” or by restricting web fonts to headings only (avoiding loading them for large amounts of body text).

5. From Encoding to Decoding: Why Does Garbled Text Happen, and How Do You Fix It?

Everything discussed so far has been about a font’s appearance and file format. But before a font can be displayed, the computer first has to find the corresponding character number — and that’s where the most fundamental layer, encoding and decoding, comes in. The root cause of garbled text lies exactly in this step going wrong.

5.1 Why Do We Need Encoding at All?

Everything starts with the computer’s structure. Modern computers are, essentially, all electronic computers, using the voltage-based logic states of electronic components to represent numbers. A voltage logic state can be compared to an everyday light switch: a switch has two states, on and off — never anything in between. For an electronic component, some of its physical quantities can likewise be used to represent state — for example, using voltage, where high voltage means 1 and low voltage means 0. A few questions come up here:

Why use electronic components at all? The answer is that mechanical devices would also work — early computers indeed used mechanical components, and the great invention of the abacus works this way too. But the advantage of electronic components is that our manufacturing technology for them is very mature, letting us pack huge numbers of them together — when you hear that some CPU “integrates several billion transistors,” that’s exactly what’s meant.

Why only two states, high and low voltage? Because a computer can fundamentally only handle logical operations, and the logical “true” and “false” map perfectly onto the binary 1 and 0. Every computation inside a computer eventually gets converted into binary, and ultimately into logical operations.

For mathematical operations (like decimal addition, subtraction, multiplication, and division), the conversion is fairly direct. But for non-mathematical operations like handling characters, since there’s no way to implement them directly in hardware, string operations need to be converted into logical operations instead:

Characters/strings themselves get converted into 01 logic (encoding).
Operators (such as concatenation) get converted into logical operator symbols.

5.2 Encoding and Decoding: A Two-Way Process

The process of converting characters into binary is called encoding; the process of restoring binary data back into human-readable characters is called decoding.

Here’s an example: suppose we define string addition as a + b = ab. How should the computer represent a? We can assign it a number (say, 0101), and that 0101 can map directly onto four hardware circuit switches.

Both encoding and decoding require a shared, unified standard (an encoding table). For instance, ASCII encoding uses 65 to represent the uppercase letter A. When you save an A, what the computer’s disk actually stores is 65 (binary 1000001); when you read it back, the computer sees 65, looks it up in the ASCII table, learns that 65 corresponds to A, and then invokes the font file to render A on screen.

If encoding and decoding use different standards, you get garbled text. For example, if I encode the traditional character “你” using Big5, I get a certain binary number; but if your computer decodes that same number using GBK (a simplified-Chinese encoding), the result might come out as some unrelated simplified character or symbol — this is what’s called garbled text (mojibake).

5.3 Comparing Common Character Encodings

To make the differences more concrete, here’s a comparison table of common encodings used in computing:

Encoding standard	Full name / alias	Primary region	Characteristics and coverage	Byte length (Latin/CJK)
ASCII	American Standard Code for Information Interchange	Global (foundational)	Only Latin letters, digits, control characters	Fixed 1 byte
Big5	“Big Five” code	Taiwan, Hong Kong/Macau, overseas Chinese communities	Targets Traditional Chinese, covers roughly 13,000 characters	1 byte (Latin) / 2 bytes (CJK)
GBK	Chinese National Standard Extended Code	Mainland China (Simplified Chinese)	Backward-compatible with GB2312, covers 20,000+ characters (including both Simplified and Traditional)	1 byte (Latin) / 2 bytes (CJK)
Unicode	Universal Coded Character Set (UTF-8)	Global unified standard	Aims to cover every character used by humanity	1 byte (Latin) / 3-4 bytes (CJK, UTF-8)

5.4 Converting Between Encodings (The Bridging Mechanism)

For different encodings to interoperate, they must go through a mapping table. Modern operating systems and programming languages (like Python and Java) handle internal string processing entirely through a Unicode-centered bridging mechanism:

When you open a text file, the system tries to detect its encoding (e.g., whether it’s Big5 or GBK).
The system converts that file’s byte sequence into Unicode code points (stored in memory).
When you save the file, the system converts the Unicode data back into the specified output encoding (e.g., saving as UTF-8).

If, during conversion, the target encoding doesn’t support a particular character (for example, GBK not supporting certain special symbols), the system outputs a question mark ? or a “tofu box” (�) to indicate the missing glyph.

5.5 How Do You Fix Garbled Text?

Once you understand why garbled text happens, the solutions become obvious:

Standardize on UTF-8 (Unicode) everywhere: this is the most fundamental fix. Across every layer — saving files, editor settings, web page <meta> tags, source code files — mandate UTF-8 uniformly. This ensures text in any language, anywhere in the world, never conflicts again.
Re-convert (transcode) using an editor or a command:
- If you get an old Simplified Chinese file (GBK) and it turns into garbage when opened on a Traditional Chinese system (Big5), you can use an editor’s (such as VS Code or Notepad++) “Reopen with Encoding” feature, first specifying the correct source encoding (GBK), then copying the content and “Save As UTF-8.”
- In a Linux terminal, you can use the iconv command to batch-convert. For example, to convert a GBK file to UTF-8:
```
iconv -f gbk -t utf-8 input.txt > output.txt
```
Detecting the encoding of an unknown file:
- If you’re not sure what encoding a garbled file originally used, you can use Linux’s file -i command, or Python’s chardet package, to detect the likely encoding.
- For example: chardetect unknown.txt returns the most likely encoding (such as Big5 or GBK).

Summary:

A font determines the “appearance” of text; encoding and decoding determine its “identity.” Understand these two systems, and you’ll be able to handle typesetting and garbled-text problems with ease. In practice, body text should generally favor sans-serif fonts for a better on-screen reading experience, headings can appropriately use serif fonts or a heavier weight to draw the eye, and you should always use UTF-8 encoding consistently when saving and transmitting files — do all that, and you get both beautiful typography and a permanent goodbye to garbled text!