Terminal / Console Font Stack
Build a font stack optimised for terminal emulators and console-style UI components with Powerline glyph support.
Detailed Explanation
Terminal / Console Font Stack
Terminal UIs and console-style web components need monospace fonts that support a wider range of glyphs, including box-drawing characters, Powerline symbols, and Nerd Font icons.
The Declaration
font-family: "MesloLGS NF", "Hack Nerd Font",
"Fira Code", "Source Code Pro",
"Ubuntu Mono", "DejaVu Sans Mono",
Consolas, monospace;
Special Characters
Terminal fonts need to render:
- Box-drawing characters (
─,│,┌,┐,└,┘) for TUI borders - Powerline glyphs (
,,) for status line segments - Block elements (
█,░,▒,▓) for progress bars - Braille patterns for sparkline graphics
Nerd Fonts
Nerd Fonts is a project that patches popular programming fonts with thousands of additional glyphs from icon sets like Font Awesome, Devicons, and Octicons. "MesloLGS NF" and "Hack Nerd Font" are Nerd Font variants of Meslo and Hack.
Web Terminal Considerations
When building a web-based terminal (e.g., with xterm.js or hterm), consider:
- Self-host the font to avoid CDN latency on first render
- Preload the font file to prevent FOIT in the terminal area:
<link rel="preload" href="/fonts/MesloLGS-NF.woff2"
as="font" type="font/woff2" crossorigin>
- Set a fixed cell size based on the font metrics to prevent character misalignment
Font Size for Terminals
Terminal fonts work best at 13-15px depending on the font. Too small and dense code becomes hard to read; too large and you lose valuable screen real estate for columns.
Use Case
Use this stack for web-based terminal emulators, SSH clients in the browser, CLI documentation with rendered output, and any interface that needs to display shell prompts, TUI applications, or Powerline-style status bars.