Im using Lucida Grande font for my site and when I put the font-size large, say 30px, the fonts in the two adjacent lines overlap upto some extent. How can I put a gap between the two lines using CSS?
Use the line-height property. Something like
p {
line-height: 1.3em;
}
Should do. This will give you line height 1.3 times the font-size you set. You probably have this set to a fixed number, like 25px in another ruleset or stylesheet, thus when you increase the font-size the line height does not increase with it.
You probably have a fixed line-height set. Change it to be either relative (e.g., line-height: 1.3em;) or fixed, but larger (30px).
/*
user same line-height as as font-size;
*/
.product{
font-size:30px;
line-height:30px;
}
/*
its always a better practice to define line-height in body if you are going to use same font size across or as standard
*/
Related
Is it possible to achieve this in CSS:
I'd like to keep a Typographic hierarchy in my document. I'd like to change dynamically the size (keeping a ratio) of my Headings depending on the font-size of my body in px.
Let's say I want my Headings and body size to keep in sync between each other and change depending on body's font-size in px.
If the size of body's font-size increases/decreases the Headings h1,h2,h3 also follow and keep a ratio.
is this something doable in CSS alone?
The question asks how to make sure all font sizes in a document change proportional to the size set in the body element.
If you set a definite size in the body and thereafter use the em unit to size your fonts you will find that everything changes proportionally.
BUT be aware that the em unit is itself a relative unit. That is actually probably what you want, but just make sure. Consider this example. The div which is a child of the h1 element has a font size proportional to the h1's font size which is itself proportional to its parent's (body element) font size. The div which is not a child of h1, only of the body element has a font size proportional only to the body's font size. See snippet below.
There is another unit, rem (root em) which is set in the html element of the document. Most browsers set the basic font size o 16px there and thus that is what 1rem is. You can change that and set for example our body font size in terms of rem. The main reason for doing that would be to acknowledge that the user can change the basic setting in their browser, perhaps they hope that all text will then become automatically bigger, so it is considerate to set your body font size in terms of rem.
To make the arithmetic of this easier, set
html {
font-size: 62.5%;
}
Your rem will then be 10px (or a proportion of whatever the user has set). Then to get your body font-size to say 24px (for most users or proportional to the users browser setting) by
body {
font-size: 2.4rem;
}
From there on in use em or rem depending on what suits your case at particular points in the document and everything will be proportional, and as a bonus, give the user better accessibility.
Here's a snippet to illustrate:
html :
font-size: 62.5%;/* 10px on most browsers */
}
body {
font-size: 2.4rem;/* 24px; */
}
h1 {
font-size: 2em;/* 48px; */
}
div {
font-size: 1.5em;
}
<html>
<body>
This is inside the body only
<h1>This is h1 inside body and with font-size 2em
<div>This is div inside h1 and with font-size 1.5em</div>
</h1>
<h1>This is h1 inside body and with font-size 2em
</h1>
<div>This is div outside h1 and with font-size 1.5em</div>
</body>
</html>
Based on my understanding of line-height and box model calculations, I believe that the height of an element, margins and all, is the sum of the following:
margin-top
border-top
padding-top
line-height = font-size * numeric line-height multiplier
padding-bottom
border-bottom
margin-bottom
However, when I implement this myself, as shown in this fiddle, everything looks good in Firefox and in Chrome except for the line-height.
.btn {
margin-top: 8px;
margin-bottom: 8px;
border: 1px solid darkred;
padding: 6px 12px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.42857;
}
Mathematically, my font-size (14px) multiplied by the line-height (1.42857) should yield 19.99998px, which effectively rounds to 20px. However, in Firefox the resulting line height is 22px, and in Chrome the resulting line height is 19px. What is accounting for this discrepancy? Why am I not getting the expected 20px line height?
Inexplicably, Bootstrap buttons appear to correctly yield 20px for the same concept in Firefox and in Chrome. I hope someone can help me understand why and how Bootstrap accomplishes this feat.
The line-height is not multiplied with the font size setting, it's multiplied with the actual size of the font as rendered.
The actual size of the font is based on the font size setting, but it differs a bit depending on the font used, the font implementation, the operating system, font rendering settings, et.c.
Setting a font size like 14px doesn't mean that the text ends up exactly 14 pixels high, rather something that is supposed to look like 14 pixels high, depending on the settings in the font. Some fonts may for example be more narrow and thin, so it would need to be rendered slightly larger than other fonts to seem like the same size. This is up to the discretion of the font designer, so it may differ somewhat from what you feel would be correct.
Also, font sizes for the graphics software are measured in points, not pixels. When you specify a size in pixels, that is translated to a point size that would give approximately that size in pixels. There is some rounding going on there, and the exact algorithm differs between browsers, so that gives a little variation.
I have an image that's inline with text. That image is 32x32. I'm looking to have it auto size to the line height of where it's contained so it fits properly. Is there a way to do that?
I'm looking to be able to place the image anywhere with an unknown line height and have it resize properly.
Use img{height: 1em;} /* whatever your line height may be, it is affected by its font-size /*
See this Updated Demo (Increase or decrease the font size to view the result.)
You can set the height to the line height if you explicitly set both, e.g.
* { line-height: 1.3; }
img { height: 1.3em; }
If you don’t want to set the line height, you would need to make a guess on browser defaults (which usually depend on font). This might be a good guess:
img { height: 1.12em; }
To make an image fit properly into text, so that it does not cause the actual line height to be increased, you would also need to align it vertically to the bottom of the line box, no to text baseline (which is higher):
img { vertical-align: bottom; }
If you need to let the image sit on the baseline (the default), you need to make a guess on the distance between the bottom and the baseline and set the image height accordingly smaller. In this case, height: 1em, or maybe with a little smaller value, might be a good guess.
Can someone help me vertically center text inside a div, consistently across browsers. In IE9 ONLY, text is one pixel closer to the top of the parent div. All other browsers render the text as expected.
Important: I'm using standards-mode:
<!DOCTYPE html>
Here's some example HTML:
<!DOCTYPE html>
<div style="width:100px; height:16px; font-size:13px; font-family:Arial; line-height:1.2; background-color:red; color:White; vertical-align:middle">
<div style="line-height:16px">XXXXXXXXXX</div></div>
Bit late to the party. However, I came across a similar issue recently. After some digging about I came across this article: Sub-pixel Fonts in IE9.
I think this is directly responsible for the issues of font vertical alignment in IE9. Unfortunately there doesn't seem to be a fix as this is a forced option or customisable by the user (not likely to happen).
So it looks like the only solution is to increase the line-height as mentioned previously.
You might want to look at the following:
CSS: Standard (dynamic) way to centralize an element in the y-axis
There are some useful references that will probably still apply to IE9.
Based on your code: you are setting the line-height in more than one place. Try removing the line-height:16px property in your inner div, in fact, get rid of the inner div since vertical-align will only affect inline elements.
Also, make sure your container height is big enough to hold the text (1.2*13) otherwise you may get into issues related to different fonts or different default font-sizes across browsers.
Probably what is happening is that 1.2*13 = 15.6, and depending how the browser rounds off floating point numbers, that could account for a 1 pixel shift. Set line-height to 16px instead of 1.2 and see if that works.
Second Try:
.outer {
background-color: red;
color: white;
width: 100px;
height: auto;
padding-top: 0px;
font-family: Arial, sans-serf;
font-size: 13px;
line-height: 5.0;
}
applied to:
<div class="outer">XXXXXXXXXX</div>
If anything will fix this, make the line-height large enough so that there is some space above/below the lettering. Set the container height to auto and let the line-height control the height of the container.
There is an answer to this question here:
http://www.sitepoint.com/forums/css-53/text-alignment-w-ie9-standards-mode-745359.html
I had the same problem with the 1px off text rendering, and it would only appear with font size 13px in IE9.
adding the css style
{
height: 16px;
line-height:16.99px;
}
to the surrounding div fixed the problem for me on IE7-9, FF and Chrome on Windows.
I have an element that contains two span tags that each contain some text. The container element sets a font size, then the font size on the second span tag is set to a lower size. When the second span is reduced in font size, the space between the line and the next block element is increased. This occurs in both WebKit and Gecko.
The p container element has { margin-bottom: 0; padding-bottom: 10px; } and its following sibling has { margin-top: -5px; }
The following image illustrates the situation and contains a snapshot of the relevant part of the document structure in FireBug.
Why is the spacing beneath the p tag increasing after reducing the font size of the second span tag?
My guess is that you have a (relatively) large line-height being inherited by that decimal span (perhaps 32px?), and when you reduce the font size down to 18px, you get a situation where the baseline of the decimal glyphs match up with the nondecimal glyphs, but the line must still take up the full specified line-height. Thus, extra space is added below the baseline.
Add a line-height rule and I bet this goes away:
.box .value > .decimal { line-height: 18px; }