Styles

Typographie

L’affichage des titres et des textes

Du style pour le texte

Après cela, vous pouvez vous connecter à votre zone d’administration WordPress et créer ou modifier une publication. Faites défiler un peu l’écran de modification de la publication et vous remarquerez la nouvelle boîte de méta Attributs de publication avec une option pour sélectionner le modèle.

Titres

font-family : Roboto

font-weight : 700

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5

Heading h6

Corps de texte

font-family : PT Serif

font-weight : 400

Lorem Elsass ipsum baeckeoffe hop Gal ! placerat Huguette vulputate flammekueche Richard Schirmeck kuglopf mollis Heineken tristique condimentum auctor, ullamcorper ac pellentesque ac lacus tellus knack lotto-owe morbi Kabinetpapier ornare bissame purus senectus gravida.

Météor quam. bredele Pellentesque nullam schpeck vielmols, ornare sed hopla sit hoplageiss Verdammi ftomi! elit nüdle eget barapli ante geïz leverwurscht elementum chambon in, Carola jetz gehts los rossbolla libero. messti de Bischheim eleifend schnaps merci vielmols.

                
                <!-- Pour centrer -->
                <div class="flex-grid spacer-y-4x">                  
                    
                    <!-- TITRES -->
                    <article class="half-l">
                        
                        <!-- En-tête -->
                        <header>
                        
                            <h3>Titres</h3>
                            
                            <!-- Police -->
                            <p><strong>font-family</strong> : <em>Roboto</em></p>
                            
                            <!-- Graisses -->
                            <p><strong>font-weight</strong> : <em>500</em></p>
                        
                        </header>
                        
                        <!-- H1 -->
                        <h1>Heading h1</h1>
                        
                        <!-- H2 -->
                        <h2>Heading h2</h2>
                        
                        <!-- H3 -->
                        <h3>Heading h3</h3>
                        
                        <!-- H4 -->
                        <h4>Heading h4</h4>
                        
                        <!-- H5 -->
                        <h5>Heading h5</h5>
                        
                        <!-- H6 -->
                        <h6>Heading h6</h6>
                    
                    
                    </article>
                                      
                    
                    <!-- CORPS de texte -->
                    <article class="half-l">
                        
                        <!-- En-tête -->
                        <header>
                        
                            <h3>Corps de texte</h3>
                            
                            <!-- Police -->
                            <p><strong>font-family</strong> : <em>PT Serif</em></p>
                            
                            <!-- Graisses -->
                            <p><strong>font-weight</strong> : <em>400</em></p>
                        
                        </header>
                        
                        <!-- Paragraphes -->
                        <p>Lorem Elsass ipsum baeckeoffe hop Gal ! placerat Huguette vulputate flammekueche <a href="#" title="Plus d'infos">Richard Schirmeck</a> kuglopf mollis Heineken tristique condimentum auctor, ullamcorper ac pellentesque ac lacus tellus knack lotto-owe morbi  Kabinetpapier ornare bissame purus senectus gravida.</p>
                        
                        <p>Météor quam. bredele Pellentesque nullam schpeck vielmols, ornare sed hopla sit hoplageiss Verdammi ftomi! elit nüdle eget barapli ante geïz leverwurscht elementum chambon in, Carola jetz gehts los rossbolla libero. messti de Bischheim eleifend schnaps merci vielmols.</p>
                        
                        
                    
                    </article>
        
                
                </div>

                
                <!-- Bouton "Ascenseur" -->
                <a class="padded ascenseur" href="#" title="Retour vers le menu">
                    
                    <!-- Icone "flèche" -->
                    <i class="fa fa-arrow-right"></i>
                    
                    <span class="padded">Voir le menu</span>
                
                </a>

Notes

 /* FONTS */
/*
@font-face {
  font-family: "Oswald";
  src:  url("../fonts/Oswald-Bold.ttf")  format("truetype"),
		url("../fonts/Oswald-Light.ttf")  format("truetype"),
		url("../fonts/Oswald-Regular.ttf")  format("truetype");
}
*/

/* ECHELLE TYPOGRAPHIQUE et ENTETES */

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, .h6, h6 {

    font-family: var(--headings-font); /* Roboto */
    /* margin-bottom: 1rem; */
    font-weight: 500;    
    margin: 3rem 0 1.38rem;
    line-height: 1.3;
}

h1, .h1 {
    /*font-size: 2.5rem; */
    /* 40px */
    font-weight: 700; 
    margin-top: 0;
    font-size: 1.802rem;
}


h2, .h2 {
    /*font-size: 2.25rem;*/
    /* 36px */
    /*font-weight: 700;*/
    font-size: 1.602rem;
}


h3, .h3 {
  /* font-size: 2rem; */
  /* 32px */
    font-size: 1.424rem;
}


h4, .h4 {
  /* font-size: 1.75rem; */
  /* 28px */
    font-size: 1.266rem;
}


h5, .h5 {
  /*font-size: 1.5rem; */
  /* 24px */
    font-size: 1rem;
}

h6, .h6 {
  font-size: 1.25rem;
  /* 20px */
}

/* Classes */

.custom-font {
    font-family: var(--custom-font); /* Eurostile */
}

.headings-font {
    font-family: var(--headings-font); /* Roboto */
}

.main-font {
    font-family: var(--main-font); /* PT Serif */
}

.is-light {
    font-weight: 300!important;
}

.is-regular {
    font-weight: 400!important;
}

.is-bold {
    font-weight: 700!important;
}

.is-fat {
    font-weight: 900!important;
}

small, .text_small {
    font-size: 0.889rem;
}

Notes

30.11.21 : Réflexions en cours sur l’échelle typographique avec le site de type-scale

Où ça se trouve ?

Dans le fichier /usefuls/_typography.scss