Newer
Older
pre-www / src / assets / css / base / typography.css
@font-face {
    font-family: 'Standard';
    src: url('../fonts/standard-book-webfont.woff2') format('woff2'),
         url('../fonts/standard-book-webfont.woff') format('woff'),
         url('../fonts/standard-book-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Standard';
    src: url('../fonts/standard-book-italic-webfont.woff2') format('woff2'),
         url('../fonts/standard-book-italic-webfont.woff') format('woff'),
         url('../fonts/standard-book-italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Standard';
    src: url('../fonts/standard-bold-webfont.woff2') format('woff2'),
         url('../fonts/standard-bold-webfont.woff') format('woff'),
         url('../fonts/standard-bold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Standard';
    src: url('../fonts/standard-bold-italic-webfont.woff2') format('woff2'),
         url('../fonts/standard-bold-italic-webfont.woff') format('woff'),
         url('../fonts/standard-bold-italic-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

html{
    text-rendering: geometricPrecision;
}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
    /* @apply font-bold; */
}

h1{
    @apply h1;
}

h2{
    @apply h2;
}

h3{
    @apply h3;
}

h4{
    @apply h4;
}

h5{
    @apply h5;
}

h6{
    @apply h6;
}

p{
    @apply text-size-base text-black mb-10;
    a{
        @apply underline;
    }
}

@layer utilities{
    .h1{
        @apply text-3xl lg:text-4xl xl:text-5xl leading-snug;
    }
    
    .h2{
        @apply text-2xl lg:text-3xl xl:text-4xl leading-snug;
    }
    
    .h3{
        @apply text-2xl lg:text-4xl xl:text-3xl leading-snug;
    }
    
    .h4{
        @apply text-lg lg:text-xl xl:text-2xl leading-snug;
    }
    
    .h5{
        @apply text-lg xl:text-xl leading-snug;
    }
    
    .h6{
        @apply text-base leading-snug;
    }
    .text-size-sm{
        font-size: 0.95vw;
        line-height: 140%;
    }
    .text-size-md{
        font-size: 1.4vw;
        line-height: 150%;
    }
    .text-size-base{
        font-size: 1.15vw;
        line-height: 150%;
    }
    .text-size-md-lg{
        font-size: 1.8vw;
        line-height: 135%;
    }
    .text-size-lg{
        font-size: 2vw;
        line-height: 130%;
    }
    .text-size-xl{
        font-size: 2.7vw;
        line-height: 130%;
    }
    .text-size-xxl{
        font-size: 4vw;
        line-height: 120%;
    }
    .text-size-xxxl{
        font-size: 6.25vw;
        letter-spacing: -0.01vw;
        line-height: 116%;
    }
}