It’s actually already reflected in my previous post. After I published that post, I realized that I was seeing some inconsistencies across my phone, my computer, and my girlfriend’s laptop. The font looked much sharper on my phone and on my girlfriend’s laptop while appearing fuzzy on my monitor. “How can that be?” I wondered. My monitor has a 4k resolution just like my girlfriend’s laptop, and I’d be surprised if my font showed up best on the mobile site on my phone (which it did). So, I went crazy. I knew that the font was not allowed to look better for other people when it wouldn’t even obey the display of its creator!
But why was it doing this? Does it have to do with anti-aliasing in Chrome? In Windows 10? Does it have to do with resolution or scaling or sub-pixel stuff? Well, no one really knows, unfortunately. Such secrets have apparently been banished from the internet. Luckily for my sanity, I’m a pretty good problem-solver.
When I first created the font, I was using 1024×1024 svg files with 64×64 squares to make a 16×16 grid to ensure that my font would be pixel perfect. Well, no, that’s not what happened at all. It was fuzzy because—for whatever [su_tooltip style=”dark” position=”north” rounded=”yes” content=”This is a link to Frak (expletive) on Wikipedia“]frakking[/su_tooltip] reason!—it was creating a bunch of sub-pixel colorful noise stuff around what should otherwise be pixel perfect lines.
So, I said [su_tooltip style=”dark” content=”This is a link to Yare Yare Daze on Know Your Meme“]yare yare daze[/su_tooltip] and tried using 1200×1200 svg files with 75×75 squares to make a 16×16 grid in the hope that this would translate better to 12pt font. It didn’t. Then, I had the thought that I should create a smaller “pixel” within the squares. I did it this way and that way, but I ended up with 1024×1024 svg files with 64×64 squares to make a 16×16 grid except the “pixels” were (basically) 48×48 in the middle of the 64×64 squares, resulting in a “thinner” “pixel”. Yeah, I was definitely making stuff up, but it worked—for the most part. Like, 6 times out of 7, it’s much sharper than it was before, and, because I was already screwing around with the font anyway, I added a few new things.
Here’s the alphabet:
| m | n | p | t | k | f | s | h | l | w | y | a | e | i | o | u |
| m | n | p | t | k | f | s | h | l | w | y | a | e | i | o | u |
Here are some syllables:
| pa | pla | pam | plam |
| pa | pla | pam | plam |
Here’s a sentence:
| pe | pom | te |
| pe | pom | te |
| I | love | you |
Here are some other (stand-in) characters:
| c | q | – | _ | ? |
| c | q | – | _ | * |
*stands in for any other character
Also, «c» and «q» don’t mean anything. «c» is my test vowel and «q» is my test consonant, and, together, they help me test syllable structures with «qc», «qqc», «qcq», and «qqcq».
| qc | qqc | qcq | qqcq |
| qc | qqc | qcq | qqcq |
These syllables are utter trash, but they illustrate the other end of my font problem. With the “thinner” “pixels”, some vertices just like to disappear. Seriously, just look at the difference of the «c» between «qc» and «qqc». In «qc», the «c» has all of its vertices, but, in «qqc», it doesn’t! At least, that’s how it’s appearing on my monitor.
For now, however, this is more than good enough.