Typography is super important. I’m talking specifically about the output window.
Here’s something from a current chat going on. The font is too large for the eye to get a good grip on the letters. Giving a bit more spacing can help.
The spaces between furs’ posts also could use some adjustment.
These superscript messages could be replaced with an icon prior to the line.
You can quite easily set the font size to be whatever you want it to be with the zoom and text settings in your browser.
Icons alone are accessibility poison.
Icons alone are accessibility poison.
I’m finding at least 10 on this page alone.
Hmm! I just noticed. It’s only for output by players. Other commands like spoof/describe and returns for help commands are a smaller font, and thus have better spacing.
It’s not the font size itself though that can be adjusted! Just have to adjust the div padding and line-height? Looks like line-height is being inherited from the body.
Personal preferences with regards to purely aesthetic elements can be applied through browser CSS tools such as Stylebot.
Personal preferences with regards to purely aesthetic elements can be applied through browser CSS tools such as Stylebot.
This is an accessibility issue. It’s not just personal prefs.
The UI is not using standard line spacing. The entire interface is modified using a body tag line-spacing value of 125% for non-text elements like panels, etc. All classes inherit the value regardless of font size. This is creating compacted text in ev-related divs. It makes for poor reading. Doesn’t help with eye strain, people with limited vision, lysdexia, etc.
So, I think I figured it out.
line-height is inherited directly from body. Classes ev-say, ev-pose, and ev-address are all affected, both targeted and normal. Using parent div class charlog--ev I set it to 150%, and now all output lines are spaced approximate to standard spacing. This is the best fix because it avoids messing with non-text element line-spacing.
Next, the padding value for charlog--ev, I set to 10px. That gives a good negative space proportional to the text for those highlighted text divs that place the lighter-color blue around it.
Doing these things turns this…
into this…
(Note, the font size wasn’t touched; just for some reason, this forum software decided to reduce the second image’s size.)
The eye is less strained, and the extra padding makes the highlighted blue color pop out.
Non-highlighted text is also spaced a bit further away from each other. This also helps keep those superscript text elements from running into the lines above.
Doing it this way did affect the line spacing for other elements such as Help Topics table formatting, but not adversely. It just spaced those apart slightly more than needed, but it doesn’t look bad. If whomever has access to client’s formatting tools, I’m sure all this has some sort of administration panel, I’m assuming? Haven’t looked that deep into what you guys are using.
I did notice there’s some irregular spacing going on with lines of people arriving and leaving rooms. That’s nothing to do with what I did. That’s just there already. Something weird’s happening with that.
I’m working out a way to adjust the size of a <br> tag for span class common--formattest so we don’t have to use <br><br> anymore between paragraphs, which would look more refined, but that’s a different subject!
Can you cite your source that the changes you’re suggesting improve readability or enhance accessibility beyond what can already be remedied with existing browser adjustments?
Mmm. I, for one kind of like the larger margins when seeing the two screenshot next to one another.
As for turning <br><br> into something more refined, is doable. I’ll look into it.
But yeah. I think it could be worth trying out during a release, and see what players think?
Yeah, that is sort of something I should get rid of. Not sure why I did that to begin with 
To be fair, it does feel nicer.
I didn’t say it doesn’t! I’m just interested in how it applies to accessibility. I’ve almost always had friends and loved ones with dyslexia and adjacent conditions. It’d be cool if we could use supporting them to build a better experience for everyone.
But if it’s just preference and we like it more, that’s fine enough on its own.
I don’t know any specific studies, but I long noticed that it feels better if the lines in the chat log have two extra pixels padding. There’s this gut feeling that they are about to clash.
It feels like there’s too much space between posts now, to me. Especially when there’s a mix of short poses and longer ones on the screen. It feels very uneven.
What sort of citation are you asking for?
Ever taken any typography class or a design course? Keeping text legible is key to not only creating attractive design, but it also helps keep people’s eyes focused for reading. Line spacing (leading), kerning, tracking, serifs, it’s all part of a rich field of study called Typography. I mean there are entire schools that teach this stuff. Accessibility is one of the things these schools teach.
But if you’re asking for like some law? I don’t have that. Depends what country you’re in, and whether you’re part of some bureaucratic agency with standards, like for instance the FHWA whose guidelines for traffic devices have set font and guidelines to keep them legal so people on the road can have maximum legibility for short periods of time on highways, or for government buildings in some jurisdictions, etc. Government websites are no exception to this, with Secton 508. Understanding Accessible Fonts and Typography for Section 508 Compliance | Section508.gov
Digital-dot-gov’s website: Accessibility for teams – Digital.gov
How about W3School? Accessibility Tutorial
Am I saying there’s a law requiring line spacing to be a certain size per font? No, but it’s just smart. You can find countless videos on YouTube on the subject. It’s way more complex than people seem to think. Lots of brain science and psychology involved with it.
Here’s a nice one that was just put out a couple months ago:
Here’s one that specifically gets into Leading (which in CSS is called line-spacing):
(She actually brings up a good point that I didn’t consciously realize until she said it. San-serif fonts typically need more leading to retain good legibility. And that makes sense because without the extra letter details that serifs provide, it’s harder for the eye not to run together the lines and angles of each letter.)
And no, adjusting line spacing isn’t a thing on vanilla browsers. You can’t ask every single user to install special mods simply to fix a problem caused by inherited CSS properties. It’s just unreasonable.
Like I said earlier, the only reason line spacing was set to 125% was probably to give spacing between panel elements. It might be great for graphical elements, but it didn’t take fonts and font-size variability into account.
Frankly, for something as heavily type-focused as a MUCK(let)? Using em is better than percentages because it’s a relative unit measurement, and adjusts automatically with font size. I’m just trying to come up with the easiest/simplest solution possible that gets the job done.
I am surprised that with all those links you didn’t simply link the WCAG which has a fairly specific guidance on the topic and is an actual ISO standard. (And which cites the science it’s based on.)
However, the downside with increased spacing is always that the eye must travel further to parse the same text, potentially increasing eye fatigue when reading large bits of text.
Agreed. For effective reading of long series of posts, it feels like there’s now slightly too much space between posts. The line spacing is manageable, but I certainly feel the eye strain on mobile from having to bounce much further while reading a post. I think it’d be much better to offer folk a choice in the user settings between compact and loose spacing for both line-height and post spacing.
And mobile access is how a significant portion, maybe even the majority, or people access Wolfery. It should be under consideration.
I preferred the former, somewhat more compact line-spacing; it would be a nice thing to have a choice indeed, so as to better handle the different mobile/computer needs.
Sorry! Didn’t know about it. Thanks for that. 
As I just said in another thread, our proportion of phone-only users is surprisingly large. It’s been one of my biggest surprises in working with this platform.
This is good to know, actually. Gen Z-ish folks I tried introducing Wolfery to when it was brand new generally found it inscrutable—largely because they were all connecting over mobile!
I have been aware that Acci and the team have been leaning a lot into increasing Mucklet’s mobile friendliness in the time since then, and I’m happy to hear that this has apparently been paying off!
I like to do the majority of rping on PC but I do have to use my phone here and there and it honestly hasn’t been bad at all. My only issue that I avoid by not using it is landscape mode. If you wanna type landscape you have to minimize every other window and bar on the sides since they take up so much room otherwise. But just using portrait mode makes it close to the same as PC which is nice.
All I know is trying to tinyscene on a phone is… difficult… unless you’re a one-liner kinda fur. 
