fitzy
(Michael Fitz-Payne)
November 1, 2024, 3:10am
1
We’re experimenting with reducing the size of text and the line height, and increasing the height of code blocks, in order to improve readability of larger blocks of code. This is mostly problematic for large blocks of code exceeding 20 or more lines. The result is more code can be seen in the regular viewport.
Before
After
The change has been made here:
https://github.com/discourse-org/design-experiments/pull/75
13 Likes
It seems like changing the font size of inline code like this
is probably an unintentional side-effect?
4 Likes
fitzy
(Michael Fitz-Payne)
November 1, 2024, 7:44pm
3
Yes that was unintentional, we should modify it so that only full blocks are changed and not inline code.
2 Likes
Lilly
November 3, 2024, 6:12pm
4
FWIW, I just use this on my hackity hack dev instance:
pre code {
font-size: var(--font-down-1);
}
result
fitzy
(Michael Fitz-Payne)
November 3, 2024, 10:10pm
5
I’ve sent a PR to remove styling changes to inline monospace text, and also increase the line height slightly in <pre>
blocks.
2 Likes
sam
(Sam Saffron)
November 4, 2024, 12:59am
6
This is sadly hurting readability on shorter snippets.
Eg:
Font is smaller, line height shorter.
Can this only impact very long code blocks? Should this even be a core change @jordan-vidrine ?
5 Likes
I want to also highlight the difference here between this experiment and stack overflow.
Current experiment
Stack overflow
Some things I notice immediately is:
their font is slightly larger
we have bold on our function titles, they do not
I need to dig more into hljs and see why our use case is bolding titles.
1 Like
sam
(Sam Saffron)
November 5, 2024, 8:36pm
9
I love that you had a look at Stack Oveflow, cause if anyone figured out how to display code blocks it would be them.
Another observation, font size does not appear to be changing despite it changing… (15px → 13px but the colors compensate some)
Visual rhythm and line height all feel a lot better here:
Stack Overflow
Current Experiment
Line height is noticeably a problem and our “shrinking” went too far cause our base font is larger and roomier than Stack Oveflow.
I very much support de-bolding in our current experiment and increasing size, line height.
2 Likes
bryce
(Bryce Huhtala)
November 5, 2024, 9:52pm
11
That looks great, Jordan. In this case, I think using the consistent font weight helps readability. I’m liking the increased padding too.
2 Likes
Thanks, I agree. I think I’d like to also take a look at colors and why hljs is using the colors it is using. I havent seen this color pattern used anywhere online.
1 Like
sam
(Sam Saffron)
November 5, 2024, 11:19pm
13
I am a fan of the typography changes, but I feel the dark background is too much. The lighter background is a lot easier to read.
2 Likes
After more research, I see that the colors we are using are based on a dated scheme used by github possibly 10 years ago, or as early as 4.
Is there room here to change the default colors to something updated?
Github has an updated color scheme since then, along with other options to be a default light scheme.
Stack overflow
Atom One Light
New Github
hljs default
4 Likes
fitzy
(Michael Fitz-Payne)
November 6, 2024, 12:39am
16
My personal preference would be toward something with more muted colours - in your examples, Stack Overflow is my choice.
3 Likes
after a couple days I still have to squint a bit with the smaller font-size, I don’t think it’s worth the space savings
1 Like
fitzy
(Michael Fitz-Payne)
November 6, 2024, 10:28pm
18
Do you feel the same on Stack Overflow (for example)? The font size and line height calculations is the same now between Discourse and SO.
max-height
on Discourse is slightly less at 500px vs 600px.
2 Likes
The contrast is much worse in our case and it makes a big difference when you’re trying to read small text, for example (Stack Overflow on the right):
1 Like
Yeah I see what you mean here.
How do you feel about these changes in the PR I have up: https://github.com/discourse-org/design-experiments/pull/79
Here is an option where I add black to the bg in dark mode, instead of using something based on secondary or primary. I do this via rgba(0,0,0,0.25)
2 Likes