Fix: Font weights #116
Fix: Font weights #116
Conversation
✅ Deploy Preview for compilerla ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
Hi @machikoyasuda - here is the reasoning for having our own copy of the fonts: #5 (comment). The TLDR is at the bottom of the linked article:
|
|
@angela-tran Yea I can move it back. I just did it this way for now so I can quickly get all the weights up and make a Netlify Preview, so Segacy can confirm what weights we need. The font weight values from Figma aren't 1:1 with what we actually need for the browser. |
|
@angela-tran Google argues otherwise 😆 https://web.dev/font-best-practices/#using-self-hosted-fonts - I want to get the font-weights down first before doing all the font performance stuff. |
|
@machikoyasuda Oh, interesting find. If there's all this additional nuance to it, then I'm fine with just loading from Google Fonts. |
|
Weights look good to me! One q - are the weights for the text on the two buttons on home the same? Hard for me to tell visually because of the different color contrasts |
|
@segacy1 Yea the buttons are the same font-weight. Isn't it trippy that they look so different b/c of the colors?!?! |
|
@machikoyasuda truly! In that case, this looks great to me. Thank you! |
_layouts/default.html
Outdated
| <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Source+Code+Pro:ital,wght@0,500;0,600;0,800;1,700&display=swap" rel="stylesheet"> |
There was a problem hiding this comment.
styles/base.css
Outdated
| @import url("./fonts.css"); | ||
|
|
||
| :root { |
There was a problem hiding this comment.
Preliminary performance comparison between externally-hosted and self-hosted fonts. Keep in mind, the externally-hosted fonts are request more font-weights now - 2 for Roboto and 4 for Source Code Pro (vs. 1 for Roboto and 2 for Source Code Pro).
This PR vs. Production, ran tests 2 times in a row:
It's hard to get consistent Performance results (like look at how Bootstrap differs across tests) - but it seems like loading 4 weights of Source Code Pro via externally-hosted is still faster than loading 2 weights of self-hosted.
Technically, we're not using weight 800 for Source Code Pro yet, but I kept it in b/c it'll be used for the H1, which is used in the About pages coming up.
machikoyasuda
force-pushed
the
feat/101-font-type-fix
branch
from
b45666b to
8260e9e
Compare
|
@angela-tran @thekaveman This is now ready for eng review. @segacy1 has approved it design-wise. |
machikoyasuda
force-pushed
the
feat/101-font-type-fix
branch
from
8260e9e to
8134300
Compare
|
@thekaveman Rebased |
machikoyasuda
force-pushed
the
feat/101-font-type-fix
branch
from
8134300 to
cddbbe1
Compare
|
Rebased main and took care of comments. Ready for re-review @thekaveman @angela-tran |
fixes #101
closes #37
depends on #107 to be merged first
What this PR does
Font weights
This is a little chaotic 😰 but the font-weights in Figma don't always match up with what we want on the browser for CSS.
I just had to visually test different weights and get it approved with Segacy. Generally, the smaller font sizes don't need to be as heavy, font-weight-wise. Whereas, H2 and H3 are fine as 700, H4, A or buttons are too heavy, and have to have decreased font-weights. This makes it even more important that all type use an already-defined type style (a, h1, h2, h3, h4, button, body/p) - so we know it's correct. I haven't added H1 yet simply b/c none of our pages have an H1 yet - that will come with the About page creation.
In case you're wondering why this discrepancy exists:
Screenshots
H2 class
H3 class
H4 class
Pill
Links
Buttons