0

I'd never faced this kind of deal, so I'm figuring out how to do it. I bought a font called Core Sans C and it comes with a problem (I see it as a problem). At the bottom there's an extra space that it comes with the font (not added through CSS).

Example of the problem

As you can see on the image, the button has more space on the bottom than on the top. I tried fixing it with CSS without success and I don't want to add more space on top to compensate the extra one below.

The HTML and CSS used on the image is the one below:

.example {
  display: block;
    margin-bottom: 20px;
    font-family: "Core Sans C";
    background: black;
    border: 1px solid;
    color: #ffffff;
    font-size: 95px;
    }
<button class="example">Hello</button>

(Of course I can't add the font because it is a payed one, but you can try going to the Core Sans C link I provided and then with inspect element create a button and see it by yourself)

Does anybody faced the same and has any idea on how to fix this?

Thanks.

seergiue
  • 326
  • 1
  • 3
  • 15
  • You probably can fix it using the `line-height` and/or `vertical-align` properties. But if a font is set to high, you should abandon that font a pick a better crafted one. You will have pain with such fonts over and over again. See also: [Fix custom font line-height with CSS](https://stackoverflow.com/questions/28101813/fix-custom-font-line-height-with-css) and [Deep dive CSS: font metrics, line-height and vertical-align](https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align) – feeela Aug 06 '18 at 14:12
  • 1
    That space is there **for a reason**...it not only spaces out the text from the line above/below but **more importantly** is there for *descenders* & ascenders. I'd suggest you review how typography actually works. Try typing lower case `g` or `q`, then you'll see what that space is for, – Paulie_D Aug 06 '18 at 14:12

0 Answers0