Is this font alright?

Started by Darius Poyer, Mon 26/12/2011 13:57:47

Previous topic - Next topic

Darius Poyer

Here is the final product!

If you want it, here it is: DOWNLOAD 500.0




I am working on a new project at the moment and I would like to use this small font I developed. I am just concerned that it may be hard to read for some, so I want to know if nay of you would be bothered if you played a game with a font like this.

Personally I am somewhat dyslectic and I don't know if that makes it easier or harder for me to read it.


same post using the font:


You can download it here if you want to look at it a bit closer, or use it.

EDIT: fixed the background.

DoorKnobHandle

It's readable but not comfortable to read at all so I would not suggest to use it, unfortunately!

Tabata

... same here - readable, but not "comfy"

(and the bg-color hurts badly  ;) )

Darth Mandarb

I only had slight difficulty reading it (and it might be because of the background color)!

Not sure though... I did experience the difficulty!  Might need to be just a tad bigger to give a bit more detail to each letter?

Darius Poyer

Sorry about the background, I just took a screenshot of a basic gui in AGS with transparency. It's an easy fix with Photoshop so it should be alright now.

Thanks for the input. The game will be text heavy and I'd like the font to be as small as possible without overextending on lowercase letters, like many of the normal small fonts do.

In the end, any opposition is pretty bad, would be a real shame to release a game where the font makes it unplayable to some. I will have to design a slightly larger font.

Dualnames

the problem lies with a,e,o.
Worked on Strangeland, Primordia, Hob's Barrow, The Cat Lady, Mage's Initiation, Until I Have You, Downfall, Hunie Pop, and every game in the Wadjet Eye Games catalogue (porting)

Calin Leafshade

You could extend the o a and e characters up 1 pixel. This doesnt make the font take any more room since the taller letters would still be higher.

If you did that though you would need to extend the other smaller letters to so it didnt look weird (r for instance)

Darius Poyer

Quote from: Dualnames on Mon 26/12/2011 17:01:59
the problem lies with a,e,o.

Doesn't it always?

At least with the letter 'A' you have a lot of variants. With the 'E' you really don't have a lot of options so it ends up being very obscure at lower resolutions.

I created this when trying to slightly increase the resolution, I began with 'E' and 'A', because they are horrible things to minify.


That intermediary 'E' looks terrible to me. I wouldn't want to end up with a font that is small but also looks awful.

It's an interesting challenge though, there might still be some ingenious arrangement to make that slightly larger 'E' not look like crap.

Darius Poyer

Ok, I think I've got it.

Instead of a minimun of 3x3 this is 3x4.

Any readability issues?


DrewCCU

Quote from: Darius Poyer on Mon 26/12/2011 19:44:06
Ok, I think I've got it.

Instead of a minimun of 3x3 this is 3x4.

Any readability issues?



I think this font looks great. The only thing that strikes my eye weird is the upper case Q.
"So much of what we do is ephemeral and quickly forgotten, even by ourselves, so it's gratifying to have something you have done linger in people's memories."
-John Williams

Radiant

I think the uppercase E, H, K, N would look better if the middle part was one pixel higher.

I agree the Q looks odd. Also, the upper A should have rounded corners at the top, I think. On the other hand, I'm not sure why the lower p does have a round corner. Finally, the lower z looks like it's cursive.

Babar

I echo Drew's opinion that the font looks great now. I also personally find Q a bit weird, but the main thing is that they are all RECOGNISABLE.
The ultimate Professional Amateur

Now, with his very own game: Alien Time Zone

Darius Poyer

#12
So I've changed the AQ... maybe something else, I don't recall.


Quote from: Radiant on Mon 26/12/2011 20:56:44
I think the uppercase E, H, K, N would look better if the middle part was one pixel higher.[...]
It used to be like that actually. I decided to lower the center line on most letters because it helped the uppercase letters connect to the lowercase ones.
Quote from: Radiant on Mon 26/12/2011 20:56:44[...] On the other hand, I'm not sure why the lower p does have a round corner.[...]
It's a bit complicated. Firstly I wanted to incorporate some slanted lines to add features to some letters. Imagine a font as being structured according to three lines. One marking the maximum height, one for the minimum height, and one for features, like the middle line in the 'e' or 's'. One such structure for lowercase and one for uppercase. Because the 'e' I ended up with here I decided to incorporate two 45 degree lines in addition to the previously mentioned structural lines. Like this:

So when I had this structure I tried to incorporate slanted features wherever I could, without destroying readability.

The other reason is that I read about a font called 'dyslexie'. It was designed for dyslectics to be as readable as possible. The major reason it works is because it strives to give letters as unique a shape as possible.

In normal fonts, the 'p' looks like a mirrored 'q' or an upside down 'b' which in turn looks like a mirrored 'd' etc.

So when I gave the 'p' in the font slants according to my structure it makes the 'p' stand out from the other similar ones like 'b' 'd' 'q'. Making the font a lot more readable.
Quote from: Radiant on Mon 26/12/2011 20:56:44[...]Finally, the lower z looks like it's cursive.
The 'z' looks cursive because it's hard to convey its shape otherwise, the 's' can suffer some simplification because its a letter thats used often in easily recognizable contexts. The 'z' is a pretty rare letter so when it comes up it needs to read very clearly.

Any other permutations just wouldn't read well:

Darius Poyer

#13
Alright, after some input from Tabata, I'm ready to call this complete.

I changed the 'z'. EDIT:added Matti's changes.

If you want it, here it is: DOWNLOAD 500.0
I also updated the downloads page on dariuspoyer.agser.me

Matti


