Font Rendering

Techniques

Bitmap Font

  • Each glyph is stored as a pixel grid  (bitmap) for one specific size.

  • Key concepts :

    • Simple, fast, easy to render.

    • Become blocky  or blurred  when scaled.

  • Bitmap Atlas :

    • A single texture image containing many smaller subimages (e.g. glyph bitmaps) packed together. Instead of loading one texture per character, a bitmap atlas lets the renderer sample from different regions to draw arbitrary text with fewer texture bindings.

Vector Fonts

  • Represented by quadratic BĂ©zier curves.

  • Performs an 'inside/outside test' to fill the area of the curves.

    • Normally a ray is cast from left to right and an evaluation is made based on the parity of the number of "collisions with curves" that occurred.

      • Even: outside. Odd: inside.

    • This is very slow. Because of this a Font Atlas is created, which acts as a cache  of the calculations performed.

      • In other words, a vector font is then converted into a bitmap font. This is called RASTERIZATION .

Key concepts

  • Perfectly scalable.

  • Too slow to draw and resize.

SDF (Signed Distance Fields)

  • It's like a bitmap font, but instead of storing 'color', it stores a value proportional to the distance to the nearest edge of the glyph.

  • A glyph is divided into multiple segments, where each segment has a color. This is done so that the rendering of one segment does not interfere with the rendering of another segment.

Key concepts

  • Has difficulty at high scales, producing rounded edges.

Calculation

  • Parameters :

    • Threshold

    • Smoothness

Technique

MSDF (Multi-Channel Signed Distance Fields)

  • MSDFgen .

    • Only generates 1 char.

    • .\msdfgen.exe msdf -font "Righteous-Regular.ttf" 'M' -o msdf.png -dimensions 32 32 -pxrange 4 -testrender msdf-render.png 1024 1024

  • MSDF-Atlas-Gen .

    • .\msdf-atlas-gen.exe -font "Righteous-Regular.ttf" -type msdf -format png -imageout msdf-atlas.png -fontscale 8 -allglyphs

      • All glyphs.

    • .\msdf-atlas-gen.exe -font "Righteous-Regular.ttf" -type msdf -format png -imageout msdf-atlas.png -fontscale 8 -charset chars.txt

      • Only glyphs defined in the file chars.txt

Calculation

  • Parameters :

    • Threshold

    • Smoothness

  • It also uses value and median for the final calculation.

Expected results

  • Ray in the RayLib Discord: "SDF can still generate artifacts, MSDF is better, but adds complexity".

  • Medium/Large Text :

    • Looks nearly perfect (sharp with smooth curves).

  • Small Text :

    • Slightly blurry or pixelated (distance field approximation).

  • Sharp Corners:

    • May appear rounded (SDF smoothes edges).

Text Processing Pipeline

Segmentation

  • Divides the input text into several substrings called “runs”.

  • Runs are sequences of characters that share a common 'direction' (left-to-right or right-to-left) as well as a common script.

  • A “hard line break”, like an explicit newline or carriage return character, signals the end of a run.

  • Segmentation only produces bounds between runs. It does not modify the input text in any way.

Shaping

  • Instead of drawing an ASCII / UTF-8 character directly, a shaping engine is used to perform operations that make the text compatible with various languages.

  • Operations :

    • Substitution :

      • Necessary for ligatures.

        • For Latin languages this is not necessary, but languages like Arabic, etc., are completely wrong without ligatures.

    • Reordering :

      • Important for some characters outside the Latin alphabet.

    • Positioning :

      • Depending on the context, characters may want to move slightly.

      • One example of this is Kerning .

        • Bringing one character closer to another is an example of this, being super important for cursive fonts.

      • Depends on directionality.

        • Latin:

          • Left to Right -> Top to Bottom.

        • Arabic:

          • Right to Left -> Top to Bottom.

        • Japanese (Hiragana, Katakana, Kanji):

          • Top to Bottom -> Right to Left.

  • Libs :

    • HarfBuzz.

    • Uniscribe.

Kerning

  • Adjustment of horizontal space between specific pairs of glyphs (for example, “A” followed by “V”).

  • Kerning tables in font files specify fine-tuning offsets so that letter combinations appear optically balanced.

  • Applying :

    • Shaping Engines :

      • It's the primary mechanism for applying kerning in many modern text rendering systems.

    • Manual :

      • A layout engine or rendering system can apply kerning adjustments independently of the shaping engine, either using font metrics directly or user-defined adjustments.

    • Design Tools :

      • Software like Adobe Illustrator or Figma can allow manual kerning (user overrides), separate from the shaping engine's automatic adjustments.

    • Web Browsers / CSS :

      • In web environments, the font-kerning  and letter-spacing  CSS properties may influence kerning behavior, even disabling shaping-based kerning.

  • Kerning Data can reside in :

    • GPOS  table :

      • More flexible, modern positioning.

      • OpenType.

    • kern  table

      • Legacy.

      • TrueType.

