Responsive landing page using html and css

Community feedback

• 

  Juan Alberto•20

  @juanhastierPosted 2 months ago

  Hi! I've been looking at your code and it looks fine, but I'd like to make some suggestions.

  The most common font-weight values ​​are:

      100: Thin (Hairline)
      200: Extra Light (Ultra Light)
      300: Light
      400: Normal
      500: Medium
      600: SemiBold (Demi Bold)
      700: Bold
      800: ExtraBold (Ultra Bold)
      900: Heavy (Black)
  

  In the style-guide.md file

  Font
      - Family: Figtree
      - Weights: 500, 800
  

  If you are going to use static fonts I think you should import them into your CSS for both a weight of 500 and a weight of 800.

  @font-face {
      font-family: "Figtree Medium" ;
      src: url(/assets/fonts/static/Figtree-Medium.ttf);
      font-weight: 500;
      font-style: normal;
  }
  
  @font-face {
      font-family: "Figtree ExtraBold" ;
      src: url(/assets/fonts/static/Figtree-ExtraBold.ttf);
      font-weight: 800;
      font-style: normal;
  }
  
  ...
  
  h1 {
      font-family: "Figtree ExtraBold";
      ...
  }
  
  p {
      font-family: "Figtree Medium";
      ...
  }
  ...
  

  If you are going to use variable fonts.

  @font-face {
      font-family: "Figtree" ;
      src: url(/assets/fonts/Figtree-VariableFont_wght.ttf);
      font-weight: 100 900;
      font-stretch: 50% 150%;
      font-style: normal;
  }
  
  ...
  
  html {
      font-family: "Figtree";
      ...
  }
  
  h1 {
      font-weight: 800;
      ...
  }
  
  p {
      font-weight: 500;
      ...
  }
  

  MDN - @font-face

  I hope these tips are helpful. Happy coding!

  0