Chapter 4: Inclusive UX: Subtitles, Icons, Contrast, Font Pairing

Created by Sarah Choi (prompt writer using ChatGPT)

Inclusive UX: Subtitles, Icons, Contrast & Font Pairing for Character Concept Artists

Why character artists should own pieces of UX

Even if you do not ship the UI, your character decisions affect what UI sits on top of the character, and how clearly players parse story, role, and state under pressure. Subtitles need faces that read under them; icons often sit on armor plates and banners you design; contrast and font pairing determine whether faction language, decals, and diegetic labels help or hinder comprehension. Treat inclusive UX as part of your Optimization & Accessibility toolkit: it increases readability for everyone, protects performance budgets, and welcomes players with diverse visual needs and languages.

Subtitles & captions: design for voice, space, and motion

Subtitles must coexist with action. When concepting cinematics or dialogue‑heavy gameplay, reserve a subtitle safe zone in your comps—typically the lower 15–20% of frame—with non‑critical visual density behind it. Design costumes so high‑contrast flashing accents don’t sit under the subtitle band, preventing distraction and readability loss. Include speaker IDs in your caption style frames (color chip + name tag or icon) that also map to the character’s silhouette motif (e.g., a helm crest echoed in the nameplate icon). If multiple speakers overlap, plan stacked caption spacing and show how your character’s mouth visibility remains clear—avoid collars or scarves that occlude lips in dialogue shots.

In loud or chaotic scenes, sound effect captions (“[metal clank]”, “[radio hiss]”) should use a secondary weight or enclosure that is legible yet distinct from dialogue. Propose an adaptive background behind captions (soft gradient or semi‑opaque plate) that maintains contrast without masking too much of the character. Keep line length moderate and line height generous, so fast readers can scan while tracking action. When languages expand (German, Russian) or contract (Chinese, Japanese), your safe zones should absorb length shifts without covering faces or key props.

Iconography: shape first, then nuance

Icons carry role, status, and interaction at a glance. Build them with geometry that survives at gameplay pixel sizes: strong outer shapes, minimal inner detail, consistent stroke weights, and clear figure/ground. Where icons live on characters (shoulder tabs, capes, chest plates), plan legal zones with gentle curvature to avoid distortion and keep value contrast between icon and substrate. For faction identity, pair the icon with a repeating silhouette motif (cape notch, helm crest, pauldron bevel) so the cue redundantly survives distance and color shifts.

Animate icons sparingly. If a buff or hazard icon pulses, ensure the duty cycle (on/off timing) doesn’t strobe against motion blur. Prefer scale or luminance ease over hue cycling. For color‑vision inclusion, avoid meaning encoded only by red vs. green; differentiate with shape (check vs. X, triangle vs. circle), value (light vs. dark), and stroke style (solid vs. dashed). Provide filled and outline versions so UI can pick the better read over busy backgrounds or over your highly textured armor.

Contrast systems: value rails that travel between UI and costume

Contrast is a shared contract between UI and character. Establish value rails for UI plates (e.g., dark 10–20% for overlays, light 80–90% for text) and keep character palettes from camping on the exact same ranges in areas where UI commonly appears (lower thirds, HUD corners). On garments that host diegetic UI (holo badges, AR patches), add contrast buffers—thin trims or recessed beds—so projected graphics have predictable, high‑contrast landing zones. Avoid high‑frequency fabrics beneath expected UI zones; replace with smoother panels or provide a far‑LOD texture with larger repeats to resist shimmer under text.

For accessibility, design monochrome‑proof reads: if you desaturate the frame, all critical text and icons remain legible. Manage emissive intensity so bright trims don’t wash out caption bands or icon badges. If the game offers light/dark UI modes, show both layered over your character and adjust costume trims where necessary to prevent value collisions.

Font pairing: performance, localization, and character voice

Choose font pairs that read in motion and scale to many languages. A practical scheme: a workhorse UI sans for subtitles and HUD (high x‑height, open counters) paired with a display face used sparingly for titles or faction headings. In concept frames, test minimum pixel heights for the subtitle sans at gameplay distance; if counters close or joins fuse, increase weight or size. Keep text left‑aligned for rapid scanning; avoid justified blocks that create rivers at small sizes.

