ASCII Art Banners for READMEs, Terminals and Dev Culture

You have seen them at the top of a README.md: a stylized banner in monospace characters that spells out the project name. figlet in the terminal, a tool in the browser, a design choice that signals "this project has personality." The technical side is simple: a character glyph is mapped to a block of characters, and the blocks are concatenated. But the aesthetic decisions — font choice, width, rendering consistency — are where it becomes interesting.

The ASCII Text Art Generator produces banners in 8 bundled fonts, all rendered in your browser.

How figlet fonts work

Figlet (Frank, Ian, and Gareth's LETter) was created in 1991. A font file maps each ASCII character to a column-oriented block of characters. The blocks are assembled side by side to spell out the input text.

A minimal font defines the shape of each letter as a set of rows. The character A in the standard font looks like this (simplified):

  A
 A A
AAAAA
A   A
A   A

A more elaborate font like banner3-D uses full-width Unicode blocks to produce a denser, taller output. A mini font produces a shorter, narrower banner suitable for inline use.

# Figlet in the terminal
brew install figlet
figlet -f slant "DevTools"
figlet -f small "DevTools"
figlet -f bubble "DevTools"

The font selection problem

Not all fonts support all characters. The standard font supports ASCII letters, digits, and common punctuation. Unicode characters beyond ASCII (accented letters, emoji, non-Latin scripts) are often printed as spaces or skipped in older fonts.

When you want a banner for a project with a non-ASCII name, test the font first. Some fonts handle café better than others. Some fonts handle Unicode box-drawing characters better.

# slant font
   __    ____ _____   ____  _   _ ___ _   _  ____ _____ ___ ___ 
  / __\  / ___|_   _| / ___|| | | |_ _| \ | |/ ___|_____|___ \__ \
 ( (__  | |     | |   \___ \| |_| || ||  \| | |       | | |__) |
  \__)  \_____| |_|   |____/ \___/|___|_|\__|\____|    |_||___/

This is slant at its best — readable, distinctive, consistent height.

Terminal rendering and font considerations

ASCII art that looks perfect in your terminal may look misaligned in a different terminal, a GitHub README, or a web page. The reasons:

• Variable-width vs. monospace: ASCII art must be viewed in a monospace font. Any variable-width rendering (a word processor, a web browser without a monospace font specified) breaks the alignment.
• Character width: Some Unicode characters are double-width in terminals (East Asian characters). Mixing them with ASCII in the same banner causes misaligned output.
• Line endings: \r\n (Windows) vs. \n (Unix) vs. \r (old Mac). If you copy-paste a banner between systems, line endings can shift the alignment. Always copy the raw text, not the formatted display.

GitHub's web rendering uses a monospace font by default in code blocks, so a banner in a fenced code block renders correctly. In the raw GitHub README preview, it also renders in monospace.

Practical uses beyond decoration

ASCII banners are not purely aesthetic. They serve real communication purposes:

Server startup scripts:

figlet -f small "Starting..."

Docker log prefixes:

[$(date +%H:%M:%S)] [INFO]  Starting worker pool...
[$(date +%H:%M:%S)] [INFO]  Connected to postgres://db:5432

A banner in a startup log makes the beginning of a run easy to find when scrolling back through logs.

CLI tool output:

Many CLI tools use banners to brand their output. create-react-app, vue create, and similar scaffolding tools use ASCII art to make their output distinctive and recognizable.

README headers:

# My Project

---

|\ | |___ |/ |_ |\ | | \| |___ | \ |___ | \|

A project banner in the README establishes identity at a glance. Keep it small (`-f small` or `mini`) — a full-height banner pushes your actual content below the fold.

## Font reference for common use cases

| Font | Character | Best for |
| --- | --- | --- |
| `small` | 7px tall | README headers, inline |
| `slant` | italic, wide | Terminal startup, log headers |
| `standard` | clean | General purpose |
| `bubble` | bubbly | Fun projects, playful tools |
| `banner3` | wide, blocky | Big headers in wide terminals |

## The [ASCII Text Art Generator](/ascii-text-art) in the browser

The browser tool generates banners without installing figlet. Select a font, enter your text, copy the output. Since the rendering uses the same figlet font definitions as the command-line tool, the output is consistent with what you would get from `figlet` locally.

Combine the output with the [Slug Generator](/slug-generator) for consistent naming throughout your project, and use it to add a distinctive header to your README without adding a raster image that slows page loads.