ASCII Art Generator
Block-letter banners from one built-in font, with the widest line measured against 80 columns and a plain statement of where a banner belongs.
### # # ### # # #### ##### # # ###
# # # # # # # # # # # # #
### # # # ## ### # # # # ###
# # # # # # # # # ## ## #
### ## ### # # #### # # # #
Lines 1
Rows 5 at 5 rows a line
Widest line 41 characters
against 80 columns fits, with 39 to spare
A banner is a picture of a word. A screen reader announces it as a wall
of punctuation, a search engine sees no heading in it, and selecting it
copies the fill character rather than the letters. That is fine in a
README, a terminal splash or a code comment, and it is not fine as a
heading on a page.
The widest line is 41 characters against the 80 columns most terminals,
diffs and code reviews still assume. A banner that wraps reads as broken
rather than as decoration, which is why this is the number to check
before pasting it anywhere.
If it goes in a README, put it in a fenced code block. Markdown
collapses runs of spaces everywhere else, and a banner rendered as a
paragraph becomes a single ragged line.
Every character in this text has a glyph in the font. Accented letters
and anything outside the basic set do not, and are drawn as solid blocks
rather than dropped.
One font, drawn into the tool rather than loaded from a figlet file. A
font file is a licence question and a dependency, and a banner needs one
that works rather than four hundred that might.
Letter spacing changes the feel more than the fill character does. At
zero the letters touch and read as a single mass; at two or three the
word reads as letters, which is usually what a header wants.
Keep it short. Six columns a letter means eight characters is already
most of a terminal, and a banner that needs two lines to hold a product
name is usually a sign the product name is not the thing to put in the
banner.
Output is valid and updates as you type.
Fix the highlighted fields to update the output.
A banner is a picture of a word. That is the thing to keep in mind about it: a screen reader announces it as a wall of punctuation, a search engine sees no heading, and selecting it copies hash characters rather than letters.
In a README, a terminal splash screen or a comment at the top of a file, that is fine, and those are the places it belongs. As a heading on a web page it is an image with no alt text.
So this draws the banner and measures it. The widest line is reported against 80 columns, because most terminals, diffs and code reviews still assume that width, and a banner that wraps reads as broken rather than as decoration.
How to use
- Put in the text, one banner a line. Lowercase is drawn as uppercase, since the font has one case.
- Choose the fill character and the letter spacing. At zero the letters touch; two or three reads as separate letters.
- Pick a comment style if the banner is going into source code.
Example
BUCKETWP at the default spacing:
### # # ### # # #### ##### # # ###
# # # # # # # # # # # # #
### # # # ## ### # # # # ###
# # # # # # # # # ## ## #
### ## ### # # #### # # # #Lines 1
Rows 5 at 5 rows a line
Widest line 41 characters
against 80 columns fits, with 39 to spareWrapped as a block comment, which is where a banner in source code lives:
/*
* ** *** *** * * ***
* * * * * * * * *
* **** *** * * * **
* * * * * * * *
* * * * *** * ****
*/Pitfalls
It is not text. Anything reading the page rather than looking at it gets nonsense. Put a real heading next to it, or keep it out of the page entirely.
Check the width before pasting. Six columns a letter means eight characters is already half a terminal. A banner that wraps looks like a mistake, and the tool tells you how much room is left.
In Markdown, use a fenced code block. Markdown collapses runs of spaces everywhere else, so a banner in a paragraph becomes one ragged line.
Accented and non-Latin characters have no glyph. They are drawn as solid blocks on purpose. Dropping them would make the banner look correct while saying something different from what you typed.
One font. Drawn into the tool rather than loaded from a figlet file, because a font file is a licence question and a dependency. If you need forty fonts, figlet itself is the answer.
Spacing changes more than the fill does. The character used for the ink matters less than whether the letters touch. Try zero and three before trying a different symbol.
Do not put a banner in a commit message. It survives into git log, git blame output and every tool
that renders them at a fixed width.
Compatibility
Runs in the browser: nothing is uploaded and nothing is stored.
Every glyph is five rows of the same height, and the tests assert that plus a single width per glyph, since one row short or one column wide would shift everything after it in the line. The rendered rows have trailing spaces trimmed rather than being padded, so the output has no invisible whitespace to clean up after pasting.
The font covers A to Z, 0 to 9 and the common punctuation, and everything else falls back to a solid block that is reported separately. Lowercase is mapped to uppercase rather than left blank.
The comment wrappers produce a valid comment in C-like languages, shell and JavaScript, with trailing whitespace trimmed so a linter that objects to it has nothing to object to.