libreavous/squelettes/scss/base/_typo.scss

/* Font Awesome */
.fas {
	font-family: Fontawesome-s;
	color:$couleurPrincipale;
}
.fab {
	font-family: Fontawesome-b;
	color:$couleurPrincipale;
}
.far {
	font-family: Fontawesome-r;
	color:$couleurPrincipale;
}

/* autres */
$typo-labeur:     'Lato', sans-serif;
$typo-titre:     'Metropolis', sans-serif;

$typo-texte:      $typo-labeur;

$couleur-titres: $couleurPrincipale;
$couleur-lien: $couleurPrincipale;

body {
    $_computed_bfs: strip-unit($body-font-size) / strip-unit($_base-font-size);
    font-size:      $_computed_bfs * (14/strip-unit($body-font-size))*1em;
    @include media($bp-small-up) {
        font-size: $_computed_bfs * (15/strip-unit($body-font-size))*1em;
    }
    @include media($bp-medium-up) {
        font-size: $_computed_bfs * (16/strip-unit($body-font-size))*1em;
    }
    @include media($bp-large-up) {
        font-size: $_computed_bfs*1em;
    }

    font-family:    $typo-texte;
    font-weight:    normal;
    line-height:    $typo-line-height;
    color:          $couleurPrincipale;
    text-rendering: geometricPrecision;
}

html.rtl * {
    // pas d'italique pour les langues RTL
    font-style: normal !important;
}

a {
    border-bottom:1px solid $couleurPrincipale;
	text-decoration:none;
	&.spip_out {
		color: $couleurTertiaire;
		border:0;
		font-weight:700;
		&:hover, &:focus {
			color:$couleurPrincipaleOn;
			border-color:$couleurPrincipaleOn;
		}
	}
    &:hover, &:focus {
        text-decoration: none;
        color:           $couleur-lien-hover;
        border-color:    $couleur-lien-hover;
        outline:         0;
    }
/*    &:focus {
        background-color: $couleur-lien !important;
        border-color:     $couleur-lien !important;
        color:            white !important;
        text-shadow:      none !important;
        transition:       all 0s !important;
        svg * {
            //fill: white !important;
        }
    }*/
	.sociaux &, .pagination & {
		border:0;
	}
}

.nav.principale {
	font-family:$typo-labeur;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
.surtitre {
    font-family:    $typo-titre;
	font-weight:	700;
    line-height:    1.2;
    font-style:     normal;
    color:          $couleur-titres;
    margin:         1.2em 0 0.3em 0;
    letter-spacing: 0.02em;
    a:link, a:visited {
        /*color: $couleur-titres;*/
    }
    a:hover {
        color: $couleur-lien-hover;
    }
}

h1, .h1 {
    font-size: em(35px);
    @include media($bp-medium-up) {
        font-size: em(40px);
    }
    @include media($bp-xxsmall) {
        font-size: em(30px);
	}
}

h2, .h2 {
    font-size: em(22px);
    @include media($bp-medium-up) {
        font-size: em(26px);
    }
/*     @include media($bp-xxsmall) { */
/* 		word-break: break-all; */
/* 	} */
}

h3, .h3 {
    font-size: em(20px);
    @include media($bp-medium-up) {
        font-size: em(23px);
    }
}

h4, .h4 {
    font-size: em(18px);
    @include media($bp-medium-up) {
        font-size: em(20px);
    }
}

h5, .h5,
h6, .h6 {
    @include media($bp-medium-up) {
        font-size: em(18px);
    }
}

::selection {
    color:       white !important;
    background:  darken($couleur-lien, 10%) !important;
    text-shadow: none !important;
    transition:  all 0s !important;
}