Back to Blog

How to Use ASCII Art in a GitHub README, on X, and in the Terminal

How do you use ASCII art in a README, on X, and in the terminal?

ASCII art only lines up when every character is the same width. In a GitHub README, wrap it in a fenced code block. In the terminal, it works as-is in a window at least as wide as the art. On X, posts use a proportional font, so ASCII art usually breaks; post it as an image or keep it very narrow.

Why does ASCII art break?

ASCII art depends on a monospaced font, where every character, including a space, takes up the same width. A picture drawn in 80 columns only looks right if each of those 80 columns lines up with the row above it.

Three things break it:

  • A proportional font. In most fonts used for normal text, i is narrower than M, and a space is narrow too. Rows drift out of line.
  • Collapsed whitespace. HTML and many apps merge runs of spaces into one, and some strip leading spaces.
  • Line wrapping. If the window is narrower than the art, long lines wrap and the picture falls apart.

Every tip below is a way of avoiding one of those three.

How to put ASCII art in a GitHub README

Put the art inside a fenced code block: three backticks on the line before, three on the line after.

```text
   /\_/\
  ( o.o )
   > ^ <
```

GitHub renders code blocks in a monospaced font and keeps every space and line break, so the art shows exactly as you pasted it. Adding text after the opening backticks is optional; it tells GitHub not to apply syntax highlighting, which could otherwise color parts of the art.

A few practical notes:

  • Don't paste it as plain Markdown. Outside a code block, Markdown collapses spaces and can turn characters like *, _, # and - into formatting.
  • Watch the width. GitHub doesn't wrap code blocks; wide ones get a horizontal scrollbar. On the repository page the readable width is limited, and on phones it's much less. Somewhere around 60–80 columns is a reasonable range for a header; narrower is safer on mobile.
  • Check for backticks. If your art contains three backticks in a row, use four backticks for the fence instead.
  • Consider the background. GitHub has light and dark themes, so art built for dark backgrounds may look inverted to some visitors. Test both if it matters.

If you want the logo to look identical everywhere, you can also commit a PNG of the art and link it with a normal image tag, keeping the text version in a code block below for people who copy it.

How to post ASCII art on X (Twitter)

The short answer: post it as an image.

X displays posts in a proportional font, not a monospaced one, so characters have different widths and rows don't line up. Multi-line ASCII art that looks right in your editor will usually look skewed once posted. Spacing can also be altered on the way through, and how it looks can vary between the app and the website.

Your options, from most to least reliable:

  1. Post a screenshot or PNG. The layout is fixed in pixels, so everyone sees the same thing. Add alt text describing the picture, since screen readers can't read it.
  2. Keep it tiny. Small one- or two-line pieces built from characters of similar width (like (o.o) or <(^_^)>) can survive, because there's less room for drift.

Also keep the character limit in mind: a single post without a paid plan is limited to 280 characters, and an 80-column picture uses that up in a few rows. That's another reason images work better.

How to show ASCII art in the terminal

Terminals use monospaced fonts by default, so ASCII art works there with almost no effort. The main thing to check is width.

Many terminals open at about 80 columns by default, a size that goes back to classic text terminals. Art that is 80 columns or narrower will fit without wrapping. You can check your current size with:

tput cols   # width in columns
tput lines  # height in rows

Common ways to use it:

  • Print it from a file. Save the art as logo.txt and run cat logo.txt. Useful for project banners in scripts.
  • Show it at login (MOTD). On many Linux systems, the contents of /etc/motd are printed after you log in over SSH. Put your art there (with sudo). Some distributions also generate the message dynamically from scripts in /etc/update-motd.d/, so check how yours works.
  • Show it when a shell opens. Add cat ~/logo.txt to ~/.bashrc or ~/.zshrc. Keep it short so it doesn't slow down or clutter every new tab.
  • Print it from a CLI tool. Many command-line tools print a small banner on startup. Store it as a multi-line string and avoid tabs, which can render at different widths.

If the art looks broken in the terminal, it's usually because the window is narrower than the art, or the file contains tabs or non-ASCII characters your font draws at a different width.

Image ASCII art vs. FIGlet text banners

There are two different kinds of "ASCII art," and they come from different tools.

Text banners (FIGlet, toilet)Image-to-ASCII
InputA word or phraseA photo, logo or drawing
OutputBig letters built from charactersA picture where darker areas use denser characters
Typical useProject names, CLI headersAvatars, logos, illustrations

FIGlet is a classic command-line program: figlet Hello prints "Hello" in large letters using a chosen font. It's the right tool for text headers. It won't turn a photo into a picture made of characters; that's what an image-to-ASCII converter does.

How to make ASCII art from an image

Artgen's ASCII art generator converts an image into ASCII art using a fixed conversion, not AI.

  1. Open the ASCII art generator and sign in. Upload an image up to 5 MB, or click "Try a sample image" to load a preview first.
  2. Set the number of columns. You can choose from 24 to 85; the default is 80, which matches a standard terminal width.
  3. Click "Convert image". Loading the sample doesn't convert it on its own; you need to click this button.
  4. Copy the text, download it as a TXT file, or download the image, then paste it into your README code block, terminal file or script.

Which width to pick:

  • README header: 60–80 columns.
  • Terminal / MOTD: 80 or less, so it fits a default window.
  • Narrow spots (mobile, chat, small banners): start near the minimum of 24 and increase until the subject is recognizable.

Images with a clear subject, strong contrast and a simple background convert best. Crop to the subject before uploading.

This conversion is free with sign-in, no credits needed.

FAQ

**Why does my ASCII art look broken on GitHub?

** It's probably not in a code block. Wrap it in triple backticks so GitHub uses a monospaced font and keeps all spaces.

**Can I post ASCII art on X without it breaking?

** Not reliably as text, because X uses a proportional font. Post it as an image, or keep it to a very small, narrow piece.

**What width should ASCII art be for the terminal?

** 80 columns or fewer fits most default terminal windows. Check yours with `tput cols`.

**Is the Artgen ASCII art generator free?

** Yes. It's free with sign-in, no credits needed.