I don't know, I think it's strange that P and R have round upper left corners while E and F don't. I'd change the former and I'd still change the Q too:


Darius Poyer

Yeah you are definitely right about that Matti.

I updated it all, images and download links.

Kweepa

Lovely font.
I'd change the B and the S so that the middle horizontal lines in all the capital letters are the same elevation.

Still waiting for Purity of the Surf II

Shane 'ProgZmax' Stevens

#17
There's some oddly inconsistent properties to the overall design, like the hard shaped A while the B has soft edges, meanwhile the P and R have all soft edges.  The important thing with fonts is that even if you're going with whimsical or pixel fonts you want the letters to look like part of a cohesive unit.  This means establishing some mental ruleset for how you will design them and then sticking to it even for the lowercase letters.  So if the uppercase letters/numbers/characters are all hard-edged you want to translate that to the lowercase, if they are all very soft then you do the same, or if they are some combination of the two (or if they are italicized, etc).

Basically, I'm just advising you to focus on consistency.

Edit:  I went ahead and made two quick variations of your font, one sticking to the high horizontal line cutting the letters and the other using a bent line that allows for more style and fanciness.  The last small font is a miniature version of the uppercase font before it just to give you an idea of what you can do if you want to maintain maximum readability with your font even in lowercase (some people find a's, e's,you's and v's particularly hard to spot with low-res pixel fonts so this is one workaround).

(this may look distorted as it's scaled up)




I hope this helps.

Snarky

Did you miss this?

Quote from: Darius Poyer on Tue 27/12/2011 12:31:53
It was designed for dyslectics to be as readable as possible. The major reason it works is because it strives to give letters as unique a shape as possible.

In normal fonts, the 'p' looks like a mirrored 'q' or an upside down 'b' which in turn looks like a mirrored 'd' etc.

So when I gave the 'p' in the font slants according to my structure it makes the 'p' stand out from the other similar ones like 'b' 'd' 'q'. Making the font a lot more readable.

Darius Poyer

#19
Quote from: ProgZmax on Fri 30/12/2011 06:08:34
There's some oddly inconsistent properties to the overall design, like the hard shaped A while the B has soft edges, meanwhile the P and R have all soft edges.
When it comes to low-rez fonts I find that the notion of consistency becomes very abstract, I'll get into that later. But I guess you meant that the B has a hard shape, and the A is soft? I also recently changed the P and R to be harder. This image is the one I mean.

Quote from: ProgZmax on Fri 30/12/2011 06:08:34
The important thing with fonts is that even if you're going with whimsical or pixel fonts you want the letters to look like part of a cohesive unit.  This means establishing some mental ruleset for how you will design them and then sticking to it even for the lowercase letters.  So if the uppercase letters/numbers/characters are all hard-edged you want to translate that to the lowercase, if they are all very soft then you do the same, or if they are some combination of the two (or if they are italicized, etc).

Basically, I'm just advising you to focus on consistency.
I believe that the consistency exists. According to this structure I derived as a result of my design for the 'e' character,


But you can't establish any strict rules when it comes to a font this small. It has to be flexible in favor of readability.

Quote from: ProgZmax on Fri 30/12/2011 06:08:34
Edit:  I went ahead and made two quick variations of your font, one sticking to the high horizontal line cutting the letters and the other using a bent line that allows for more style and fanciness.  The last small font is a miniature version of the uppercase font before it just to give you an idea of what you can do if you want to maintain maximum readability with your font even in lowercase (some people find a's, e's,you's and v's particularly hard to spot with low-res pixel fonts so this is one workaround).



With small pixel art, especially fonts, you need to work with the fact that you are going to have very sharp lines. Black on white hard edges create visual distortion.

A shape like this:

ends up reading like the font is narrowing towards the high point of the circular element. This changes a lot depending on resolution, at a resolution high enough It becomes less of a problem, but I'm working towards a font that very readable in 320 200, where having a small font matters.

You seem to have changed the 'k' as well. The bottom thickness gives the character weight at the bottom, actually helping readability.

Readability is a fascinating idea with fonts. Take the dyslexie font for instance, making a font that's readable to dyslectics is useful for everyone, if you've ever read any large passages in the dyslexie font you would find that its very comfortable.
That font basically tries to make individual letters distinct. I believe this works with the fact that the human brain is really good at detecting patterns (in-fact it loves them too much) so when letters are unique they each become equal distinctions in a word, making it easier to read.

Of course you may not find that the letters are all that important, but you can read this perfectly fine:

"Aoccdrnig to a rscheearch at Cmabrigde Uinervtisy, it deosn't mttaer in waht oredr the ltteers in a wrod are, the olny iprmoatnt tihng is taht the frist and lsat ltteers be at the rghit pclae. The rset can be a toatl mses and you can sitll raed it wouthit porbelm. Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef, but the wrod as a wlohe."

That kind of makes the individual distinction of letters even more relevant.

I'm not sure what you mean by this:
"The last small font is a miniature version of the uppercase font before it just to give you an idea of what you can do if you want to maintain maximum readability with your font even in lowercase (some people find a's, e's,you's and v's particularly hard to spot with low-res pixel fonts so this is one workaround)."

Quote from: Kweepa on Fri 30/12/2011 04:17:13
Lovely font.
I'd change the B and the S so that the middle horizontal lines in all the capital letters are the same elevation.


I guess the misconception here is that the primary element is the medium-line. Again I want the perceived weight of the characters to be low, It generally translates to having big circular elements at the bottom, so they are actually organized by putting an open space of four empty pixels at the bottom-most appropriate point of any given letter.


SMF spam blocked by CleanTalk