Build the style guide (Typography) about osf-website

[alabobriggs]

@BolajiAyodeji the github issue to create the typography page will show just 2 fonts Ubuntu and Avenir as specified by the design lead @perriefidelis

[BolajiAyodeji]

Done! 👍

[alabobriggs]

@BolajiAyodeji should the page look exactly like this

The essence of this issue is to have the classNames ready for all typography and colors and I think you've started implementing this already from your last ticket. Just implement all on the style guide and documnent it similarly on this page. Sounds good?

Yes sounds good. I will do this

[alabobriggs]

Thank you @BolajiAyodeji . I am looking at working on this and moving to the next issue today. @perriefidelis please can the font files be provided soon

[alabobriggs]

Please can I be assigned to this @alabobriggs

[alabobriggs]

@BolajiAyodeji should the page look exactly like this

[alabobriggs]

The design guide doesn't show how the font sizes should differ on screen sizes. How do I implement responsiveness

[BolajiAyodeji]

@BolajiAyodeji should the page look exactly like this

The essence of this issue is to have the classNames ready for all typography and colors and I think you've started implementing this already from your last ticket. Just implement all on the style guide and documnent it similarly on this page. Sounds good?

[BolajiAyodeji]

The design guide doesn't show how the font sizes should differ on screen sizes. How do I implement responsiveness

We are yet to receive the design for other screen sizes, let's chill a bit for the design team.
cc @perriefidelis

[alabobriggs]

Issues with the typography styleguide

1. Loading 4 different fonts on the web page will cause waste of resource as not all 4 will be used
2. Adding one font with different font weight is rated as slow while using google fonts, adding more than 2 fonts as much as 4 wont be alright.
3. The way tailwind.css allows custom font families is by adding an array of font families in tailwind.config.jsfile eg.

 theme: {
...
    fontFamily: {
      display: ['"source sans"', "avenir", "gotham", "ubuntu"],
      body: ['"source sans"', "avenir", "gotham", "ubuntu"]
    },
...
}

and it will be used in the app by adding the apply tag in style,css file eg.

html {
    @apply font-body;
}

if the above is implemented a text components will check through the fonts that are available on the users pc if we don't use google fonts.

I have been researching on adding individaul font family for a text component but I havn't seen any yet.

[alabobriggs]

@BolajiAyodeji please I need assistance on this issue

[BolajiAyodeji]

Hey @alabobriggs, apologies for the delayed response.

You don't need to load all the fonts, we'll just load the one(s) needed for the website effectively as seen in the prototype.

Hey @perriefidelis, do we need all the fonts on the website and can you provide us with the font files in all types?

Alternatively, you can use Web Fonts.

Web fonts are a CSS feature that allows you to specify font files to be downloaded along with your website as it is accessed, meaning that any browser that supports web fonts can have exactly the fonts you specify available to it.

@font-face {
  font-family: Avenir;
  src: url('fonts/avenir.woff2') format('woff2'),
}

h1 {
  font-family: Avenir;
}

For more research: https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts

[perriefidelis]

Hey @alabobriggs, apologies for the delayed response.

You don't need to load all the fonts, we'll just load the one(s) needed for the website effectively as seen in the prototype.

Hey @perriefidelis, do we need all the fonts on the website and can you provide us with the font files in all types?

Alternatively, you can use Web Fonts.

Web fonts are a CSS feature that allows you to specify font files to be downloaded along with your website as it is accessed, meaning that any browser that supports web fonts can have exactly the fonts you specify available to it.

@font-face {
  font-family: Avenir;
  src: url('fonts/avenir.woff2') format('woff2'),
}

h1 {
  font-family: Avenir;
}

For more research: https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts

the only fonts needed for the website are: Avenir and Ubuntu

[perriefidelis]

@BolajiAyodeji the github issue to create the typography page will show just 2 fonts Ubuntu and Avenir as specified by the design lead @perriefidelis

Thanks !

[alabobriggs]

Just opened a pull request @BolajiAyodeji for this issue. Kindly review.

[github-actions]

Hey, there! 👋 This issue has been marked as stale and would be closed. Feel free to open it again if you have more questions 👍