CODEWITHSUNDEEP
htmlcssfont-size
dialex
dialex

Reputation: 2866

Header letters overlap when using narrow resolutions

I'm adding bootstrap to my website and I noticed that, when I use a narrow resolution (windows size) my header overlaps. If my header is small in size, like the usual H1 size, there's no problem. But when using a large size (check CSS below) the problem exemplified in the image happens.

How can I solve it? Is there any property like vertical spacing, or something like that? I'm a newbie with css. A possible workaround is to use Fittext.

CSS code:

.nevis-font {font-family: 'Nevis', Tahoma, sans-serif;}
.ultra-head {font-size: 7.8em;}

HTML code:

<div class="row-fluid">
    <div class="span12">
        <br/>
        <h1 class="text-center nevis-font ultra-head">DIOGO NUNES</h1>
        <br/><br/><br/>
    </div>
</div>

example

Upvotes: 0

Views: 77

Answers (1)

FelipeAls
FelipeAls

Reputation: 22161

You should modify line-height:

.nevis-font {
    font-family: 'Nevis', Tahoma, sans-serif;
}
.ultra-head {
    font-size: 7.8em;
    line-height: 1.5;
}
  • Do NOT use line-height in pixels, it doesn't scale. Use unitless values (or percentages or ems but that's equivalent).
  • Do not set line-height below 1 either.
  • Default value is around 1.3 or 1.4
  • accessibility guidelines recommend at least 1.5
  • there are reasons when you want to use a line-height of 1 but that's when you are CERTAIN that there won't be 2 lines of content. Rare cases

Font makers are free to do whatever they want with the baseline and other properties embedded in font files: script fonts can span over 3 lines of text for some fancy effect if they want! (I believe).
tl;dr with exactly the same typography parameters, each font and character within will occupy different heights and widths and etc

EDIT: are there negative margins anywhere to be seen in Firebug?

Upvotes: 1

Related Questions