HTML Which of these font/background combo is better for reading?

[Nobody Cares]

A Valiant Reader of mine has posted a version of my little project with a different combination of font and background that is perhaps easier on the eye (thanks 「HOLLOW」) .
I was wondering if I should adopt it or keep the one I'm currently using. Opinions?

 

[Saki_Sliz]

Font scale is important, and font type.
with the images as they are now, I find the grey background less stressfull on my eyes, though I could see the first one being better if you want to bee in the dark and not stare at a bright screen.

 

[Nobody Cares]

Font scale is important, and font type.
with the images as they are now, I find the grey background less stressfull on my eyes, though I could see the first one being better if you want to bee in the dark and not stare at a bright screen.

I'm pretty confident the font scale and type are alright. I'm just considering a different combination of colours that is easier on the eyes.

 

[Tompte]

Here are some of my top typography tips for optimal and comfortable reading, gathered from working on UX in games:

• Avoid using serif fonts (or any heavily stylized font). You can find plenty of people on the internet suggesting serif fonts are better for legibility but this is actually unfounded and outdated advice. It may have been true for print (although this hasn't been proven) but it's especially not true for digital. (Note how the font you're reading right now lacks serifs.) For that reason I would go with a different font.
  I think the font you're using is fairly okay, but I wonder if that would still be true if you asked me to read 10,000 words of it.
• If I have to turn my head, the text is too large. I find your examples above much, much more comfortable to read if I scale my browser down to around 65% (or about 9 inches across on my monitor), i.e. I think it's bit too large.
• Word count per line (or line width) is SUPER duper important to legibility. Most people get this wrong. Too long and most people will lose track halfway through. Therefore, always break the line after some number of words (or max-width). Never let text run across the entire width of the screen. Again, if I have to turn my head to read the entire line, it's too long. I think you're pretty close to correct in your sample text. I would make it maybe 2-3 words shorter, but it's pretty good as is. I'm mentioning this more as an advice to others.
• Finally, if you have any questions regarding typography, use this simple trick that anyone can do: Open any book or magazine. Go to any news website. Go to wikipedia or any website that employs an editor. That's what good typography looks like. Look for their choice of font face, font size, line width, line height and margin width and think about why they made those choices. What is true there is true in games as well.

I don't have much to say about the text color. Color and contrast are very subjective and individualistic. Some people prefer low contrast, some high. Some dark, some not. I'm more of a black-on-white person myself. Best advice is to give the player the option to change it to their preference, or find one good middle-ground. If you're looking for something dark-mode-ish, why not use the exact colors from this very forum?

 

[Nobody Cares]

Here are some of my top typography tips for optimal and comfortable reading, gathered from working on UX in games:

• Avoid using serif fonts (or any heavily stylized font). You can find plenty of people on the internet suggesting serif fonts are better for legibility but this is actually unfounded and outdated advice. It may have been true for print (although this hasn't been proven) but it's especially not true for digital. (Note how the font you're reading right now lacks serifs.) For that reason I would go with a different font.
  I think the font you're using is fairly okay, but I wonder if that would still be true if you asked me to read 10,000 words of it.
• If I have to turn my head, the text is too large. I find your examples above much, much more comfortable to read if I scale my browser down to around 65% (or about 9 inches across on my monitor), i.e. I think it's bit too large.
• Word count per line (or line width) is SUPER duper important to legibility. Most people get this wrong. Too long and most people will lose track halfway through. Therefore, always break the line after some number of words (or max-width). Never let text run across the entire width of the screen. Again, if I have to turn my head to read the entire line, it's too long. I think you're pretty close to correct in your sample text. I would make it maybe 2-3 words shorter, but it's pretty good as is. I'm mentioning this more as an advice to others.
• Finally, if you have any questions regarding typography, use this simple trick that anyone can do: Open any book or magazine. Go to any news website. Go to wikipedia or any website that employs an editor. That's what good typography looks like. Look for their choice of font face, font size, line width, line height and margin width and think about why they made those choices. What is true there is true in games as well.

I don't have much to say about the text color. Color and contrast are very subjective and individualistic. Some people prefer low contrast, some high. Some dark, some not. I'm more of a black-on-white person myself. Best advice is to give the player the option to change it to their preference, or find one good middle-ground. If you're looking for something dark-mode-ish, why not use the exact colors from this very forum?

Very in depth and useful tips. Thank you very much

 

[Tompte]

Every time I make these wall of text posts I end up worrying "oops, did I go too far?" so I'm glad you appreciated it. Sometimes I can't stop myself from rambling. xD

 

[Nobody Cares]

Every time I make these wall of text posts I end up worrying "oops, did I go too far?" so I'm glad you appreciated it. Sometimes I can't stop myself from rambling. xD

Guess that makes two out of us

 

[Nagozo]

Here I go stumbling into one of your threads again to drop my entirely personal opinion: my eyes like 'softer' contrasts, so in my opinion the white on grey works better.
Also seconding the notion to switch to a sans-serif typeface. Another tiny tip I read somewhere on this forum is adding a little bit of red/yellow to your font colour, so you get a 'softer' white (as pure white on black can look harsh)

 

[guest1492]

I think you should just add a setting so that readers can choose their own color theme.

 

[Nobody Cares]

I think you should just add a setting so that readers can choose their own color theme.
View attachment 2133219

Know how I might do that?

 

[guest1492]

IIRC, you are using SugarCube. You should look into the

You must be registered to see the links

. If you want an example, this is a small excerpt of my code:

Spoiler

You don't have permission to view the spoiler content. Log in or register now.

You can also expand on this to have different link colors, button colors, etc. If you want to understand how it works, then you should read up on CSS variables and CSS specificity.

 

[Nobody Cares]

IIRC, you are using SugarCube. You should look into the

You must be registered to see the links

. If you want an example, this is a small excerpt of my code:

Spoiler

You don't have permission to view the spoiler content. Log in or register now.

You can also expand on this to have different link colors, button colors, etc. If you want to understand how it works, then you should read up on CSS variables and CSS specificity.

Thanks! My lizard brain overclocks everytime I see code.