Plan for localization envelopes. Some languages expand 20–40% compared to English; others shift vertical metrics (Thai, Arabic). Provide fallback font guidance that preserves personality without breaking metrics. Avoid using decorative scripts for core reads; prefer them for diegetic signage where you can backstop with a shape or icon. For CJK, assume heavier stems; ensure your light‑on‑dark or dark‑on‑light contrast remains comfortable. Where on‑character typography appears (nameplates, serials), specify minimum sizes, outline buffers, and letter‑spacing that survive mip‑mapping.

Diegetic UX on characters: badges, scanners, and AR

Characters often host diegetic UI: wrist scanners, visor HUDs, shoulder radios, cape LEDs. Concept these with low draw‑call cost (one emissive mask), value‑safe backgrounds, and fallback non‑emissive states for photo‑sensitive players. Show angle‑safe positions so the device reads from gameplay camera without occlusion by long hair, hoods, or cape folds. If the device communicates team or status, mirror that meaning in a non‑color cue (shape or pattern), and ensure the emissive rhythm does not compete with subtitles.

Budgets: memory, draw calls, and attention

Inclusive UX is also budgeting. Cap UI‑adjacent materials on characters: keep emissive on its own small mask, avoid layered glass over glass, and prevent alpha‑stacked badges. For subtitle visibility, budget quiet value fields behind expected lower‑thirds; this might mean choosing a calmer hem design to gain reliable readability. In crowded scenes, atlas reuse across icons and decals reduces streaming hiccups during quick swaps that would otherwise desync subtitles with audio.

Testing rituals you can do at concept time

Run a subtitle stress test: composite your character with two lines of captions over an action pose in three biomes (bright snow, dark interior, warm dusk). Check mouth visibility and ensure no critical reads live under the caption plate. Run a CVD verification strip for your icons and on‑character decals, confirming shape and value carry meaning without color. Create a font fallback plate showing English vs. an expanded language (German/Polish) and a condensed one (Japanese), verifying the safe areas still work. Downscale to gameplay pixel sizes and apply a light motion blur; confirm that type and icons survive with their outlines and buffers.

Heads, hair, outfits, palettes, decals: slot‑specific guidance

Heads: keep the eye–nose–mouth triangle clear of heavy trims where captions sit; for visors, provide tinted‑opaque gameplay versions to preserve facial reads under subtitles. Hair: design clumps that leave a clean crown contour so speaker IDs placed near the head don’t visually tangle; avoid steep value gradients at the hairline that fight caption bars. Outfits: allocate smooth panels at chest/abdomen as safe landing pads for UI stickers or AR; use trim bands to create value separation near lower thirds. Palettes: maintain rails that don’t collide with UI plates; ship a light‑mode and dark‑mode costume preview. Decals: ensure badge/icon contrast survives grayscale; provide outline variants; avoid micro serifs; define legal zones away from seams and straps to preserve typographic integrity.

Documentation and naming that make UX durable

Package your UX intent in the handoff. Include SubtitleSafe, IconSafe, and ContrastMap overlays on orthos; name files with searchable tags like CHAR_<Name>_SubtitleSafe, CHAR_<Name>_IconSet_FillOutline, Palette_P00_ValueRails_UI. Provide a readme paragraph that states caption line limits, icon stroke weights, minimum type sizes, and emissive policies. If a design requires a UI‑driven auto‑swap (e.g., HoodUp → Hair_Tied for speaker readability), write it into the compatibility matrix.

Common pitfalls and inclusive fixes

Relying on hue alone for icon meaning; placing subtitles over faces with heavy speculars or flashing trims; micro‑serif fonts that break at speed; visor glass that obliterates eye value; decals wrapped over sharp curvature; emissive tape blooming into caption plates. Fix with shape redundancy, value buffers, bold sans faces with clear counters, tinted‑opaque visor fallbacks, legal icon zones, and emissive discipline.

Closing: make meaning effortless

Inclusive UX isn’t just a UI team concern—it’s a character quality. When your designs reserve space for captions, build icons that survive distance and motion, pick font pairs that read across languages, and manage contrast between costume and UI, you lower the cognitive load for every player. That is good accessibility, good optimization, and good storytelling—because meaning should never be hard work.