I'm working on an application where we are to use the font LFT Etica. However, when displaying numbers, some of the digits are noticeably taller than the other ones. How can I get the height of the digits to equal height? Preferably without changing the font. It looks like 0, 2, 3, 6, 8, and 9 are displayed tall, and 1, 4, 5, and 7 are short.
Screenshot of current output
I have tried adjusting the CSS properties font-variant-numeric and font-variant without any luck. This is how my CSS currently looks:
body {
margin: 0;
font-size: 14px;
line-height: 1.5715;
font-family: LFT Etica, Lucida Sans Unicode, Lucida Grande, sans-serif;
font-feature-settings: normal;
font-variant: normal;
}
* {
padding: 0;
margin: 0;
max-height: 100000000px;
}
Related
font: SemiBold 14px/17px Basier Square;
I am trying to copy styles of a text from Adobe XD and it shows me font-size as above, I am confused, should I interpret it as 14px or 17px?
Answer: Font-size = 14px, Line-Height = 17px;
It is not Adobe specific, it's simple HTML definition
Reference: From Mozilla Docs, we can understand that
If font is specified as a shorthand for several font-related properties,
then-->
line-height must immediately follow font-size, preceded by "/", like this: "16px/3"
font: SemiBold 14px/17px Basier Square;
That would be
.element {
font-family: 'Basier Square';
font-weight: 600; /* SemiBold */
font-size: 14px;
line-height: 17px;
}
I am using a Google Font: Baloo Bhaina and despite setting margin and padding to zero, it still seems to be double height.
As you can see, highlighting the font shows the extra space that I can't get rid of. Anyone come across this before? Google fonts are usually awesome to work with.
Class attached to this font:
.hero-element h2 {
font-size: 5vw;
font-family: $brand-font;
color: $brand-color;
padding: 0px;
margin: 0px;
padding-top: 20px;
}
I've added a contact bar at the top but for some reason the numbers aren't on the same line.
http://puu.sh/kY9xG/6aed0786fc.png
css
.top_bar .tob_bar_right_col p {
font-size: 12px;
padding: 14px 0;
margin: 0;
line-height: 17px;
font-weight: 600;
}
It is correct only.It's coming due to the default font you used. Change the font type like below
.top_bar .tob_bar_right_col p {
font-family: "Times New Roman";
font-size: 12px;
padding: 14px 0;
margin: 0;
line-height: 17px;
font-weight: 600;
}
That's because of the font that you are using.
Some fonts uses the old way of placing the digits (text figures), with ascenders and descenders. The new way of placing the digits (lining figures) treats them similar to capital letters.
To get the new way of placing the digits you need a font that uses that form, for example Arial.
That's because of the font-family you are using. Some of them will make the numbers look weird. Just change you're font-family for that text and it should work.
Example:
.top_bar .tob_bar_right_col p {
font-family: "Arial", sans-serif;
}
Looks like it's a custom font, which appears different than other fonts.
You can check it e.g. by typing the same text in Gimp or Photoshop with the same font. It should output the same result.
Make sure, you're using the desired font-family.
Was having an unusual css font xheight issue in Windows Webkit. Wanted to post the fix for it as it took me a couple of hours to figure out what was causing it.
The problem:
The uneven xheight on the h1 strapline - caused by a positioning margin and the relationship between line-height and font-size messing with the xheight (which can be seen in the inspector (margin: 30px 0)).
The fix
Was simply removing the margin in the CSS and positioning using line-height with a corresponding font-size instead. Simple!
Code updated to:
font-weight: 600;
font-family: 'proxima-nova-alt-condensed', "Arial Narrow", Arial, sans-serif;
font-size: 28px;
color: #FFFFFF;
line-height: 45px;
How to get cross browser <sup> without interrupting line height?
I tried vertical-align:top but it looks ok in FF 3.6 and IE but not in FF 3.0.
How to get consistent in size (size of superlative text) and position of <sup> identical in all browsers without interrupting line height.
I'm using <sup> to indicate footnote? not to show power
<p> Stackoverflow is killing<sup>10</sup> experts-exchange</p>
Your best chance for a consistent rendering are real superscripts:
HTML
<p>Stackoverflow is killing<span class="unicode">¹⁰</span> experts-exchange</p>
CSS
.unicode
{
font-family: 'Lucida Sans Unicode', 'DejaVu Sans', 'Arial Unicode MS';
}
Live
Stackoverflow is killing¹⁰ experts-exchange
sup {
vertical-align: super;
height: 0;
line-height: 1;
}
If that doesn't work, you can take it a bit further..
sup{
height: 0;
line-height: 1;
vertical-align: baseline;
_vertical-align: bottom;
position: relative;
bottom: 1ex;
}
vertical-align: text-top;