Issues with pixel fonts

[NinAcTi0N]

I've been struggling with this for a while, and I wanted to hear from you guys if there are any good alternatives to it :']

So, I wanna use pixelated fonts on my site cause they're nice and crunchy, but they always end up looking blurry on my display. I use Windows, and it's quite annoying when the only fonts that look crusty are the native MS Gothic ones, which don't even render properly on mobile (which is sad, cause I find them charming  )

Do you guys happen to have any good ideas on what I could do? Any help would be greatly appreciated 

[springhand]

hmm, maybe you haven’t turned on cleartype yet? go to the taskbar searchbar > find “adjust cleartype text” and click > check the box > click “next” and follow instructions

[Melooon]

Im not a font expert; but as far as I understand there are different kinds of fonts; and most are intended to handle scaling smoothly in a vector style (Variable fonts). Most pixel fonts are different because they are bitmap format, meaning they have a fixed array of pixels.

As far as I know only some kinds of fonts are supported in some browsers; and chromium ones don't properly support bitmap fonts (I believe firefox does might handle it better?) at the moment. Its also different on Windows and Mac with macs generally having less issues.

You can play around with some CSS attributes like font-smooth but its hin-n-miss; there is also -webkit-font-smoothing whitch I belive is targeted at chrome on windows - I've not played around with it myself though!

It reminds me I should actually test my sites on windows because I'm very picky about how they look and really the only proper way to view my sites atm is Firefox on a Retina display mac 

[Paprika]

I'm using Windows 95 font on my synthwave page it looks good I think but maybe it's not the pixelated style you're looking for !

[NinAcTi0N]

hmm, maybe you haven’t turned on cleartype yet? go to the taskbar searchbar > find “adjust cleartype text” and click > check the box > click “next” and follow instructions

That's the thing, I have cleartype enabled :'] I even tried disabling antialiasing on the system, and the fonts would be super crisp, but the rest would look awful lol

I fear this may be something with my display. I code on the native res of 1366x768 pixels (on a laptop).

[NinAcTi0N]

Im not a font expert; but as far as I understand there are different kinds of fonts; and most are intended to handle scaling smoothly in a vector style (Variable fonts). Most pixel fonts are different because they are bitmap format, meaning they have a fixed array of pixels.

As far as I know only some kinds of fonts are supported in some browsers; and chromium ones don't properly support bitmap fonts (I believe firefox does might handle it better?) at the moment. Its also different on Windows and Mac with macs generally having less issues.

You can play around with some CSS attributes like font-smooth but its hin-n-miss; there is also -webkit-font-smoothing whitch I belive is targeted at chrome on windows - I've not played around with it myself though!

It reminds me I should actually test my sites on windows because I'm very picky about how they look and really the only proper way to view my sites atm is Firefox on a Retina display mac 

Ah yes... I was initially intending on using normal vector-esque fonts, but I kept on running into the issue that the font would still be blurry and not crisp. Even messing with the text rendering was being finicky, since I wasn't seeing much of a difference 

I'm still willing to explore and see what I used that worked best for my site. I was using a Japanese font, but its comma was blending in a LOT with the period, so I was looking for a replacement. Hmm... I guess I'm still gonna be experimenting with that.

What's funny is that I know the fonts look great on my phone :'] It's mainly the fact the text gets blurry for me on this PC.

[NinAcTi0N]

I'm using Windows 95 font on my synthwave page it looks good I think but maybe it's not the pixelated style you're looking for !

Hmm, I'll still check it out!    I have a thing for boxy pixel fonts, and also stuff that feels similar to MS UI Gothic and MS PGothic ^^

[NinAcTi0N]

The example I can give is this picture...

The font appears weirdly blurry, and it makes me ponder if other people would see it like this-



And for context, this is from a Tea Maker thing I'm making, in which you can change your tea color and cup design, and add it to your site ^^

[Memory]

@Ninaction: Do you have a link to a webpage, where one of those blurry looking fonts is used? The blocky digital-display font on your webpage looks fine here.

[arcus]

This Github repo has everything you need to know.

[NinAcTi0N]

@Ninaction: Do you have a link to a webpage, where one of those blurry looking fonts is used? The blocky digital-display font on your webpage looks fine here.

I could give an example, actually... in this page of the apple truck, there is the same issue with the font blurriness, since it's also a pixel font.

https://ninacti0n.neocities.org/subpages/apple_truck.html

It still frustrates me, but adding a bit of a text shadow to it improved the readability a little :'T

[NinAcTi0N]

This Github repo has everything you need to know.

OOO!! I immediately started troubleshooting my page with this :'] Hopefully it'll work as expected on my end ^^ Thank you so so much for the guide!! 

[Memory]

https://ninacti0n.neocities.org/subpages/apple_truck.html

This LunchMenu pixel font on that page combines two things that make it difficult to read, being thin and small at the same time. But no blur here on a low-res 1024x600 screen. Those letters must be disappearing in the void on a display with a majestic resolution. I wonder if a more sturdy font would look better on your devices.

Im not a font expert; but as far as I understand there are different kinds of fonts; and most are intended to handle scaling smoothly in a vector style (Variable fonts). Most pixel fonts are different because they are bitmap format, meaning they have a fixed array of pixels.

The original bitmap pixel fonts (in .FON format in Windows) needed to be converted to vector fonts (.TTF for ex.) to be used on webpages. So all pixel fonts on the web are in technically vector fonts as far as I know. Except maybe the standard font in the Lynx browser on the DOS command line, those are geniune bitmap pixels being displayed on screen.

[NinAcTi0N]

This LunchMenu pixel font on that page combines two things that make it difficult to read, being thin and small at the same time. But no blur here on a low-res 1024x600 screen. Those letters must be disappearing in the void on a display with a majestic resolution. I wonder if a more sturdy font would look better on your devices.


The original bitmap pixel fonts (in .FON format in Windows) needed to be converted to vector fonts (.TTF for ex.) to be used on webpages. So all pixel fonts on the web are in technically vector fonts as far as I know. Except maybe the standard font in the Lynx browser on the DOS command line, those are geniune bitmap pixels being displayed on screen.

All of this actually gave me an idea... once you mentioned bitmap fonts, I ended reading on a stack overflow thing that .otf fonts tend to preserve bitmap values quite nicely. So I went out there and converted the fonts to bitmap. The result was indeed better on the native font size, albeit a touch blurry. So I'll try to use fontforge for that. Wish me luck!!