When you connect a font from google fonts, adjacent elements start to shift from the elements with the installed font. What kind of shoals? The first problem was solved by vertical alignment, and the second by a fixed height of 40px. That's it for the second problem, is a fixed height suitable or is it better to solve it differently? since the layout has a size and line spacing of 40px.

enter image description here enter image description here

html, body { margin: 0; padding: 0; background: #f3f3f3; } .title { /* height: 40px;*/ margin: 20px 0; background: #6a8da2; } .title h1 { display: inline-block; margin: 0; margin-left: 20px; padding: 0 10px; font-family: "Oswald", sans-serif; font-size: 40px; line-height: 40px; text-transform: uppercase; color: #676767; background: #f3f3f3; } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="title"> <h1>About us</h1> </div> </body> </html>

    1 answer 1

    Add vertical-align: top; to the header, should help.

     html, body { margin: 0; padding: 0; background: #f3f3f3; } .title { /* height: 40px;*/ margin: 20px 0; background: #6a8da2; } .title h1 { display: inline-block; margin: 0; margin-left: 20px; padding: 0 10px; font-size: 40px; line-height: 40px; font-family: "Oswald", sans-serif; text-transform: uppercase; color: #676767; background: #f3f3f3; vertical-align: top; } 
     <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="title"> <h1>About us</h1> </div> </body> </html>

    • And because of what is happening so that the elements are shifted? - John-n
    • one
      I suppose the fact is that the baseline of the “Oswald” font differs from the usual sans-serif , and since the standard value is vertical-align - baseline , the block is displayed with a vertical offset. Just in case, vertical-align: bottom would work just as well, if not baseline . - Surfin Bird