0

With a very large font-size (600 px) you get unwanted whitespace on the side of the text. This makes it hard to precisely align the text with the rest of the content. See screenshots:

example one example two

It seems to differ depending on the type of font used and which character is the first.

I tried adjusting letter spacing, line-height, display, whitespace. I checked for padding and margin on the elements; there are none. None of this made a difference.

How can I remove this whitespace? I'm focused only on the whitespace on the left and the right, not the whitespace above and below.

edr2023
  • 1
  • 1
  • 1
    Can you provide a code snippet with font family you are using? – la_petite_kozel Jul 05 '23 at 09:17
  • _"I tried adjusting letter spacing, line-height, display, whitespace"_ - the latter three are completely pointless for this; and the first one is for the spacing between _all_ the letters, so if you eliminated that, you would not have any spacing between the letters any more either. I think you have no other choice here than to try and compensate for this with a negative margin - using "magic numbers" figured out via some trial & error. – CBroe Jul 05 '23 at 09:33
  • only with css, as saying @CBroe, try and compensate with negative margin. Use monospace fonts would ne easier, at least space is supposed to be same, and make your negative margin in em : it'll give you a ratio regarding the body font – pier farrugia Jul 05 '23 at 10:03
  • Thanks for your replies. @la_petite_kozel We use the font-family "Moderat". Here is a link to a code-pen (for demonstration purposes it uses a different font, but the problem stays the same): https://codepen.io/edr2023/pen/ZEmJaqX – edr2023 Jul 05 '23 at 15:01
  • @CBroe & pier farrugia : Unfortunately in this case a negative margin is not a solution for us because the whitespace is different depending on the character. Ie: there is more space before an 'O' than an 'T' as you can see in the provided screenshots. We want to solve it so it works for any type of word (it's a flexible block that the client can adjust). – edr2023 Jul 05 '23 at 15:06
  • Please provide enough code so others can better understand or reproduce the problem. – Community Jul 05 '23 at 16:42
  • @edr2023 here is a similar question https://stackoverflow.com/questions/14061228/remove-white-space-above-and-below-large-text-in-an-inline-block-element – la_petite_kozel Jul 05 '23 at 16:55
  • @la_petite_kozel Thanks for the link, I'll check it out. – edr2023 Jul 06 '23 at 13:54

0 Answers0