Rasterization

  • The process of converting a vector font to a bitmap font.

  • Challenges :

    • Hinting :

      • Adjusting glyph shapes to align with pixel grids for clarity at small sizes.

    • Anti-aliasing :

      • Smoothing jagged edges using grayscale or subpixel techniques.

    • DPI Scaling :

      • Scaling fonts appropriately for the screen’s physical density (dots per inch).

Layout

  • Text layout is the process of wrapping lines to fit a certain width, and optionally making the text “fit better” through a bunch of adjustments, like justification and hyphenation.

  • These adjustments are typically very dependent on the script being processed.

Hinting

  • Instructions embedded in an outline font (TrueType or PostScript) that tell the rasterizer how to align strokes to the pixel grid at small sizes.

  • Proper hinting reduces artifacts like uneven stroke widths or blurry edges when rendering on low-resolution screens.

Concepts

Dots Per Inch (DPI)

  • Measures how many individual pixels ("dots") fit into a 1-inch line on a screen or printed output.

  • It describes the density of pixels in a given physical space.

  • Higher DPI = Sharper, More Detailed Display :

    • A screen with 300 DPI packs 300 pixels into 1 inch, making images/text appear smoother.

    • A screen with 72 DPI has fewer pixels per inch, so details may look more pixelated.

  • DPI vs. Resolution :

    • Resolution (e.g., 1920x1080) = Total number of pixels on a screen.

    • DPI = How tightly those pixels are packed (depends on screen size).

      • Example: A 24-inch 4K monitor has ~184 DPI, while a 5-inch phone with a 1080p screen has ~440 DPI (much sharper).

  • Why DPI Matters in Font Rendering :

    • Fonts are vector-based (infinitely scalable), but screens are pixel-based.

    • If DPI is ignored, text may appear too small (on high-DPI screens) or too large (on low-DPI screens).

    • Proper DPI-aware rendering ensures text is physically consistent (e.g., 12pt font looks the same size on a phone and a monitor).

Formats

Web Open Font Format (.woff & .woff2)

  • WOFF and WOFF2 are modern, web-optimized font formats designed for efficient delivery of fonts in web browsers.

  • WOFF (Web Open Font Format) :

    • Developed by: Mozilla, Microsoft, and Opera (2010).

    • Purpose: Compress existing font formats (TTF/OTF) for faster web loading.

    • Features:

      • Contains metadata (license, creator info).

      • Uses ZIP-like compression (smaller than raw TTF/OTF).

      • Supported by all modern browsers.

    • File Extension: .woff

  • WOFF2 (Web Open Font Format 2.0) :

    • Released in: 2014 (improved compression).

    • Purpose: Even smaller file sizes than WOFF (~30% better compression).

    • Features:

      • Uses Brotli compression (more efficient than ZIP).

      • Supports subsetting (removing unused glyphs).

      • Ideal for mobile/web performance.

    • File Extension: .woff2

OpenType (.otf)

  • .otf (OpenType Font) is a modern container that can hold:

    • PostScript outlines (.CFF, Compact Font Format), or

    • TrueType outlines (quadratic BĂ©zier).

  • If an .otf  file uses PostScript curves, it’s often called an “OpenType-PostScript” font.

  • OpenType unifies both Apple and Microsoft platforms, supporting Unicode, kerning, hinting, and advanced layout features.

  • .otf or .ttf :

    • .otf

      • Quality

      • High-quality print or UI with rich typographic control (e.g., professional layout tools, high-res UIs).

    • .ttf

      • Compatibility.

      • Games, apps, or UIs where size and compatibility  matter more than advanced typography.

TrueType (.ttf)

  • An outline font format developed by Apple in the late 1980s.

  • Glyph shapes are described by quadratic BĂ©zier curves , allowing smooth scaling to any size.

  • TrueType fonts include tables for metrics (advance width, bearings), kerning pairs, and optional hinting instructions to improve legibility at small sizes.

Font (.fnt)

  • Unlike vector fonts (e.g., .ttf  or .otf ), .fnt  files store fonts as pre-rendered pixel images for specific sizes.

  • Each character is a small bitmap, making them fast to render but non-scalable.

  • A .fnt  file is often paired with a texture (e.g., .png  or .dds ) containing the actual glyph images.

  • Common uses :

    • Early computer systems (e.g., DOS, Windows 3.x).

    • Video games (for retro-style or performance-critical rendering).

    • Embedded systems where simplicity is prioritized.

