wg-best-practices-os-developers
wg-best-practices-os-developers copied to clipboard
ossf
Modify CSS of generated pages
We need to modify the CSS for the generated pages under /docs to "look like OpenSSF".
This will probably involve modifying assets/css/style.scss as well as some other pages.
Eventually we should be able able to import a common CSS so it could be reused by different sites.
@hythloda - can you share and/or point us to OpenSSF-related CSS materials? Ideally CSS itself, if not, at least guidance docs. I think some experimentation will be necessary.
Jennifer Bly - do you have access to that kind of mateiral?
Great idea! Yes, first draft of the OpenSSF brand guidelines with the OpenSSF logo/colors/fonts are available here: https://openssf.org/brand-guidelines/
I submitted a request with the web design team for the CSS. I spent a while trying to pull it from the Wordpress site to no avail. Will share when they get back to me.
is there a good place to bring up a11y issues with the brand guidelines? both the fonts are problematic for accessibility:
Cairo:
Teko:
Could you elaborate further on what the concern is? This is something we can bring up with our design and web teams to investigate.
@jennbly the legibility and readability of those fonts is not great -- the screenshots there are meant to demonstrate that. using a better font would make OpenSSF web content more friendly for people with visual and cognitive disabilities.
I'll note that the OpenSSF website uses a different font (Poppins) -- which is more legible and readable but still leaves much to be desired:
although the 18px font size on the website helps a lot
Agreed accessibility is very important. Thank you for the additional info. We will have a discussion with our design and web teams to determine the next steps forward.
As more guides are being published, I want to bring attention to the font a11y (and inconsistency) issue again. Right now, guides appear with the Teko font for headers and Cairo font for body. Cairo is ok, but the Teko font in particular has poor legibility.
That being said, the OpenSSF website uses the Poppins font for both headers and body. Switching to this font for the guides would be an improvement and would bring them into consistent branding with the OpenSSF website as well as improving legibility and readability. A win-win!
I suggest that this is an easy change we can make now. Further discussion on the best fonts, as well as any other a11y issues, can take place in the near future.
https://www.figma.com/file/AHpZECBYgXd3toYc1jC7lE/OpenSSF-Brand-Guidelines?type=design&node-id=427-5024&mode=design
Which one do we like!?
IBM Plex and Cairo by far are preferable. Especially when looking at the headers in places like Events, Training, Working Groups, and We're Hiring!, as well as the bottom paragraph that starts with Open source software is pervasive...
edit: 1 and 3 in your screenshots above
I like 1 and 3 the best as well, with a slight preference towards 3 because of the Events, Training, Working sections from the link. I just put the image encase the link didn't work for some people.
In terms of readability - I have a strong preference for 3 that will also give us two fonts (both IBM PLex and Cairo) to work with in all of our materials.
I am not a designer, but I agree with the support for a11y. I guess it is 3 then? (both 1 and 3 look nice to my eyes, but I cannot tell much difference)
We do have a final decision! Reviewed with the Marketing Committee last week, and the consensus stands around option 3 - IBM Plex + Cairo
Full modification blocked until we know if we're moving off WordPress.
