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

Asked

Viewed 349 times

8

I am trying to put together a layout as "pixel Perfect" as possible, but I have always come across this problem, using large fonts, there is a space above and below the font, as if it were a padding/margin. I searched on the subject, trying to relate to the line-height, but without success. 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, but each source would have a different negative line-height. I was also suggested to look more about the "vertical Rhythm", "half-Leading", but only raised me more doubts.

Follow an example below 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>

css font css-font-size

  • If you zeroed padding and margin, I believe that perhaps the only, and probably the best way would be to line-height even, instead of using line-height:normal use it smaller than the source, for example: https://jsfiddle.net/leonardorodrigues/k6ebopvn/1/

  • @Leonardorodrigues and is there any standard to calculate this line-height? It was the only way I found it too, however in some fonts that one letter a little bigger than the other also can not align with the line-height

  • maybe there is if you use a css framework (like Sass or Less). But from the basic css I don’t think

1 answer

0

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

And one way would be to define a class for each type of font you are using along with 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 both don’t guarantee you that "pixel Perfect" because they are relative values, but it is a way to circumvent this schematic of the source spaces.

Browser other questions tagged css font css-font-size

You are not signed in. Login or sign up in order to post.