Font Rendering Improvement thread = MOONRUNES EDITION

I'll post 5 screenshots of the same page from amazon.co.jp. I've taken it with 3 diff browsers on 2 diff OSes.

Windows 10: Chrome, Firefox, Edge
Linux (Arch with MS Win and Apple fonts added): Chrome, Firefox

To my surprise, all of them render fonts quite differently... even on the same OS!

Your task is to figure out which of these are taken with which browser/OS combo and to vote for the best looking one.

Vote for the best here:

strawpoll.me/12702580


In a complete random order, OP pic is Screenshot 1.

I don't speak Japanese but was interested how all these browsers handle all kinds of text. I also don't have access to macOS so would appreciate the screenshot of the same page in Safari and/or Chrome/FF running on macOS.

Other urls found in this thread:

amazon.co.jp/灰羽連盟-サウンドトラック-ハネノネ-TVサントラ/dp/B00007B902
chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en
mega.nz/#!uUR12T7B!J863XiLNGLlCmXHZbzq9ud7rhOWcMsfhqJajhy9W_OU
files.christophzillgens.com/webkit-font-smoothing.html
pastebin.com/WQ6n7Gs9
twitter.com/SFWRedditGifs

Here is Screenshot 2.

Here is Screenshot 3

Here is Screenshot 4

Finally, here is Screenshot 5.

Now take a look at all of them and tell me which is the best looking one. And vote.

I'll reveal the key later on and then you'll be able to see which OS/browser suits you the best.

Anyway, post YOUR font rendering of the same page.

>To my surprise, all of them render fonts quite differently... even on the same OS!
This is infuriating at the very least, shit is broken everywhere
It's really nice that this is a blind challenge, great thing OP

>This is infuriating at the very least, shit is broken everywhere
I was quite shocked. Same OS, same fonts, yet totally different font rendering of all browsers. I have no idea why. GNU/Linux or Windows.. it was the same type of difference.

>It's really nice that this is a blind challenge, great thing OP
Thanks! We've had a bunch of font rendering threads here in the past and it was always just a bunch of dick-waving without any objectivity. Maybe this will make people think.

Give the page's link?

>Give the page's link?
amazon.co.jp/灰羽連盟-サウンドトラック-ハネノネ-TVサントラ/dp/B00007B902

Feel free to post your browser's rendering of it... but make the width approximately similar to these screenshots.

>post YOUR font rendering of the same page

browser? OS? japanese fonts installed?

>approximately similar to these screenshots
any reason why? is it to eliminate variables?

If so, do I just resize the browser windows?

>any reason why? is it to eliminate variables?
So you can easily compare them when you use your favorite image viewer that can easily switch between images in the same folder... you know, up/down/left/right arrows or something like that.

>If so, do I just resize the browser windows?
Yes. And save it as PNG, not jpeg because JPEG introduces artifacts.

Vivaldi, Windows 7, default fonts

...

>people voting 3 over 4 despite pic related

4 seems to be the best idk if I have font autism though

but 3 was looking good 4 slightly better it seems

anything other than 3 or 4 is not that great though

Someone with windows 10 test the same.

Could you please install WhatFont and click on the text in these areas of the image...

chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en

Would love to see what Vivaldi picks for fonts.

interesting choices.

does anyone hare read/write Japanese? what font rendering do Japanese readers prefer? I know some of these look "bitmapped" but maybe that's what Japanese prefer? I have no idea.

I'm on Windows 10, this is using Chromium

Does the screen's PPI have an effect too? I'm using a VAIO Pro 11, 199 PPI.

Meiryo.
On my Server 2016 rig it defaults to sans-serif.

...

Fascinating! So glad I asked you to do that. Any idea where you got this font from? I doesn't come with Windows 10 as far as I could tell.

When I tested Win10, this is the font Chromium used.

Another very different font rendering! Your PPI looks 96 to me.

Safari

Chrome on macOS

user show me how you got screenshot 4 and 3 please

xDDDDDDD

I'm not sure if it shipped with Windows 7. The copyright says Microsoft, so possibly Visual Studio or some SDK? I don't remember having seen the old "Install files for East Asian languages" box since Longhorn, so that can't be it.
I uploaded the font in case anyone wants it:
mega.nz/#!uUR12T7B!J863XiLNGLlCmXHZbzq9ud7rhOWcMsfhqJajhy9W_OU

just dropping this here:
files.christophzillgens.com/webkit-font-smoothing.html

>user show me how you got screenshot 4 and 3 please
Here is the answer key user.

fuck im on windows
best font rendering ive gotten has been mactype + decency.english, anyone recommend something different?

They look identical and both look just great!

user, could you install WhatFont for Chrome (this link ) and click on the same parts of text as in the image in that post so we can see what fonts Apple/Chrome selects for that japanese text.

Thanks so much!

Thank you user! Will give it a try,

user, I think nice Linux rendering is due to Apple fonts that I have installed.

Can you download Apple fonts from somewhere? These are the fonts that Amazon, and all other Japanese sites that I've looked at, prefer:

Hiragino Sans GB W3.otf
Hiragino Sans GB W6.otf
ヒラギノ角ゴ Pro W3.otf
ヒラギノ角ゴ Pro W6.otf
ヒラギノ角ゴ Std W8.otf
ヒラギノ角ゴ StdN W8.otf
ヒラギノ丸ゴ Pro W4.otf
ヒラギノ丸ゴ ProN W4.otf
ヒラギノ丸ゴ ProN W4.ttc
ヒラギノ明朝 Pro W3.otf
ヒラギノ明朝 Pro W6.otf