PostScript

  • A font format using cubic BĂ©zier curves to define glyph shapes.

  • Developed in the 1980s for high-quality printing.

  • Used in Type 1 fonts, typically consisting of:

    • A .pfb  (Printer Font Binary) file with the glyph data.

    • A .afm  (Adobe Font Metrics) file with character widths and kerning.

  • Primarily used in desktop publishing and professional print workflows.

Libs

Shaping Libraries

HarfBuzz

  • HarfBuzz .

  • HarfBuzz-Odin .

  • Complex shaping.

  • For serious text (RTL, ligatures, etc.): FreeType  + HarfBuzz , optionally MSDF for rendering.

  • HarfBuzz won't help you with bidirectionality.

  • HarfBuzz won't help you with text that contains different font properties.

  • HarfBuzz won't help you with line breaking, hyphenation, or justification.

Core Text

  • Shaping engine.

DirectWrite

  • Shaping engine.

Uniscribe

Segmentation Libraries

Fribidi

  • Fribidi .

    • It only implements direction breaking.

ICU

  • ICU .

  • Is a very complex and featureful library. However, it is restricted to offering Unicode functionality, and, as we have seen, text shaping and rasterization both require OpenType functionality.

  • It performs segmentation.

Rasterization Libraries

FreeType2

  • FreeType .

  • FreeType .

  • freetype-odin .

  • Written in C.

  • What it is :

    • A mature, open-source library for font rendering, supporting TrueType, OpenType, PostScript, and many other font formats.

    • Advanced hinting, subpixel rendering, kerning, ligatures, and DPI-aware scaling. Used widely in professional software (e.g., Linux, Android, Godot).

    • "rasterization library".

    • FreeType is a font rendering engine , meaning it:

      • Parses font files (e.g., TTF, OTF)

      • Extracts glyph data (metrics, outlines, bitmaps)

      • Generates glyph images (rasterizes vector outlines into bitmaps or provides outline vectors for further use)

  • What it does :

    • It provides bitmap glyphs (e.g., 8-bit grayscale bitmaps) or vector outlines (e.g., curves and points).

    • It lets you rasterize a glyph at a specific size and resolution into a memory buffer.

    • The output of FT_Render_Glyph  is a rasterized glyph image  stored in the glyph->bitmap  field of the FT_GlyphSlot  structure.

      • Nothing more than "bitmap data".

      • In the Odin example, bitmap_data  is a []RGBA , where RGBA :: [4]u8 , with size bitmap_data = make([]RGBA, window_width * window_height) .

  • What it doesn't do :

    • It does not handle drawing to the screen (no OpenGL, DirectX, Vulkan, etc.).

    • It does not handle text layout (no kerning application, line wrapping, or shaping for complex scripts — although it provides raw kerning info).

  • Use Case :

    • Production-grade applications where text quality and typographic features are critical.

    • Godot

      • Aligns with its focus on cross-platform compatibility and high-quality UI/text rendering.

stb_truetype

  • A single-file, public-domain C library for rasterizing TrueType (.ttf) fonts.

  • Pros :

    • Lightweight, easy to integrate, minimal dependencies.

  • Cons :

    • Limited features (basic hinting, no subpixel rendering), lower quality at small sizes, and no support for OpenType (.otf) or other font formats.

    • Does not automatically handle DPI scaling, as it requires explicit input for font size.

  • Use Case :

    • Ideal for small projects, prototyping, or platforms where simplicity and size matter more than typographic perfection.

    • RayLib.

      • However, RayLib itself allows developers to manually adjust font sizes based on DPI if needed.

      • "Is there a technical reason for not using freetype? I don't know much about the subject, so I'm just wandering"

        • library size, Freetype is x100 bigger than stb_truetype; build complexity, maintenance.

  • "stb_truetype is more limited and lower quality than FreeType2" :

    • This is broadly true. stb_truetype  is a minimalist library focused on basic font rasterization, while FreeType2  is a full-featured, industry-standard library with advanced rendering capabilities (e.g., subpixel rendering, better hinting, and support for complex font features). For simple use cases, stb_truetype  may suffice, but FreeType2  generally produces higher-quality results, especially at small font sizes or on low-resolution displays.

Multi-Purpose Libraries

Pango
kb-text-shape

  • Segmentation (through kbts_Break) and shaping (through kbts_Shape).

  • JimmyLefevre/kb .

  • Now part of Odin's vendor.

  • The library basically does everything you need to go from UTF-8 or Unicode codepoints to a list of glyph indices + positions, ready to send to a rasterizer  like FreeType or stb_truetype.

  • Features :

    • Segmentation :

      • Provides ICU-like text segmentation (i.e. breaking Unicode text by direction, line, word and grapheme).

    • Shaping :

      • It also provides HarfBuzz-like text shaping for OpenType fonts, which means it is capable of handling complex script layout and ligatures, among other things.

    • Bundling segmentation and shaping simplifies the overall implementation, because the shaper doesn't need any ad-hoc adjustments to fix bad segmentation.

    • It also reduces the binary size by a lot, because they both share the same Unicode tables!

    • It can replace fribidi, some parts of ICU and HarfBuzz, but not Pango. Pango is a higher-level library that also handles paragraph layout and rendering glyphs to bitmaps, which we don't do.

  • Not-features :

    • Rasterization :

      • It does not handle rasterization.

      • It will only help you know which glyphs to display where!

  • Nic Barker: "Amazing work on this".

