CODEWITHSUNDEEP
css
JD Isaacks
JD Isaacks

Reputation: 58014

CSS specify font-size for each font in font-family?

The layout for my main navigation will shift incorrectly if the font used is too large (actually if too wide).

The first font in the font family looks great at a specific font, however the second font (which will be used if they do not have the first) is too wide and will shift the layout.

I did find this similar quesiton which was because the font was too tall. The answer was to use the ex unit because it is based off height.

Is there a unit I can use for width, or is there a way to specify the font-size for each font in the font-family?

Upvotes: 1

Views: 775

Answers (2)

Ravikiran
Ravikiran

Reputation: 1458

Ideally for fonts I would suggest using standard classes such as x-small (extremeley small), small, medium, med-small, large, med-large, x-large etc., and use these classes for different font sizes. Only if you want something really big, you can always use <h1>, <h2> tags. I would use % as the standard for all of these. In my usage with various fonts, they rarely have broken the below classes used.


.body {
   font-family: arial,helvetica,clean,sans-serif;
}
.x-small {
    font-size: 77%;
   letter-spacing: normal;
}
.small {
    font-size: 85%;
    letter-spacing: normal;
}
.med-small {
    font-size: 92%;
    letter-spacing: normal;
}
.medium {
    font-size: 100%;
    letter-spacing: normal;
}
.med-large {
    font-size: 107%;
    letter-spacing: normal;
}
.large {
    font-size: 114%;
    letter-spacing: normal;
}
.x-large {
    font-size: 122%;
    letter-spacing: normal;
}
.x2-large {
    font-size: 131%;
    letter-spacing: normal;
}
.x3-large {
    font-size: 138.5%;
    letter-spacing: normal;
}
.strong {
    font-weight: bold;
}

Upvotes: 0

Šime Vidas
Šime Vidas

Reputation: 186103

Consider supplying similar fonts as alternatives. For instance: 

font-family: Arial, Helvetica, sans-serif;
font-family: Tahoma, Geneva, sans-serif;

That way, the alternative font won't make the layout break.

Upvotes: 3

Related Questions