Input: Fonts for Code

Input is a typeface for code, designed by David Jonathan Ross and released by Font Bureau.

Source: Input: Fonts for Code

Why do we use fonts not designed for readers? Fancy fonts are nice for creating images with text or using as titles and headers. Think about the fonts book publishers have been using for generations of books and people.

It seems a better reading font is required.

Mashable: Why your Email Font is Ruining your Life

Fast Co: There’s Finally a Modern Typeface for Programmers

I’m hoping this brings back the ASCII art fonts, or better versions of them. My favourite is still FixedSys partly because I know how it will work and partly because it shows up bold rather than thin and faded.

Japanese ASCII Text Art: Shift JIS

Japanese ASCII artI used to label all the Japanese ASCII art as ANSI art and just click on by. It was a snobby attitude, but I was trying to keep the standards of ASCII art – which is so often confused or cheated on with ANSI art and assorted other versions of text art which don’t stick to the standard keyboard characters, no frills.

Since my early days as an ASCII artist I have learned the Japanese ASCII art is not ANSI art, it really is in a category of it’s own. But, there is an element of ANSI (using every and any keyboard character) thrown in.

SJIS is Japanese ASCII Art

Japanese ASCII art images are created from characters within the Shift JIS character set, intended for Japanese usage. So, Japanese ASCII art is usually called Shift JIS, abbreviated to SJIS or AA, meaning ASCII art. However, it’s not typical/ standard ASCII art because it uses characters outside of those standard for ASCII text art.

Shift JIS uses not only the ASCII character set, but also Japanese characters such as Kanji. Since there are thousands of Japanese characters, the images have more variety to them. However, they need to be viewed in the right font.

Unlike traditional ASCII art (which works best with a monospaced font) Shift JIS art is designed around the proportional-width MS PGothic font supplied with Microsoft Windows. However, many characters used in Shift JIS art are the same width. This led to the development of the free Mona Font where each character is the same width as its counterpart in MS PGothic.

SIJS art, like ANSI art and sometimes ASCII art, can be used to create animated text images using Adobe Flash files and animated GIFs. Shift_JIS has become popular and has even made its way into mainstream media and commercial advertising in Japan.

ASCII cityscapeSources for Japanese ASCII Art

The Mona Font

Mona Font is the  Japanese proportional font used to view Japanese text art.

 

Fonts that Work with ASCII Text Art

ascii art fontsMaking ASCII Art with Fixed Width, Sans-Serif Fonts.

I’ve been making ASCII art since 1998. I’m a great fan of the FixedSys font. It is a monospace font which works very well for illustrating with text. The individual characters are plain and straight up and down, without many flourishes. (Plain fonts, without flourishes are called sans-serif). FixedSys is also a text which displays on the dark side. This is nice compared to some monospace fonts which give a very light, thin display.

However, Windows Vista was the first new computer I bought where I noticed the FixedSys font is missing. I looked for it, tried other font options, but was not really happy. So I went online to see what people were writing about it.

I now know that FixedSys has been given an upgrade of sorts and is now known as Consolas. I found Consolas and gave it a try. It is nice, smoother than the old FixedSys. But, I am a bit of a traditionalist, loyal to whatever I liked first.

While searching I found the font called FixedSys Excelsior. It is like the old fashioned FixedSys but it is less smooth than the new Consolas font. You can see a pretty drastic difference in the two fonts when I show them in an ASCII art illustration of the Canadian flag.

Monospaced Fonts to Try

 

ldb ASCII Artist

ASCII artistBest viewed in a fixed width font. My favourite are FixedSys or Consolas.

The ASCII art gallery files open as plain text (.txt files). If you can’t see them (if they look messed up) change the font you are viewing them with.

Please respect the artist. Leave the artist credit, initials (mine are ldb), on each of the images.

Thank you, enjoy the ASCII art.

How to Make ASCII – By Flump (hjw)


How to Make ASCII
Last updated: June 4, 1998
Getting Started

If you want to make ascii art the first thing you should know is that you don't need a special program, or special skills to make it with. All you need is somewhere to type text into - your e-mail program, notepad, wordpad, that sort of thing - and an idea of what you want to draw. There are no secrets or rules other than the following:

1.) Use a non-proportional or fixed width font. Click HERE for a page on this site that will tell you what they are, or ask me for the text version of the page via e-mail.