googling for them might be an easy way to install them...

On all 4 areas it's using the same font with different sizes.

Meant to respond to

Thanks user! Screenshot 3 is from Chrome for Linux and I have all Apple fonts from 10.12. Notice how all the large point fonts are exactly the same as yours from Chrome for macOS but all the smaller sizes are not anti-aliased. I wonder why that is...

What is the best way to smoothen fonts on Firefox on Windows 10?

Tried enabling Cleartype? There's also mactype for Windows that yields better results...

I have MacType but it doesn't seem to be affecting Firefox at all.

arch
chromium
noto fonts

Weird. Is there any explanation from MacType why that is?

HiDPI? Everything looks good on HiDPI ;). It's impossible to compare that to screenshots in these pics.

Can you try disabling HiDPI/scaling and then taking a screenshot? Thanks user!

Same but firefox

Here's mine: Win7 and Firefox, and I don't know shit about fonts or font rendering.

>everything
not everything but fair enough
this is with chromium set to ignore my scaling with --force-device-scale-factor=1

That looks a lot easier to compare. Thanks user. One thing I notice right off the bat is that Noto is not metric compatible with japanese fonts that this page expects. Notice how dissimilar font sizes are.

>Win7 and Firefox
Win7 looks a quite a bit different from Win10 and Firefox Developer (Screenshot 2)

>hidpi
os/browser?

can't say I like any of them

Details? Looks good... OS/Browser/font...

Font rendering is extremely inconsistent across libs and platforms. Its a great source of frustration if you want things to look good everywhere.

linux/palemoon
I force most jp font rules to redirect to MeiryoKe_Gothic/PGothic.
the latin text is Liberation Sans (altough it should be Open Sans. thanks to this test I noticed Arial wasn't redirecting to it)

(sadly) you really have to write your own font config on linux if you want good font rendering, because "good" is subjective when it comes to how fonts are displayed.

can you dump your fonts.conf onto pastebin or something?

Ubuntu/Firefox

Chrome on ChromeOS. I can't do any better on the resolution.

pastebin.com/WQ6n7Gs9
I have no memory of what /etc/fonts files I might have changed over the years; those might also affect my rendering.
and I have no idea why pastebin decided to garble the メイリオ and MS Pゴシック strings.

my older config did a lot more fine tuning with font families, weights, per-font hintstyles and such. but libfontconfig decided to break a lot of the syntax when moving away from ~/.fonts.conf so I limit myself to good fonts and don't give a fuck what snowflake fonts sites and programs want to use.

That looks amazing user! I'll study your setup tomorrow when I get some quiet time.

Quick question... is there a way to target one specific font, with fonts.conf, and force it to anti-alias at certain font sizes? For example, that Hiragino font discussed above does not anti-alias at smaller sizes. I have no idea why. Would be cool if I could somehow force it to anti-alias. Any ideas?

Font rendering is as bad as talking about monitors since they play a factor in it too, what it looks like on your particular screen and your eyes. I used to use gdipp a while ago to blurr the text into something that worked with my bad eyes, it looked like garbage to everyone I showed it to but tome it looked perfectly readable even from a distance where the stock rendering didn't. Why use glasses like an ormal person when I can just blurr everything else.

Hiragino
12
true


adjust font family name and pixelsize if needed. worked for me just now when I tried, alltho I forced antialiasing off for another font that antialias at small sizes and not the other way around.

indeed. "lucky" for me I'm nearsighted and not farsighted.
japanese fonts add their own set of variables. natives tend to prefer the thicker fonts since you it's general shape and context that is important, while learners of the language will surely prefer sharper (and larger) glyphs so you can actually try to figure out what that kanji is.

>adjust font family name and pixelsize if needed. worked for me just now when I tried, alltho I forced antialiasing off for another font that antialias at small sizes and not the other way around.
THANK YOU so much user! Will give that a try later today.

safari on macOS 10.12.14

That anime was super anticlimactic. I wanted to know what was beyond the fucking wall!

firefox/macOS

Fonts when bold are fucked. Also titlebar font is fucked for Jap.

same OS and same browser again

why is that line of text below Amazon @ Kou Otani so pixelated?

it's interesting that every browser that runs on a Mac has great rendering. I wonder why that is.

too easy
>blurry and fucked up
arch
>pixelated and eyesore
windows

Yeah, but music was god-tier. This is also a great soundtrack for when you're just working on shit.

No idea, font is Roboto.

Whatever they're using for a font renderer is doing a good job. Unless you like bitmap fonts.

Okay. Here is my screenshot. You'll never guess the browser and/or OS. Give it a try tho. Also, tell me what you think of it.

looks like windows using mactype

Close. It's an iPad simulator running Safari. It was running on a Hackintosh on a non-retina screen. LOL! Wanted to see what it looked like.

Any idea how to improve font rendering on Ghanoo+Lewnicks

Your font is chinese if the top left corner of 灰 is crossing rather than just meeting. It's just wrong.

>large ppi
Isn't this cheating?

Guess my OS and browser, I haven't done anything to improve rendering

...

ITT Reasons to purchase the new Apple MacBook Pro with Retina Display.

I'll take a guess. Firefox on Linux Mint?

who the fuck still buys haibane merch jesus

I'm guessing these are Linux screenshots. I think these look the best. Windows font rendering is too thin and doesn't look smooth, especially on smaller text.

iOS 10 / Safari