Tools

BMFont

  • BMFont .

  • A popular Windows tool by AngelCode that generates bitmap fonts and accompanying metadata.

  • It exports one or more bitmap atlases  plus a description file (text or XML) containing glyph positions, sizes, kerning pairs, etc., for use in games and GUIs.

  • The author “AngelCode” created BMFont, and the term is often used interchangeably to refer to the tool or its file formats (e.g. the “AngelCode BMFont” text file format).

  • It's a de facto standard for bitmap-font atlases with kerning and glyph metrics.

Fonts

For Windows 
Control Panel -> Fonts
Code with Ligatures

  • Hack Nerd Font Mono .

    • Hack Nerd Font Mono

    • It's Hack, but with Ligatures.

  • Ligatured Hack .

    • Abbreviations: 

    N = Nerd Font
FC = FIRA Code
JBM = JetBrains Mono
CCG = Enabled Copy Character Glyphs

    • Only ones that make sense:

      • Hack FC Ligatured

      • Hack JBM Ligatured

    • I don't know what CCG does.

    • The pack seems to download a lot of useless stuff.

  • JetBrains Mono

    • JetBrains Mono

    • I prefer Hack or Hack Nerd Font Mono.

    • Very similar to Fira Code, but with fewer slabs.

    • Font is OK.

    • The ligatures are somewhat curved.

  • FiraCode

    • Fira Code

    • Font is OK.

    • The ligatures are somewhat curved.

  • Hasklig

    • The font is OK.

    • It doesn't have many ligatures.

  • Monoid

    • Font doesn't matter much.

    • Ligatures without full support in VSCode.

    • The ligatures ended up looking quite strange.

  • Iosevka

    • Doesn't matter much.

    • Always download the Super TTC package, since it's a bundle.

Code without Ligatures

  • Hack

    • Hack  / Hack Regular

  • Cascadia

    • Cascadia Mono

    • Cascadia Code

    • No ligatures

Standard

  • https://fonts.google.com/specimen/Roboto

  • https://fonts.google.com/specimen/Open+Sans

  • https://fonts.google.com/specimen/Quicksand

Rounded

  • https://fonts.google.com/specimen/Lilita+One

  • https://fonts.google.com/specimen/Sriracha?categoryFilters=Feeling%3A%2FExpressive%2FActive

  • https://fonts.google.com/specimen/Sour+Gummy?categoryFilters=Feeling%3A%2FExpressive%2FCute

  • https://fonts.google.com/specimen/Delius?categoryFilters=Feeling%3A%2FExpressive%2FCute

Stylized

  • https://fonts.google.com/specimen/Righteous

  • https://fonts.google.com/specimen/UnifrakturMaguntia?categoryFilters=Feeling%3A%2FExpressive%2FArtistic

  • https://fonts.google.com/specimen/UnifrakturMaguntia?categoryFilters=Feeling%3A%2FExpressive%2FArtistic

  • https://fonts.google.com/specimen/Permanent+Marker?categoryFilters=Feeling%3A%2FExpressive%2FArtistic

Cut-out

  • https://fonts.google.com/specimen/Allerta+Stencil?categoryFilters=Appearance%3A%2FTheme%2FStencil

  • https://fonts.google.com/specimen/Protest+Guerrilla?categoryFilters=Appearance%3A%2FTheme%2FStencil

Pixelated

  • https://fonts.google.com/specimen/Tiny5?categoryFilters=Appearance%3A%2FTheme%2FPixel

  • https://fonts.google.com/specimen/Doto?categoryFilters=Appearance%3A%2FTheme%2FPixel

  • https://fonts.google.com/specimen/Micro+5?categoryFilters=Appearance%3A%2FTheme%2FPixel

  • https://fonts.google.com/specimen/Jersey+10?categoryFilters=Appearance%3A%2FTheme%2FPixel

  • https://fonts.google.com/specimen/Jersey+15?categoryFilters=Appearance%3A%2FTheme%2FPixel

  • https://fonts.google.com/specimen/Jersey+20?categoryFilters=Appearance%3A%2FTheme%2FPixel

  • https://fonts.google.com/specimen/Jersey+25?categoryFilters=Appearance%3A%2FTheme%2FPixel