2.) Don't use tabs!! Always, but always use the space bar (or your cursor keys/mouse if the program you're typing in supports that) for empty spaces. The reason for this is that different computers and programs interperet the size of a tab space differently, so although what you see on your screen looks fine, on someone else's your pic may look all split up.

3.) Only use the keyboard characters on an American standard keyboard. That means all the letters, numbers and punctuation that you can see printed on the keyboard keys. You can use the shift key, but don't use the alt key to make characters. The reason for this is similar to that for not using tabs - different computers interperet alternative characters in different ways. The idea behind ascii is that all computers can read it because it's made up of characters that all computers will recognise.

4.) Don't leave empty spaces at the end of each line. Make sure every line that you type ends on the last character, and not a few spaces after it. This can cause problems on other systems, with line wrapping and so on.

Your First Ascii

The best way to make a start is to take someone else's picture and see if you can copy it. That way you get a feel for how you can use different characters. We'll start easy. Try copying these shapes, which only use the characters:

/ | _
___ ___
| | / /
|___| /__ ___/

Easy huh? Now try making the same shapes again using the characters:

- " . , ` : > < This is what I came up with: .---. . .--. : : .' `. < >
"---" "---" `--'

Bit more tricky, and it doesn't look as neat, but some of these characters, and knowing how you can use them can come in very handy at times, which we'll see later. Have a go at copying these, just for practice. Change them if you like:

_ _ __ _ _ .^._ __
| |_| |_.' `._| |_| | / / / / / / |
| _ _ _ _ | / / / / .' `. /_____V / /
|_| |_| `.__.' |_| |_| / / / / / < > |[]_[]|
/ / / / / `. .' | |+| | / /
/ `"""""' _

Curves

It's handy to know where the characters 'sit' on each line. Are they at the top, in the middle or on the bottom of the line? A couple of ascii characters vary in their position from computer to computer, but mostly they all sit in the same place. Have a go yourself on your keyboard. Here are some examples.

Top of line: " ` '
Top or middle of line: ^ * ~ =
Middle of line: - +
Bottom of line: _ . ,

You can use all these characters on one line to make a pattern, like these:

_.,-=~+"^'`*`'^"+~=-,._.,-=~+"^'`*`'^"+~=-,._.,-=~+"^'`*`'^"+~=-,._

"^`'*-=~+,._.,+~=-*'`^"^`'*-=~+,._.,+~=-*'`^"^`'*-=~+,._.,+~=-*'`^"

Now try making a simple sig with a decorative border, using all the characters we've met so far. This is what I came up with:

_________________________
..,,++~~--==**''``^^"" Hayley Jane wakenshaw ""^^``''**==--~~++,,..
/| flump@quadrant.xs4all.nl /|
< : > Flump's Fantastic Ascii Collection < : >
|/ "Daddy.. why doesn't the magnet pick up your floppy disks?..." |/
""^^''``**--==~~++,,.._________________________..,,++~~==--**``''^^""

Using The Other Characters

The other ascii characters fall into three categories. Either they're the full height of the line or they're half height. Capitals and numbers are always full height. Compare them to some of the others - which are half height, and which are full height? Some examples:

Full height: A 7 % @ ! # ) ; & $ ] } | / > l t f k h d ?
Half height: a o v z

And then there's the 3rd sort. The characters that look like half height, but sit a little lower on the line, like they would in handwriting. These are: j g y p q

And all together they can make a slight curve, just like the others:

pqyjgacoevA8!@)lf$%;$fl(@!8AveocagjypqacoevA8!@)lf$%;$fl(@!8Aveoc

Lines and Diagonals

There are three basic lines to any picture - straight (either horizontally, or vertically), diagonal, and the third is the curve, which includes circles. We'll look at straight and diagonal lines first. Horizontal and vertical lines are simple in ascii - here are some examples:

Horizontal: 8888888888888888888888888888888888888888888888888888888888
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
----------------------------------------------------------
__________________________________________________________
..........................................................

Vertical: | 8 : ! 1 I
| 8 : ! 1 I
| 8 : ! 1 I
| 8 : ! 1 I
| 8 : ! 1 I
| 8 : ! 1 I

Diagonals are a bit more tricky. You can make simple ones using the / and keys. Diagonals with other gradients need a technique similar to that used to make slight curves. Experiment yourself to see how you can make different angles. Here are some examples to start you off:

/ .' _,-' __
/ .' _,-' __..--''
/ .' _,-' __..''
/ .' _,-' __..--''
/ .' _,-' __..--''
/ .' _,-' __..--'' ____....----"""
/ .' _,-' __..--'' ____....----""""
/ .' ,-' __..--'' ____....----""""

Circles

By now we've looked at the basic characters, character height, slight curves, lines, and slopes. The last thing to look at is what many people who make ascii have trouble with: circles. You're half way there already, though, because ascii circles are basically a mix of vertical and horizontal lines, slopes or diagonals, and curves. After a little practice, you'll get a feel for making different sized circles - I have a basic set of circles in a file that I refer to when I need a circular or rounded shape in an ascii pic, so now I can make them easily in all sorts of sizes. Start making small circles - how many ways can you think of to make a circle in under 5 lines? The bigger the circle the more rounded it can be, but try making circles of different sizes and see what you come up with. These are mine:

__
_ /"" /
1 line: O () 2 lines: (_) __/ 3 lines: __/

____
___ .-''-. .' `.
4 lines: / 5 lines: / 6 lines: /
| | | | | |
___/ / /
`-..-' `.____.'

_.-""""-._
9 lines: .' `.
/
| |
| |
| |
/
`._ _.'
`-....-'

That's the basic characters, and what you can do with them. Play with them, see what patterns and ascii scribbles you can make. Have a go at taking one of my pics, or another ascii pic from some of the excellent sites around, and copy it. Then change it! See how you can use the characters to make the picture look different. Can you make the expression on a face change? Can you make an ascii person fatter, thinner, taller, shorter? Give Barney the dinosaur a moustache, or, much better, multiple wounds? :-) This is how I learned. Many of my first efforts were absolutely dreadful. So I looked at how someone else had made the same sort of picture and learned from it. And I still do - probably why people often say my style is very similar to Joan Stark's!

To get you started, cut and paste this head into wherever you want to draw your ascii, and give it a face. Add a hat or a body. Or make the hair shorter or longer. Make it a clown or a devil!

,-.,~~.
,'///||`.
///(((||))).
((( )))
_))) |(_
._// /_.
`-'_/`-._.-'-`-'
' /=._.=/ hjw

Moving Forward

That's all the boring stuff about technique over. :-) What's coming up is a step by step demo of how I go about turning a picture into ascii.

When you first start, it's always a good idea to try to draw something simple. Gromit the dog is made up of very simple shapes - just ovals and circles, so I'll use him as an example.

To start a picture, I look for the simplest or most prominent feature of whatever I'm trying to draw. In Gromit's case, I reckon it's his nose. :-) I'll try the 2 line circle and see where that takes me. After I've drawn his nose I'll see if I can draw the shape of his head around it:

___
/
| |
/ _
| (_) |
/
`---'

Hmm.. don't like that - the top of his head isn't tall enough, but if I make it any longer it looks too narrow. If I make it wider, then the nose looks too small....

____
/
| |
| |
/ _
| (_) |
/
`----'

.... and to put the nose in the center, I'll have to make it yet another character wider.......

_____
/
| |
| |
/ _
| (_) |
/
`-----'

.. and though it looks like it would make a nice dog, it's not Gromit, really is it? So I'll make his nose a bit bigger; 3 lines this time, and try the face shape again.

____
." ".
/
| |
| |
/ __
| / |
| __/ |
/
`.____.'

Yep - that's more like it. :-) Next I usually try to fit the eyes in.

____
." ".
/ __ __
|/()/()|
|__/__/|
/ __
| / |
| __/ |
/
`.____.'

Nope. Don't like those. Normally I like to make eyes complete circles, or just use a couple of characters like "9 9" or "e e".But those would be too small. And these eyes are too big and don't look round enough. I'll try two lines instead.

____
." ".
/
| _ _ |
| (O)(O) |
/ __
| / |
| __/ |
/
`.____.'

Much better.Now to add the ears.

.-""-. .-""-.
/ -.`. ____ .' _
.' `" "' ,' /
`-' / `-'
| _ _ |
| (O)(O) |
/ __
| / |
| __/ |
/
`.____.' hjw

There are gaps left that look untidy though. This is where I couldn't get the characters to fit together. Often you can solve this by using a letter. This is about the only time I use letters and numbers apart from doing small details like eyes. I'll mess around with my favourite 'connecting' characters like: "j" "v" "V" "X" "x" "7" "i" "y" "Y". I'll use the "Y" I think, because it has the right angles in the right places to connect the ears to the head. :-)

.-""-. .-""-.
/ -.`. ____ .' _
.' `" "' ,' /
`-' Y Y `-'
| _ _ |
| (O)(O) |
/ __
| / |
| __/ |
/
`.____.' hjw

Last stage is to add the little details, and tidy up any messy or unclear bits. I don't like that left ear at the minute, so I'll, change that. But in the final version that goes on the web site I might decide to change it back. ;-) Have a last check to make sure he actually looks like the picture I've been working on, ask Robbie my fiance if he can tell what it is. If the Robbie test succeeds, then I hit the save button, and start looking for something else to draw. :-)

.-""-. .-""-.
/ ,.`. ____ .' _
/ `" "' ,' /
`-' Y Y `-'
| _ _ |
| (O)(O) |
/ __
| /# |
| __/ |
/
`.____.'
--" "-- hjw

These are only the basics. There are other techniques such as shading, making solid style ascii, anti-aliasing (making solid style ascii look smoother). But I don't use those much so I'm not qualified to explain them. But this info should be enough to get you started. :-)

If all else fails, you can always have a look at some of the other ascii art tutorials and hints available. There are about 7 that I know of, but the following three are the ones that I found useful and not too technical:

Daniel Au's
Rowan Crawford's
Joan Stark's


Choosing the Correct Font

I get loads and loads of mails from people saying they love ascii art and they want to cut and paste it, but when they do it ends up looking nothing like it does in their browser. Or they visit the site with their browser and the art looks totally skewed even on the web site itself.

They get this:

,-.
,--' ~.).
,' `.
; (((__ __)))
; ( (#) ( (#)
| _/____/|
," ,-' `__".
( ( ._ ____`.)--._ _
`._ `-.`-' (`-' _ `-. _,-' `-/`.
,') `.`._)) ,' `. `. ,',' ;
.' . `--' / ). `. ;
; `- / ' ) ;
') ,'
,' ;
`~~~' ,'
`. _,'
hjw `. ,--'
`-._________,--'
When what it should look like is this:

,-.
,--' ~.).
,' `.
; (((__ __)))
; ( (#) ( (#)
| _/____/|
," ,-' `__".
( ( ._ ____`.)--._ _
`._ `-.`-' (`-' _ `-. _,-' `-/`.
,') `.`._)) ,' `. `. ,',' ;
.' . `--' / ). `. ;
; `- / ' ) ;
') ,'
,' ;
`~~~' ,'
`. _,'
hjw `. ,--'
`-._________,--'

If this is your problem then the solution is very simple, I promise. ;-) The secret of ascii is that it is made and viewed in a certain sort of font. If you're on AOL then you'll have got lots of lovely software from them. Unfortunately all that lovely software seems to entirely ignore the sort of font you need for ascii art. You don't have to be on AOL to have this problem - it may just be the way you've configured whichever proram you're trying to view the ascii in, or cut and paste it to or whatever. Whichever program you're having the problem with the solution is roughly the same. Many programmes use what we call a proportional font. This means that the letters it produces have different widths just like handwriting does, to make it look neat. The trouble is that all those different widths screw up ascii. Ascii needs a non-proportional (sometimes called fixed width ) font. In this sort of font all the letters are the same width. Have a look at the following examples:

Example output with both a proportional and non-proportional font

Non-proportional font Proportional font
1 2 3 4 5 6 7 8 9 0
| | | | | | | | | |
m m m m m m m m m m
% $ ! * L p . 0 @ +
1 2 3 4 5 6 7 8 9 0
| | | | | | | | | |
m m m m m m m m m m
% $ ! * L p . 0 @ +

To see if the program you're using has the right sort of font, cut and paste the following two lines into it:

1wwwwwwwwwwwwwwwwwww|
2iiiiiiiiiiiiiiiiiii|

If you have the right font they will be the same length as each other. If you have the wrong font, they'll be different lengths. Mess around with the fonts you have and find out which ones are the right sort for ascii, and then make a note of them.

If your friends use the same programs as you, and you want to mail them some ascii, then you might want to put a message at the start of the mail saying something like: "View this mail in one of the following fonts:....." and list the fonts you found to work. One non-proportional font that most PC's have is called "courier" or "courier new", so you can try this one first if you have it. :-)

If this doesn't solve your problem, then your best bet is to make a post to the alt.ascii-art newsgroup asking for help. There are people there who are far more technically minded than me and will be far more likely to come up with an answer to your problem! :-)