Understand and create readable ASCII art
ASCII art builds drawings or large letters from characters. To keep the result readable, preserve spaces, use a monospace font and choose a width suited to its destination. This guide also explains strict ASCII versus Unicode and helps you inspect a drawing before pasting it.
Explore by topic
Choose a useful starting point
- A name or a banner: use the text-to-ASCII generator, then check the actual output width.
- A photograph or a logo: open the image converter, try a demo and compare the subject with its character rendering.
- A ready-made drawing: find an ASCII template that fits the available space.
- A drawing that breaks when pasted: inspect it below before adjusting individual spaces.
For a first attempt, use a short drawing and one destination. A result that looks good in a wide preview can become hard to read in a small chat window.
ASCII, Unicode, Braille, ANSI and FIGlet are different things
ASCII defines 128 code positions in 7 bits, including control characters; its ordinary printable range runs from space to ~ (RFC 20). Unicode is a broader encoding standard, not a font (Unicode Consortium FAQ).
| Family | What defines it | Example or use | What to check |
|---|---|---|---|
| Strict ASCII | Characters from the ASCII repertoire; drawings mainly use printable characters and line breaks. | /\, @#., unaccented Latin letters. | Spaces, width and a fixed-width font. |
| Unicode text art | Drawings that also use characters outside ASCII. | ♥, ─, █. | Font support, symbol width and emoji appearance. |
| Unicode Braille patterns | Dot patterns encoded in U+2800–U+28FF. | ⠁⠃⠿ for a dot-based graphic. | A graphic made of these patterns is not automatically readable braille text. |
| ANSI colours | Control sequences interpreted by some terminals. | Changing text colours in a compatible terminal. | Pasting the raw sequence does not ensure the destination will interpret it. |
| FIGlet banners | Large letters assembled from smaller characters using a font. | A project name or terminal heading. | Font, output width, supported input characters and licence. |
Terminal control sequences are documented in ECMA-48. Support depends on the terminal: a file containing colour sequences may look different in an ordinary text editor.
The Unicode Braille Patterns chart documents the dot patterns. The official FIGlet manual describes banner fonts and layout. These concepts help you choose a format; listing them here does not mean the image converter offers Braille or ANSI output.
Why a drawing becomes misaligned after pasting
Text art uses spaces as a grid. In a proportional font, i and W have different widths. An ordinary HTML paragraph can also collapse repeated spaces. The white-space property controls much of this behaviour, as described in the W3C CSS Text specification.
- Use a monospace font or a code block.
- Preserve leading spaces and line breaks.
- Avoid tabs: their displayed width depends on the destination’s tab stops.
- If the drawing is too wide, reduce its width at the source. Automatic wrapping will not preserve its shape.
- If Unicode characters still shift, try strict ASCII or export an image.
Width in code points describes the text; it does not measure pixels. A combining accent, a multi-character emoji or a wide character can occupy a different amount of space. The Unicode annex on character width discusses why width depends on context.
Check a misaligned design
Local analysis: your text stays in your browser. Unicode width counts code points, not actual display columns.
Two examples with results you can verify
Case 1 — A small cat: 7 columns and 3 lines
Copy the three lines alone, without an extra blank line. They contain 6, 7 and 6 characters respectively. With two line breaks, the complete string has 21 code points. It contains no tabs or characters outside ASCII.
/\_/\
( o.o )
> ^ <Expected result: maximum width 7, three lines, strict ASCII. Adding a final line break can change the line count: always compare identical input.
Case 2 — A box: 8 columns and 3 lines
This check uses internal spaces. Each line is 8 characters wide. Including the two line breaks, the string contains 26 code points.
+------+
| OK |
+------+Expected result: 8 columns, three lines and no characters outside ASCII. If OK touches a border after pasting, the destination changed the spaces or the font. These dimensions follow from the supplied strings; they are not a claim of testing in every application.
How an image becomes a grid of characters
The converter reduces an image to a grid. It estimates the brightness of each area from its red, green and blue components, then selects a character from an ordered palette. A dense character covers more of the cell than a dot or a space. This estimate using sRGB components is a visual approximation, not a photometric measurement.
Text cells have different heights and widths. An aspect-ratio correction helps stop faces looking stretched. It cannot guarantee identical geometry in a different font. Inversion changes which tones receive dense characters: check it against the chosen background.
| What you see | First adjustment to try | What to compare |
|---|---|---|
| The subject gets lost in detail. | Crop the original around the subject before importing it. | Silhouette and separation from the background. |
| Small shapes merge. | Increase the number of columns gradually. | Extra detail against the length of the output. |
| Everything looks grey or uniform. | Adjust contrast moderately. | Whether light, mid-tone and dark areas remain distinct. |
| The result looks like a negative. | Try inversion and check the light or dark background. | How bright areas correspond to the original. |
To reproduce a comparison, keep the file, crop, width, palette and background fixed. Then change one setting. Images are processed in the browser; the image page describes the controls and limits actually available.
Choose an output for your destination
| Destination | Suggested choice | Final check |
|---|---|---|
| Discord conversation | Small ASCII in a code block; PNG for a wide drawing. | Read it on mobile; see the Discord guide. |
| GitHub README | Fenced code block with a short description. | Preview the Markdown; see the GitHub guide. |
| Text editor or terminal | TXT and a monospace font; strict ASCII reduces dependencies. | Encoding, tab stops and window width. |
| Visual publication | PNG to preserve the arrangement. | Contrast, dimensions and a useful text description. |
An image preserves the layout but its characters are no longer directly editable. A text file remains small and editable, while its presentation depends on the application opening it.
Limits, accessibility and your next step
A decorative ASCII drawing does not explain a chart, an instruction or a result by itself. Add a useful descriptive sentence, especially for screen-reader users. Unicode characters do not become accessible simply because they are text.
The diagnostic identifies issues in the character string; it cannot certify fonts, every platform’s rendering or artistic readability. The examples are reproducible checks. If your result is still unclear, start with a small cat, a simple heart or a high-contrast image. The About page explains ArtASCII’s editorial scope.
To complement the practical exercise with an artistic perspective, the introduction to digital art on Contemporain.com considers the role of code, software and interaction in an artwork. Automatically converting an image into characters is a technique; it does not by itself define an artistic approach. Resource in French.