![[images/The Ridiculous Engineering Of Text.webp]] **Creator:** Enrico Tartarotti · **Published:** 2026-09-02 · **Length:** 16:26 · [Watch on YouTube](https://www.youtube.com/watch?v=7DN3Ectm6UY) > *Text is the most over-engineered thing you look at all day.* — paraphrasing the video description ## 1) Detailed outline ### [0:00] Cold open: the emoji that isn't one character - Computers store ones and zeros, so every piece of text on any device is stored as **Unicode** code points, one code per character. - The **family emoji** isn't in that long list as a single code. Because emoji have so many variations and combinations, Unicode stores it as the **four individual person emojis joined by an invisible special character**, the **Zero Width Joiner (ZWJ)**. The ZWJ is "digital glue" that tells the system to treat the surrounding characters as one. - The upside: you can mix and match family members, skin tones and other variants. - Thesis: text looks simple, but rendering, typing and navigating it takes an enormous amount of hidden design and engineering. Meanwhile, the most revolutionary products of recent years are mostly just text. Text went from something to get rid of to the most important building block of tech. ### [1:05] Layer 1: Shaping and ligatures - "**office**" in **Roboto**: six letters, but only **four shapes** on screen, because "ffi" is merged into one **ligature** that looks better than three crowded letters. This is a pre-computer typesetting principle that digital fonts had to adopt. Switch fonts and the letters split apart again: same letters, different number of shapes. - **Cursor problem:** if three letters are one shape, where does the arrow key stop? The text system that merges characters also stores **caret positions inside the ligature**, so the cursor can land between the "f"s and still look right. - English is the easy case: - In **Arabic**, a letter takes up to **four different shapes** depending on its neighbors. - In **Hindi (Devanagari)**, the character you type **second is drawn first**. - Nearly all on-screen text goes through this **shaping** process. ### [2:08] Layer 2: From segments and pixels to vectors - **Seven-segment display** (Doc Brown's DeLorean time display in *Back to the Future*): seven segments switched on or off, the simplest way to show digital text, and still how calculators work. - **Original Macintosh fonts**: **bitmap fonts**, where each character is a grid of on/off pixels, **drawn by hand on graph paper by Susan Kare**. - Scaling breaks bitmaps. A bigger "A" is just a blocky cluster of squares, so every size needs a bigger grid and a **redrawn letter**, plus separate redraws for **bold and italic**. It doesn't scale. - **[3:09] Outline (vector) fonts**: letters described as math, with curves and points. They scale from huge to tiny… in theory. ### [3:42] Layer 3: Font rendering, hinting and kerning - Screens are still pixel grids. At 48 px or 16 px a letter is fine, but at **11 px one leg of an "m" lands on a pixel and the other between two**. Rounding everything to the nearest pixel turns it into a **different-looking letter**. - Solution: the **font renderer (rasterizer)**. Each time a glyph is drawn, it slightly **bends the outline to fit the pixel grid** for maximum readability. This is **font hinting**. Renderers also use **variable-opacity pixels (anti-aliasing)** to smooth edges. - **Kerning:** "r" followed by "n" can blur into an "m" if rendered badly, so fonts ship with **lists of thousands of letter pairs** and exactly how far apart each pair should sit. - **[4:45] Phishing via kerning:** a real-looking email from *microsoft.com* turns out to be from **"rnicrosoft.com"**, where "rn" passes for "m." It's a **homoglyph/typosquatting attack** that Enrico calls genius. - **Windows vs. Mac rendering:** - **Windows** optimizes for **readability and crisp, stark outlines** (strong hinting) because it must run on many low-resolution screens. - **macOS** supports far fewer, mostly higher-quality displays, so it favors **smoothness and faithfulness to the original font**. That's why text generally looks a bit better on Mac. - **[5:16] DOOM in a font:** font rendering rules are so complex that people fit a **fully playable DOOM inside the TrueType font format**. ### [5:16] Layer 4: Navigating text (the cursor) - The **text cursor (caret)** **blinks** so you can spot it in a wall of text, and **stays solid while you type** so it isn't distracting. - **The up-arrow problem:** 1. Naive approach: keep the same character index on the line above. But letters have different widths ("i" vs. "W"), so the cursor jumps sideways. 2. Use **horizontal distance** to find the closest character on the line above. But then pressing **down** lands somewhere else. 3. Add **memory of the original horizontal position** (the "goal column" or sticky x-position) so up then down returns you to the same spot. 4. Now **moving left/right must reset that memory**, and it all has to work across different fonts and sizes. - Something as simple as moving through text is "an absolute nightmare to build." - **[6:19] Where grids still win: monospace.** Fixed-width characters keep things aligned. - **Flask**, Enrico's video feedback tool: with proportional digits, the playback timecode's **colon would wiggle** as numbers change. A **monospace font** (fixed-width digits) keeps it steady, plus an added rolling-digit effect. - **YouTube's player timecode** uses the same trick. ### [7:20] The turn: text was meant to be invisible, and now it's back - All of this (curves, rendering, glyphs, emoji, Unicode) was built as an **invisible building block** that users and builders shouldn't notice. But text is now becoming **the most important building block** of everyday tech. ### [7:52] Sponsor segment: Granola - Enrico and producer **Bartek** reviewed the script and visual guidance on a call while Enrico took **spotty notes in Granola**. Granola turned them into a **full recap**. - Bartek connected **Granola to Claude**, which used the notes to drive the team's custom **animation-generating skill**, going from a call about animations to **finished MP4s in one go**. - The **Granola MCP** plugs into **Claude, Codex** and other agents ("What did Bartek say in the meeting?" "What did we decide last week?"). The description link gives new users a free first month. ### [8:54] Layer 5: The complexity line and the history of interfaces - The **Apple Watch home screen** has almost no words (a couple on the Calendar icon). We've spent 20 years building tech where you **find things by shape and color**, with icons and standard patterns. - **[9:26] The complexity line** is the maximum complexity your users can handle. - **Terminals came first.** To delete a file you typed the command perfectly, got "no such file," ran **`ls`**, ran **`rm`**, deleted the wrong file, and with **no confirmation and no trash can** it was gone forever. - The **Commodore 64 user manual** was needed for basically everything. Early computers were **far above** regular people's complexity line and barely below that of enthusiasts. - Interfaces started as text because text is the **easiest thing to store in ones and zeros** (back to Unicode). - **[10:28] Graphicization pushed tech below the line for billions:** - `rm` → **Trash can** plus a **confirmation modal** and error prevention. - File names → **icons you drag around**. - Long command lists → **dropdown menus**. Actions → **toolbars of symbols**. - "Word by word, we started taking text off the screen." - **[10:59] Microsoft Bob**: the extreme. A literal house, with a desktop that's literally a desk, a calendar on the wall and a clock that's a clock. It went too far, but it shows how badly the industry wanted text UI gone. ### [11:29] Why text came back - Text is everywhere again: chat-based AI products, and **Google** now giving a **paragraph of AI-written text** where it used to show a link. - GUIs were built for a **bounded set of actions** (these apps, these settings). How do you design an interface for a machine that can do *anything*? You return to text, but **fuzzy text** instead of exact commands. Most flows are question and answer, and the simplest UI for that is a **chat box**. - **[12:33] Why ChatGPT succeeded where terminals failed:** it reached **100 million users in two months** while still being all text, because it sits **below the mainstream complexity line**. Fuzzy text doesn't need perfect file names, doesn't break on typos, and "just gets it." - **Dictation tools** like **Wispr Flow** exploded for talking into chat boxes, since the text doesn't need to be perfect. Enrico still can't use dictation for emails and messages, where you want *perfect* text. ### [13:03] The new problem: AI climbed back above the line - As models improved, people moved beyond "glorified Google" to **coding, deep research, computer actions, content and graphics, marketing campaigns, agents running commands and connecting to services**, all in the same chat box and wall of text. - Enrico's own pipeline: custom skills connected to Google and APIs for **deep research** and **drafting trained on his past scripts**, a system that generates **visuals and storyboards**, and another that generates **animations in his style**, with Flask used for review and iteration. It saves dozens of hours per video. - But **we're back above the complexity line.** Tech-curious people use powerful agents and **Claude Code** workflows, while "normie" friends don't get it. Mainstream users are locked out again. - **[14:38] Bringing it back down is one of the most valuable problems in tech.** San Francisco builders design for their own bubble, but most people still use **ChatGPT like Google search**, have never paid for a premium model, and the only "agent" they know is a fictional one (a pop-culture gag). ### [15:08] The experimentation phase: making AI graphical again - **Conductor** and **Cursor**: graphical interfaces for managing **multiple coding agents in parallel**. - **NotebookLM** (Google): study by generating **podcast-style audio overviews** instead of walls of text. - **Flora** and **Higgsfield**: more immediate, visual interfaces for **image and video generation** and prompting. - **Flask**: a **feedback layer on video** where you can give edits and feedback to any AI model by **rambling and drawing**. - All of these build **abstractions and new behaviors** the mainstream can understand. Just as the folder icon killed typed paths 40 years ago, we're back at the drawing board to get rid of text again. ### [15:41] Outro - Teaser for Enrico's video on **notifications** ("probably the most powerful piece of the tech you use every day"). ### Key takeaways - A "character" on screen may be several code points (ZWJ emoji) or several letters in one glyph (ligatures). Shaping engines and caret maps hide this. - Readable small text depends on **rasterization, hinting, anti-aliasing and kerning**. Platform philosophies differ (Windows crisp, Mac faithful). - **Cursor movement** needs memory (the goal column). **Monospace** still matters for changing numbers. - The **complexity line** explains UI history: terminals → GUIs (→ Microsoft Bob) → fuzzy-text chat → agentic AI back above the line → a new wave of graphical abstractions. ## 2) Things mentioned ### Text technology and standards | Item | Notes | |---|---| | **Unicode** | Universal character encoding. Each character is a code point. | | **Zero Width Joiner (ZWJ, U+200D)** | Invisible joiner used to build emoji sequences like the family emoji. | | **Emoji sequences / variations** | Families, skin tones and combinations built from multiple code points. | | **Ligatures** ("ffi" in "office") | Several letters drawn as one glyph. Caret positions stored inside. | | **Complex script shaping** | Arabic contextual forms, Hindi/Devanagari reordering (handled by shaping engines). | | **Seven-segment display** | Simplest digital text, used in calculators and the DeLorean time display. | | **Bitmap fonts** | Original Macintosh fonts, hand-drawn on graph paper by Susan Kare. | | **Outline/vector fonts**, **TrueType** | Glyphs as curves and points. TrueType's programmable hinting is complex enough to run DOOM. | | **Font renderer / rasterizer**, **hinting**, **anti-aliasing** | Fitting outlines to the pixel grid. Variable-opacity pixels. | | **Kerning tables** | Thousands of letter-pair spacing adjustments ("rn" vs. "m"). | | **Windows vs. macOS text rendering** | Windows favors crisp readability (strong hinting), macOS favors smoothness and fidelity. | | **Text caret** | Blinks when idle, stays solid while typing. Up/down navigation with goal-column memory. | | **Monospace / tabular figures** | Fixed-width digits for timecodes (Flask, YouTube player). | | **Roboto** | Google's font, used in the ligature demo. | ### Security - **Homoglyph / typosquatting phishing**: the "**rnicrosoft.com**" domain impersonating microsoft.com by exploiting how "rn" renders like "m." ### Products, companies and tools - **Apple Macintosh** (1984) and its bitmap fonts. **Apple Watch** home screen (icon-only UI). - **Commodore 64** and its user manual. **Command-line terminals** (`ls`, `rm`). - **Microsoft Bob** (1995): the house-metaphor shell, the extreme of skeuomorphic graphicization. - **Trash can, confirmation modals, dropdown menus, toolbars, file icons**: GUI abstractions that replaced commands. - **Google Search** with AI-generated answer paragraphs. - **ChatGPT** (OpenAI): 100M users in two months, fuzzy-text chat UI. - **Wispr Flow**: AI dictation tool. - **Claude / Claude Code** (Anthropic), **Codex** (OpenAI): agents and agentic coding. - **Granola**: sponsor. AI meeting notes and recaps, **Granola MCP** for agents. - **Conductor**, **Cursor**: GUIs for running parallel coding agents. - **NotebookLM** (Google): AI audio-overview podcasts for studying. - **Flora**, **Higgsfield**: visual interfaces for AI image and video generation. - **Flask** (flask.do): Enrico's video feedback tool. Monospace timecode, an AI feedback layer driven by talking and drawing, and his team's animation-review loop. - **YouTube**: monospace timecode in the player. - **DOOM**: run inside a font. ### Concepts - **The complexity line**: the max complexity a target user can handle. Terminals were above it, GUIs brought tech below it, chat AI sits below it, agentic AI is back above it. - **Exact text vs. fuzzy text**: commands that break on a typo vs. natural language that "just gets it." - **Bounded vs. unbounded interfaces**: GUIs for fixed action sets, text for "do anything." - **Graphicization / skeuomorphism** and **abstraction** as the path to mainstream adoption. ## 3) Biographies ### Enrico Tartarotti (host, co-writer) Italian-born tech creator and designer behind the YouTube channel **Enrico Tartarotti** (about 255K subscribers), which goes behind the scenes of everyday tech products through designed video essays on UX, product design and tech culture. He builds **Flask** (flask.do), a video collaboration and feedback tool that he and his team use (along with custom AI skills) to make the videos. He runs **Rakugo Media** for sponsorships. Credits for this video: written by Enrico Tartarotti and **Andrej Andonov**, produced by Enrico and **Bartek Malinowski** (who appears in the Granola segment), edited by **Seequence**. Find him on X as @EnriTarta and on Instagram as @enritarta. ### People referenced - **Susan Kare**: graphic designer and pixel-art pioneer who created the original **Macintosh** icons and bitmap typefaces (Chicago, Geneva, Monaco and others) in the early 1980s, famously sketched on graph paper. She later did design work for Microsoft (Windows 3.0 card decks and icons), IBM, Facebook (virtual gifts) and Pinterest. - **Bartek Malinowski**: Enrico's producer and co-producer of the video. Shown connecting Granola to Claude to generate animations. - **Andrej Andonov**: co-writer. - **Doc Brown** (fictional, *Back to the Future*): his DeLorean's time-circuit display illustrates seven-segment text.