Is there any way to calculate a pattern of extra space from a source? [duplicate]

Navigation
8

I'm trying to make a layout as "pixel perfect" as possible, but I've always come across this problem, using large fonts, there is a space above and below the font, like a padding / margin. I searched the subject, trying to relate to line-height, but to no avail. Does anyone have any explanation of how to get as close to the font size?

From what I saw the "way" is to use the negative line-height and try to adjust, however each font would have a different negative line-height. They also suggested that I look for more about " vertical rhythm ", " half-leading ",

Here's an example to illustrate the case better: 

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-size:16px;
}
body{
  font-family: 'Roboto', sans-serif;
}
h1{
  outline:1px solid red;
  font-size:120px;
  vertical-align:text-top;
  line-height:normal;
}
h2{
  outline:1px solid blue;
  font-size:90px;
  margin-top:10px;
}
h4{
  font-size:16px;
  line-height:normal;
  outline:1px solid green;
  /*line height = 24px;*/
  /* 16 * 1.5 = 24px; */

}
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<h1>Font h1</h1>
<h2>Font h2</h2>
<h3>Font h3</h3>
<div class="wrapper">
  <h4>Font h4</h4>
</div>
    
asked by anonymous 16.01.2017 / 20:22

1 answer

0

This space is from source to source, does not seem to have a correct pattern, as already said in the comments, using line-height is the best option. Now to calculate the value, you can use the calc() function of the CSS itself or even% value, since line-height accepts this type of value.

And one way would be to define a class for each type of font you are using next to these size corrections.

Ex: 

.roboto{
  font-family: Roboto;
  /* quanto maior a fonte, a linha segue de forma relativa */
  line-height: 90%;
}

or 

.roboto{
  font-family: Roboto;
  /* Sempre diminui 20 pixels fixo no tamanho da linha de acordo com o font-size atual */
  line-height: calc(100% - 20px;
}

They do not guarantee you this "pixel perfect" as they are relative values, but it is a way to circumvent this layout of the font spaces.

    
16.01.2017 / 22:15
How to change content on a page? Friendly Url in PHP and Sql