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;
}
Related
See the example code:
span {
font-size: 150px;
background: lightgray;
margin: 8px 0px;
}
.sans-serif { font-family: sans-serif; }
.serif { font-family: serif; }
<span class="sans-serif">Done</span>
<br>
<span class="serif">Done</span>
I'm assuming the extra space is "built-in", but is there a way to remove it somehow?
I'm trying to left-align some huge page titles with the much-smaller subtitles underneath.
This has no correct way, because, it is the font that displays that way. Consider the below example:
span {
font-size: 150px;
background: lightgray;
margin: 8px 0px;
}
.sans-serif { font-family: sans-serif; }
.serif { font-family: serif; }
.serif2 { font-family: Times; }
<span class="sans-serif">Done</span>
<br>
<span class="serif">Done</span>
<br>
<span class="serif2">Done</span>
The above image has different layout if it is a serif in my computer. So, it is a trial and error basis and you have to make sure what you are doing is fine in all computers and browsers. The Times font fits perfectly and the serif font has some space. This is why I said it is a trial and error method.
The only hacky solution is to use a negative margin for the content, based on the font and you cannot generalize it.
You could add a minus margin-left. See here: https://jsfiddle.net/mna56yf9/5/ But if you're planning on having a background color, you might have to apply it to a wrapping div.
span{
margin-left: -20px;
}
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;
This problem exists ONLY on Mac Safari.
Other browsers / other OS works properly.
The problem:
Observe the font weight of the top navigation here: http://www.octa.com (WordPress)
Then observe the font weight of the top navigation here: http://www.octa.com/products (Magento)
Note that while they are served by different code (WP vs Magento), the css is nearly identical between the two pages.
Here's the relevant bits of the css:
nav.menu li a {
font-family: 'VegurLight','Myriad Pro',Arial,Helvetica,Sans-Serif;
font-size: 20px;
text-align: left;
}
nav.menu li a, #subnavwrapper nav li a {
color: #FFFFFF;
font-weight: normal;
height: 50px;
line-height: 50px;
padding: 0 46px 0 0;
}
nav li a {
display: block;
line-height: 1em;
text-decoration: none;
}
body {
color: #000000;
font-family: "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans- serif;
font-size: 14px;
line-height: 1.55em;
text-align: center;
background: black;
}
Note that the font is imported using #font-face.
I've tried everything - many answers here on SO and other articles. Note that none of the below styles gleaned from other answers / resources corrected the font display.
font-variant:normal;
-webkit-font-smoothing: antialiased;
text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
Try -webkit-font-smoothing: antialiased;
I've found that this simple change made Safari's font-weight property much more reliable.
(I cannot post comments so I can only add my findings to the conversation by posting.)
I have found that text in fixed position elements appears lighter weight than other types of positioning in Safari. Therefore could not be ignored as suggested in other places.
Adding --webkit-font-smoothing: antialiased does solve this , but then it looks lighter than in Firefox. Which can be fixed with -moz-osx-font-smoothing: grayscale
fiddle here to show the problem - Safari only
With the comments / prodding from #JukkaK.Korpela, I discovered a few things:
First, the root of the problem is this:
-webkit-backface-visibility: hidden;
Which was added to the code to solve an animation problem per this answer: iPhone WebKit CSS animations cause flicker
Don't know how to solve the font and solve the flicker, but I can at least choose which one to solve now.
Second, as an avid Firefox/Firebug user, I had tried using Firebug Lite in Safari, as well as another extension for Safari, and they did not work. So, for all of you out there who may be trying to troubleshoot Safari-only issues, here's a big tip:
Safari's "Develop" tool. Didn't know about it at all until I did some searching today, but it's a menu item in the toolbar. If you don't see it, then go to Preferences->Advanced, and check the "Show Develop Menu in Toolbar"
With that tool, I was able to troubleshoot and solve this quickly.
I have some CSS:
fieldset {
border-radius: 5px;
border: 3px solid blue;
padding: 5px;
margin: 0em;
}
legend {
font-weight: bold;
color: green;
}
#myform{
width: 330px;
margin: 0em;
}
body {
font-family: Arial, sans-serif;
}
When I embed it with <style>, it works perfectly fine:
But when I put the same CSS into a stylesheet and import it using <link>, I get some random whitespace:
I have removed the form elements completely, and there is still whitespace (although if I keep them in, there is considerably more of it). I used the Chrome developers console to check form and body height using $(body).css("height") (and the same for the form), and it gives me a number which is way too small to include the whitespace, but seems to match the height if the whitespace is ignored. Where is this coming from?
This seems to be a bug, when changing the margin of the body back and forth in the developers console it gets right again. Setting this property in the CSS doesn't have any effect at all.
A measly workaround would be creating a javascript file for your popup, like popup.js, and then change the margin in there after the popup window is loaded:
document.addEventListener('DOMContentLoaded', function() {
document.body.style.margin = '8px';
});
I took 8px as value because that's the standard value of a Chrome popup:
You should consider reporting this bug to the Chrome issues list.
put CSS with !important keyword
i.e.
#myform{
width: 330px !important;
margin: 0em !important;
}
When using a <h1> tag for example, is there a reusable formula for getting the outer border of that element to PERFECTLY follow edges of the type? In theory I would expect this to work:
h1{
display: block;
font-family: sans-serif;
font-size: 38px;
line-height: 100%;
height: 38px;
}
So the line height is set to be the same as the absolute text height, which is also the height of the block. However this never works. Here is an example of what does work for sans-serif 38px;
h1{
display: block;
font-family: sans-serif;
font-size: 38px;
line-height: 28px;
height: 35px;
}
Here is another working example.
h1{
display: block;
font-family: sans-serif;
font-size: 25px;
line-height: 19px;
height: 22px;
}
This is all well and good, but it has to be calculated manually in firebug each time. There is no formula I can find to do this.
Additionally, it would be nice if any solution also worked with #font-face fonts, but I understand there is more to take into account there. (like the top alignment that only occurs on Mac).
Does such a formula exist? Is it possible to write one? How about some LESS CSS fancyness?
I agree with #ToddBFisher in the comment, and at this point for me it's more of an usability issue. Consider people can also vary the font sizes in their browsers... in that case using ems would be better. But browsers also render font differently, so something that looks amazing in a mac will look pixelated in a pc. If you want something to look perfect, use images.
Check this other question for more info on line-height: How to achieve proper CSS line-height consistency
Or this one: CSS Line-Height Guide
You can also check the usability stack for discussions about these things: https://ux.stackexchange.com/ There are pretty amazing posts in there.