Font test

A Story

The current font stack is "MS Pゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, sans-serif

This was applied to this website to perform a test.

This font stack was stolen copied from http://www.fuccon-family.com/dvd/fuccon.html

In windows it does not have anti-aliasing. Meaning that the edges are pixel perfect, and there is no filtering applied to it to smooth the font. In certain formats this smoothing is applied automatically, because those fonts are in a vector format, and it's the OS which applies this smoothing.

I don't like this smoothing. And it is something that you should be able to turn off. But as it seems right now it's not something that can be turned off easily.

There is a hack however, which allows you to apply a CSS filter linking to an SVG filter but on HTML elements, sorta applying a binary filter to a 2 colored text thing. Meaning that it only works on a black and white thingymajig. But then you can apply another filter (or maybe something different which I don't know yet) to change the color into whatever else you want. But this is good for black on white text.

But as soon as you zoom in this text, it messes it up, because zooming in this text to a value that's not an integer multiple of 100% results in incorrect results. This is not that much of a problem on desktop browsers, but it is on mobile browsers. So in order to make this technique viable for mobile browsers, you would have to figure something out.

I suppose whe could use some complicated JS in order to read out the current zoom value, and then change the entire text to something that is the closest integer multiple of whatever the users wants the scale value to be, or something simmilar.

But it would be much easier if we could just use a bitmapped font, like we can in windows. But these fonts that we can use are just the fonts which are pre-installed on their machines, and not webfonts which are added though CSS and downloaded on demand.

And as far as I know, it's not something that we can just do. We have to rely on pixel fonts in a vector format, resulting in the

These are the hiragana characters:
ぁあぃいぅうぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづてでとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもゃやゅゆょよらりるれろゎわゐゑをんゔゕゖ゙゚゛゜ゝゞゟ

You know, interestingly enough, if you zoom this one in on windows, it does revert to a vector font. I wonder if it switches the font dynamically, or if this font does have vector defined in it. IDK.

Serif font

This is the serif font. This is often the default chosen font.

Default font

This is whatever font is chosen by default

Sans-serif font

This is in sans-serif

monospace font

This is in monospace. This is commonly used for programming and script writing. This is what also was used back when people used typewriters. Because in those times being able to type stuff was already complicated enough, having the typewriter also handle kerning would have been too much.

cursive font

This is in cursive. I pretty much know nothing about this one. But what I do know is that this one looks very different on windows compared to android.

The SVG crispify hack in action

This crispify thing was stolen from https://stackoverflow.com/a/35486696. I also copied this and put it on a few more stackoverflow posts, because I have no shame wanted to help people.

Some crispy text within the svg element.

But you can use it outside of the SVG tag as well.

Japanese font stack
Serif
default
sans-serif
monospace
cursive

Related