example-first-publish/src/components/heading/style/heading.js

Typography for BNNVARA

import styled, { css, injectGlobal } from 'styled-components';
import theme from '@bnnvara/colors';
import { breakpoints } from '@bnnvara/breakpoints';

injectGlobal`
  @import url('https://fonts.bnnvara.nl');
  
  body {
    font-family: "Exo BNNVARA", "Verdana", "sans-serif";
  }
`;

export const HeadingBase = css`
  font-family: "Exo BNNVARA", "Verdana", "sans-serif";
  margin: 0;
  padding: 0;
  text-transform: uppercase;
`;

export const one = css`      
  font-size: 26px;
  font-weight: 900;
  color: ${theme.bnnvara.base.black};
  
  ${breakpoints.md} {
    font-size: 44px;   
  }
`;

export const two = css`
  font-size: 26px;
  font-weight: 700;  
  color: ${theme.bnnvara.base.black};
  
  ${breakpoints.md} {
    font-size: 36px;   
  }
`;

export const three = css`
  font-size: 26px;
  font-weight: 700;
  color: ${theme.bnnvara.base.black};
  
  ${breakpoints.md} {
    font-size: 36px;   
  }
`;

export const four = css`
  font-size: 26px;
  font-weight: 700; 
  color: ${theme.bnnvara.base.black};
  
  ${breakpoints.md} {
    font-size: 28px;   
  }
`;

export const five = css`
  font-size: 22px;
  font-weight: 700; 
  color: ${theme.bnnvara.base.black}; 
`;

export const six = css`
  font-size: 20px;
  font-weight: 700;  
  color: ${theme.bnnvara.base.black}; 
`;

export const Copyright = styled.span`
  display: inline-block;
  font-size: 20px;
  color: ${theme.bnnvara.secondary.light};
  letter-spacing: 0;
  line-height: 32px;
`;

export const BrandTitle = styled.h2`
  display: inline-block;
  font-size: 22px;
  color: ${theme.bnnvara.base.black};
  line-height: 32px;
`;