search

ocadotechnology / codeforlife-portal

The portal code for Code for Life
https://www.codeforlife.education/
Other
51 stars 79 forks source link

Portal design system: Define fonts #888

Closed j4mesholland closed 5 years ago

j4mesholland commented 5 years ago

Description

We will use our existing fonts but will review sizing.

Acceptance criteria

Use point sizing for a/w but REMs for Front-end

j4mesholland commented 5 years ago

Please review:

Typography Scale.png

mrniket commented 5 years ago

Should we also define our backup fonts? (If the browser cannot get our requested fonts for whatever reason)

faucomte97 commented 5 years ago

We want to review this against what we already have :)

mrniket commented 5 years ago

What do you guys think about supporting fluid typography? https://medium.com/beamly/what-is-fluid-typography-and-should-i-be-using-it-44a1b7125205 https://www.madebymike.com.au/writing/fluid-type-calc-examples/

j4mesholland commented 5 years ago

@faucomte97 Can you do a spot the difference with what we already have. @mrniket the fluid type looks interesting, but I'm not sure it's ready to use quite yet (from what I read in the Medium
article).

faucomte97 commented 5 years ago

Here are the details of the various fonts we've got across the website (it might be worth noting that these are specific to screen sizes above 1400px and with a base html font size of 10px):

h1 'banner homepage text' / Baloo Regular (105pt) h1 / Baloo Regular (41.25pt) h2 / Source Sans Pro Semibold (33.75pt) h3 / Source Sans Pro Semibold (26.25pt) h4 / Source Sans Pro Regular (22.5pt) p / Source Sans Pro Regular (15.75pt) small / Source Sans Pro Regular (12.6pt) form label / Source Sans Pro Bold (15pt) button-jumbo text / Source Sans Pro Regular (28.5pt) button-big text / Source Sans Pro Regular (21pt) button-regular text / Source Sans Pro Regular (15pt) button-small text / Source Sans Pro Regular (12pt) button-menu text / Source Sans Pro Regular (16.5pt) blockquote / Source Sans Pro Regular Blue (18.75pt) overline / Source Sans Pro Regular Capitalised (12.6pt)

j4mesholland commented 5 years ago

We are going to use fluid typography. But we need to work out the root first. Try: https://typetura.com/

faucomte97 commented 5 years ago

If we want to implement the root font size in such a way that it doesn't change what we currently have on the website, then the root font size has to be 10px.

j4mesholland commented 5 years ago

@faucomte97 can we close this now?

faucomte97 commented 5 years ago

@j4mesholland yes :) The issue for defining root font size has been created so it's all good.

j4mesholland commented 5 years ago

Great, thanks. Closing the issue.