Text Art

Borders, dividers, blocks and box-drawing characters.

About text art characters

Box-drawing characters, block elements, shading, braille dots and geometric shapes β€” the building blocks for terminal-style borders, dividers and simple diagrams. Alongside the raw characters there are ready-made frames and separators you can drop straight into a README, a commit message, a config comment or a chat.

Everything here is plain Unicode text. It survives copy-paste, works in a monospaced code block, and needs no image hosting.

Getting borders to line up

Box-drawing art only aligns if every character occupies the same width, so use a monospaced font β€” the code block in a README, a terminal, or a <pre> element on a web page. In a proportional font such as Arial, the corner and line pieces are different widths and the frame will look ragged.

Mixing weights is the other common trap: the light (β”€β”‚β”Œβ”), heavy (━┃┏┓) and double (═║╔╗) sets are separate families. Joining a light line to a heavy corner leaves a visible step, so pick one family and stay in it.

Frequently asked questions

What are box-drawing characters?

They are Unicode characters designed to draw boxes and lines in text β€” corners, edges, junctions and crossings. They come from early terminal and DOS character sets and are still the standard way to draw frames in a command-line interface.

Why doesn't my text border line up?

Almost always because the text is displayed in a proportional font. Box-drawing characters only align in a monospaced font, where every character has identical width. Put the art in a code block or a pre element.

Can I use text art in a GitHub README?

Yes. Put it inside a fenced code block so GitHub renders it in a monospaced font. Outside a code block the proportional font will misalign the characters.

What is the difference between β–‘ β–’ and β–“?

They are shade blocks at increasing density β€” light, medium and dark. Combined with the full block β–ˆ they give four levels of shading, which is how text-mode interfaces faked gradients and progress bars.