search

overthesun / simoc-web

This is the web interface to SIMOC
https://ngs.simoc.space/
Other
3 stars 0 forks source link

Improve fonts #13

Closed ezio-melotti closed 5 years ago

ezio-melotti commented 5 years ago

The default font family doesn't look too good (too generic and has some size problem on Linux). We should find a better font.

ezio-melotti commented 5 years ago

Apparently in App.vue there's this rule: body { font-family:'open sans'; }, but the Open Sans fonts are not imported.

In the old reference I found https://github.com/kstaats/simoc/blob/Front-end/front_end_uncompress/Useful%20Old%20Reference/simoc_fe/src/sass/_styles.scss but it's missing from https://github.com/kstaats/simoc/tree/Front-end/front_end_uncompress/Current/simoc_fe/src/sass with most of the other files.

I tried to add the _styles.scss file in the same position but it doesn't seem to work.

@gschoberth : do you know why _styles.scss (and the other files) are missing and how to restore them? Or should I just copy the @import somewhere else?

gschoberth commented 5 years ago

I'm assuming it's using system default fonts.

There's one of a few ways to work around this. One is to add under the styles tag in 'App.vue', the following line:

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i|Roboto:100,300,400,500,700,900&display=swap');

It covers basically what fonts I had planned on using throughout.

Montserrat - Large bodies of text, i.e. reference entries. Open Sans - Basically Everything Else Roboto - Pairs nicely with the other two if a third font style is needed.

ezio-melotti commented 5 years ago

I found a discussion about these fonts on https://www.quora.com/Which-font-is-better-for-website-design-Roboto-or-Montserrat The tl;dr of the comments is:

Here are some screenshots that compare the 3 fonts: fonts-00 fonts-01

gschoberth commented 5 years ago

Your right. I had them flipped around, now that I actually found my notes on the fonts.

On Fri, Aug 2, 2019 at 6:48 AM Ezio Melotti notifications@github.com wrote:

I found a discussion about these fonts on https://www.quora.com/Which-font-is-better-for-website-design-Roboto-or-Montserrat The tl;dr of the comments is:

  • monserrat is better for heading, roboto for long texts, but don't use them together
  • monserrat is better for heading, roboto for long texts
  • roboto is more robotic, better for smaller texts and was designed for small texts on mobile, monserrat is better when there is little text or in headings
  • monserrat is better for heading, roboto for long texts

Here are some screenshots that compare the 3 fonts: [image: fonts-00] https://user-images.githubusercontent.com/25624924/62365027-540afd80-b523-11e9-83a7-eca931b1bcc6.png [image: fonts-01] https://user-images.githubusercontent.com/25624924/62365029-540afd80-b523-11e9-8bf2-73331e6d5dcc.png

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/kstaats/simoc-web/issues/13?email_source=notifications&email_token=AGJK4YIZGM4KQPVFCORQTXDQCQGIPA5CNFSM4IIA2O72YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD3NM6JI#issuecomment-517656357, or mute the thread https://github.com/notifications/unsubscribe-auth/AGJK4YNGS3EZVPBH4R6ULY3QCQGIPANCNFSM4IIA2O7Q .

ezio-melotti commented 5 years ago

Fixed this in #20 I used Roboto for the dashboard and Open Sans for everything else.