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;
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;
}
From the images below, you can see that the font rendering used by safari adds some white lines to some characters. This occurs in Safari for both iOS and Mac. While in the example below it is not as noticeable, in practice it can be quite distracting.
I noticed this happened after I added font-weight: 400; to my text. The reason I added it was to fix another issue by Safari which rendered by font with large kerning between letters see this Stack Overlow question.
This is the entire CSS for the text:
h2 {
font-family: 'My-Font', sans-serif;
font-size: 3.5em;
line-height: 1.2em;
margin-bottom: 0.5em;
text-align: center;
}
Is this another bug in Safari and is there a workaround if so? Thanks.
Some folks recommend
text-rendering: optimizeLegibility;
Other
transform: perspective(1px);
Hope it helps.
I'm using the bootstrap affix js plugin and it works great. The problem I'm having is when I change the body to use a custom font (Google: Lato) it throws the anchor positions completely off.
The affix links lead to bad positions on the page and the page no longer lines up with the affix sidebar when scrolling. It's always off by 100px or so.
ie.
body { font-family: 'Lato', helvetica, arial, sans-serif; color: #221e1e; font-weight: 300; line-height: 150%; }
I'm sure there's another way to compensate for the new smaller font or line-height, but I haven't found it.
If I raise the line-height on the entire body to say 300, it works ok, except that the spacing is horrible. So I tried to adjust the line height on only the titles holding the anchors.
h2 .mw-headline { line-height: 330%; }
And it almost works, except it's still off on the first link and it feels kind of hackish. I'm sure there's a proper way to handle this, I'm just not sure what that is.
You can probably fix this using Bootstrap's custom variables if you're using less or sass.
In your case it'd something like:
#baseFontFamily: 'Lato', helvetica, arial, sans-serif;
#textColor: #221e1e;
#baseLineHeight: 20px;
Find more variables here: http://twitter.github.com/bootstrap/customize.html
I have some buttons my page using a custom font face using the CSS and files generated by the Font Squirrel generator.
When the font's colour is black, they display fine...
However, when I change the colour to something else, the text seems to have a smoothing that bleeds the characters into each other and generally makes the characters look too thick...
I've played around with font-smooth property and a few other things, but have been unable to get it to work...
I don't think it's too relevant but the CSS for these buttons are...
color: #FFFFFF;
display: block;
padding: 1em 0.3em;
position: relative;
text-decoration: none;
z-index: 10;
font-family: BebasNeueRegular,Arial,Sans-Serif;
font-size: 22px;
list-style: none outside none;
text-align: center;
text-transform: uppercase;
The background is a separate element.
How can I get the white text to appear like the black text?
(It may be hard to tell the difference between the two, but my boss insists it is there.)
This worked for me:
-webkit-font-smoothing: antialiased;
Part of the problem is that it's not a particularly well-made font. I concur with #thirtydot's suggestion of text-shadow. A 1px black-on-black text-shadow should thin the font out. Any browser that doesn't support text-shadow will be rendering the font horribly anyway.
And remember that some html elements has bold as default, like h1, h2... When I use font squirrel to generate a font and use it with h1, for example, I always put:
font-weight: normal;