Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Experiment with different fonts #663

Merged
merged 2 commits into from Jan 21, 2021
Merged

Experiment with different fonts #663

merged 2 commits into from Jan 21, 2021

Conversation

garbas
Copy link
Member

@garbas garbas commented Dec 28, 2020 •
edited

This PR tries to explore different font combinations. This was one of the items on the TODO list after the redesign.

There are 3 fonts we need to select:

1.) Primary: font used for general text
2.) Secondary: font used for titles
3.) Monospace: font used for code examples

If you wish to suggest new combination please write in the comments.

Font combinations

As always please keep the conversation civil especially when it comes to design. What looks good for somebody might not look good for somebody else. It is fine that you tell what you like and dislike, but it is even better if you tell why you dislike something (eg. not readable, ...). Thank you in advance.

fixes #508

@github-actions
Copy link
Contributor

🚀 Deployed on https://5fe9dcefa33d901b2ee214af--nixos-homepage.netlify.app

@github-actions
Copy link
Contributor

🚀 Deployed on https://5fe9de0782357550f26a3e08--nixos-homepage.netlify.app

@github-actions
Copy link
Contributor

🚀 Deployed on https://5fe9ded393c2cc3f87f54c0c--nixos-homepage.netlify.app

@github-actions
Copy link
Contributor

🚀 Deployed on https://5fe9df7832319c4dbeea6892--nixos-homepage.netlify.app

@github-actions
Copy link
Contributor

🚀 Deployed on https://5fe9e02232319c5186ea6043--nixos-homepage.netlify.app

@github-actions
Copy link
Contributor

🚀 Deployed on https://5fe9e08302f86e3b7b1ccb6d--nixos-homepage.netlify.app

@github-actions
Copy link
Contributor

🚀 Deployed on https://5fe9e0d4d3fff9f9e2fec481--nixos-homepage.netlify.app

@github-actions
Copy link
Contributor

🚀 Deployed on https://5fe9e0fcd3fff9fc80fec1fb--nixos-homepage.netlify.app

@github-actions
Copy link
Contributor

🚀 Deployed on https://5fe9e7f3a3b5c8129f7dfaf7--nixos-homepage.netlify.app

@github-actions
Copy link
Contributor

🚀 Deployed on https://5fe9e864bf1584e477d6edf2--nixos-homepage.netlify.app

@davidak
Copy link
Member

davidak commented Dec 28, 2020

Thanks @garbas!

Sora: hard to read because of the details and proportions
Krub: it bothers me that some characters are rounded where they shouldn't, like v, x and w. those unexpected details make it hard to read for me
Fira Mono: very nice font. the details like the . in 0 make it more readable instead of distracting
Zilla Slab: it feels a bit too heavy with those lines at top and bottom of characters
Open Sans: very neutral font. no unnecessary details. very readable
Source Sans Pro: very round font. readability is OK. might not be a good fit to the rest of design with lot of sharp edges
Overpass: readability OK. details fits design (sharp edges)
Roboto: like Open Sans very neutral and good readable. difference is hard to tell, even in direct comparison. Open Sans has more open c what i like more, but it's really personal taste
Montserrat: also very neutral and readable
Merriweather: looks like a classic typewriter font, better suited for printed text, not for a technical website. readability OK
Lato: very neutral, details don't steal attention from the content. very good readable in headings. in text, it's too thin to be good readable

tl;dr my recommendation

Primary: Open Sans
Secondary: Lato
Monospace: Fira Mono

i'm not sure if the difference between Primary and Secondary is big enough. so if we want to decide on this, i want to have a final look in a preview

there are also other combinations that would not bother me

@github-actions
Copy link
Contributor

🚀 Deployed on https://5fea573bf88342390af2db09--nixos-homepage.netlify.app

@davidak
Copy link
Member

davidak commented Dec 28, 2020 via email

@nixinator
Copy link
Member

https://www.fontspace.com/atari-font-f5956

or anything from

http://christophekohler.epizy.com/AmigaBlogWp/1991/11/15/step40-bitmap-font/

;-)

@hugolgst
Copy link
Member

hugolgst commented Jan 6, 2021

I think the first one is the best choice, readable and modern.

@garbas
Copy link
Member Author

garbas commented Jan 8, 2021 •
edited

@hugolgst since the font combinations are not numbered can you copy paste the option that you selected. Also if you can expend a bit on why your choice is readable and modern?

@hugolgst
Copy link
Member

hugolgst commented Jan 8, 2021

This combination:
Primary: Krub
Secondary: Sora
Monospace: Fira Mono

I like it because the titles do not use serif fonts and I find it a bit easier to read.
Sans-serif titles are also modern.

@aherrmann
Copy link
Member

Just noticed a small issue: when the selection produces an empty set then the side bar with the facet selectors vanishes and the user is stuck on an empty page without the ability to go back.

@turboMaCk
Copy link
Member

My favorite is:

Primary: Roboto
Secondary: Overpass
Monospace: Fira Mono

@garbas
Copy link
Member Author

garbas commented Jan 18, 2021

I'm also in favor of

Primary: Roboto
Secondary: Overpass
Monospace: Fira Mono

option.

I'm going to go ahead and implement it, since this has been open for some now and it would be nice to finalize this.

@github-actions
Copy link
Contributor

🚀 Deployed on https://600827e61acd42008de139a8--nixos-homepage.netlify.app

@github-actions
Copy link
Contributor

🚀 Deployed on https://60082c7d8fb8ac00a98549f8--nixos-homepage.netlify.app

@davidak
Copy link
Member

davidak commented Jan 20, 2021

I'm also fine with it.

@github-actions
Copy link
Contributor

🚀 Deployed on https://60089db48f271d00b1066861--nixos-homepage.netlify.app

@garbas garbas marked this pull request as ready for review January 20, 2021 21:41
@garbas
Switching to Roboto / Overpass / Fira Mono font variant
f07a2f8 
Building process of site-styles is now handled with Makefile, this
offers more incremental build support (aka faster developing cycles)
@garbas garbas force-pushed the experiment-with-different-fonts branch from 29ec9dd to f07a2f8 Compare January 20, 2021 21:46
@github-actions
Copy link
Contributor

🚀 Deployed on https://6008a5971747eb0d16a49dfd--nixos-homepage.netlify.app

@samueldr
Copy link
Member

samueldr commented Jan 20, 2021 •
edited

RFC process SVG file fonts weren't updated.

image

Sadly, dealing with SVG is annoying for that :). Though a quick search/replace should do it.

Other than that looks alright.

@nixos-discourse
Copy link

This pull request has been mentioned on NixOS Discourse. There might be relevant details there:

https://discourse.nixos.org/t/marketing-team-meeting-minutes-17-18-19/11092/1

@github-actions
Copy link
Contributor

🚀 Deployed on https://6008b3951747eb1933a4a348--nixos-homepage.netlify.app

@garbas
Copy link
Member Author

garbas commented Jan 20, 2021

@samueldr fixed

@garbas garbas merged commit 61f4daa into master Jan 21, 2021
@garbas garbas deleted the experiment-with-different-fonts branch January 21, 2021 09:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@samueldr samueldr samueldr approved these changes

@davidak davidak Awaiting requested review from davidak

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Font and typography: give it another look once redesign and content is in place
8 participants
@garbas @davidak @nixinator @hugolgst @aherrmann @turboMaCk @samueldr @nixos-discourse