You may have noticed that these forums look a little “different” than normal, and hopefully that they look a little better - that’s intentional! Yesterday we ported over some changes that myself and the Moderators (with particular thanks to @factoradic and @zystvan) have been planning for a couple of months now, and there’s more improvements to come. At Codecademy we see the amount of work you put into these forums and the value you draw from them, and so we’re making the investment to improve that even further – visual design changes are just the start.
Until this week, our forums homepage had this design:
As you familiarize yourselves with the new design, we’d love to hear your feedback! What tweaks should we make to the visual design? What features or functionality would you like to see us add? We have a few things in the pipeline that we’ll be excited to announce when we’re ready, but we’re doing this for you – the users – and want to have you involved in the process!
Great work everyone! That’s a definite improvement
Much prefer the home page now – having a long list of the latest posts probably put off a lot of new users.
I do think the paragraph styling needs adjusting though – the font is bit small, and makes it hard to read long, multiple lines of text.
If you match it with the CSS settings for the current Codecademy lessons you’d be using a font-size of 16px with a line-height of 25.6px (instead of 14px and 19px respectively). I think that makes a huge difference to the legibility.
Just wondering if the default sort listing by Activity could be tweaked.
At the moment a minoredit, such as correcting a spelling mistake, is logged as an Activity and pushes the thread to the top of the pile, which isn’t really warranted.
On the other hand, a majoredit might justifiably deserve a bump up to the top of the Activity list.
So, not sure which is the best way to go with this
Can you add a style rule to the em and strong elements?
There appears to be a quirk with the Oxygen typeface where making the font italic or bold actually makes the typeface appear slightly smaller on the screen than normal text. If you look closely you’ll notice that the x-height of the characters drops down on italic or bold text. As this is text that you are trying to highlight, making it smaller would seem counter-productive. And it just looks plainweird
All you need to add is:
em, strong {
font-size: 15px;
}
Here’s an example where I’ve implemented the above style rule on the second line:
@mindful_coder You’re using a Mac, correct? They seem to render fonts a little differently than at least some other operating systems. Using Linux, this is how I see the text by default:
I’ll see if we can figure out some way to get the fonts to render uniformly across OSes. Thanks for noticing that!
@mindful_coder
Just confirming what Zeke said: I don’t see anything different with fonts on my desktop PC, which is Windows 10, or my laptop (Windows 8).
This has been discussed between the moderators away from Discuss, and I’m not sure what we decided to do. If it’s not possible to render the text the same (or very similar) across all OS using CSS, then maybe something like a browser extension or plugin could be useful ¯\_(ツ)_/¯
That got me thinking maybe it’s the Oxygen typeface itself… and yes, Google Fonts only serves up 3 style-variations for Oxygen: Light, Regular, Bold. This means that if you’re only linking to the Regular Oxygen typeface from Google Fonts it’s down to your OS to “fake” what it should look like in italics or bold. This produces what is called faux bold or faux italic.
There’s a brilliant article on A List Apart all about this:
Also, Vernon Adams designed the Oxygen typeface for the KDE project (a GNU+Linux OS desktop) so it’s not surprising it looks good under Linux
I’ve noticed though that if you look at the Oxygen typeface you can get from Font Squirrel (https://www.fontsquirrel.com/fonts/oxygen), you get four styles – Regular, Italic, Bold and Bold Italic. This will probably solve the cross-OS rendering issue, but it would mean the webfont would have to be served up from Codecademy’s servers instead.
Thanks for making me go off and learn something new!
