The font never actually changes on the text in the span, but the font on its parent (the paragraph) does. line-height: 0; is applied to the span.
See the gif below:
See the below codepen to test it out in browser
https://codepen.io/BelfordZ/pen/ZxvKxe
The answer to this questions should:
Explain why the text moves upward when the font for the text never actually changes.
Provide a solution that would work no matter which font is used and leaves the styles on the span unchanged. (ie: line-height: 0; must remain). If this is not possible, please explain why.
This has nothing to do with line-height:0;. You can prove that my commenting out that line to, and just change the settings on the paragraph.
You kind of answer your own question: "The font never actually changes on the text in the span, but the font on its parent (the paragraph) does."
Explain why the text moves upward when the font for the text never actually changes.
When you haven't set a font on the p-element, it is inherited from the previous elements in the hierarchy, and if nothing is found there, the default font the browser has. In my case it is Times New Roman, 16px.
Since your change the font on the paragraph from the default font to something you have specified, the browser uses the characteristics of the default font when it places where the span-element goes (from the point of the browser, the span tag is one character) You can see this effect even more of you set a large font-size on the paragraph and a small one on the span: p {font-size:30px;} span{font-size:10px;}
line-height:0; on the span-element doesn't give you a line-height of 0, since span is an inline-element: Try to add 'display:block;' on the span to see what I mean. There is no difference between a line-height of 0 or 1 on the span (but if you change it to a block-element there is a big difference).
Provide a solution that would work no matter which font is used and preserves line-height: 0
You can set line-height: 0 on the p-element, to remove the effect of the font and then set line-height: 1 on the span-element. (I don't think you really want line-height:0;)
p {
line-height: 0;
}
span {
line-height: 1;
}
Related
I would like to have a font smaller than an Arial 9px text.
I've tried to find other font name but I did not succeed to get a very small text. Is there a way to achieve this easily using css ?
EDIT :
I can't go under 9px using Arial
I have tried font-size, small, transform, scale, other fonts... everything as I am an experienced web developper.
Set font-size to whatever you want - although you may find that any font less than 9px may be too small to read well. You could also do it with em's or rem's or percentages.
But you can set the font size as follows (for an example p element that you want to be 6px in size).
p {font-size: 6px}
So note that you are not importing the smallest possible font - you are sizing the html elements to be a small font-size with CSS). Using this principle- you set the fontsize for all the elements you want to use it - eg: p, span, a, li, h etc.
But again - I must caution against this for accessibility purposes.
p {
font-family: Arial;
font-size: 6px;
}
<p>This is a test with Arial font at 6px and is NOT recommended</p>
You can try it
div p {
font-family: 'Arial';
-webkit-text-size-adjust: none;
font-size: 5px
}
<div>
<p>lorem</p>
</div>
You may also REPEAT the small tag multiple times to make it as small as you like. Interestingly, I have not seen this mentioned anywhere!
<h2>My Headline <small><small><small>(Subject)</small></small></small></h2>
Most (all?) browsers have a minimum font size, to avoid underhanded people displaying unreadable text for some reason. Some browsers let you adjust this, but you simply can't count on being able to display smaller than 9pt on anyone else's machine.
Unless you opt for very old school: create your text as a graphic.
Or: Create your own custom, tiny font - as long as it has all the features of (say) a 12pt font, it will display fine, but if the glyphs are only two dots high, that is what you will see.
If adding css styles don't work then maybe it has something to do with your browser auto adjustment of the font size.
Try this to stop auto adjustment of font size:
* {
-webkit-text-size-adjust: none; //For chrome browser
}
Few thing you must consider
1. make sure the .css file is the last one you load in your html (after Bootstrap for example).
2. use the !important attribute to your css property (font-size: 4px !important;)
3. if these 2 suggestions do not work, try adding an inline-css to your element <p style="font-size: 4px">I'm a 4 px paragraph</p>
You can use HTML <small> tag.
https://www.w3schools.com/tags/tag_small.asp
In my Web application I am using google font 'Lato'.Now Requirement is I should use 'Roboto' font for my web application.
I replace Lato font with Roboto but This reflect major change in terms of spacing in whole Web application.
Where I am doing mistake?
I cant share whole page screenshot.
Original with Lato
Disturb with Roboto
Every font-family have own letter spacing and line-height. Now you need yo set re-structure your letter spacing and line-height!
Definitely in specifiing sizes for elements. If you need to translate the site to other language, you meet the same problems. If you change some text you have the same problems. And so on.
Everyting depending on text should not have explicit sizes (width at least). So when you change te text or the font, element just enlarges or shrinks without negative effect in most cases.
The only exception is placing some set of elements inside of one raw or limiting their max-width. These can cause problems if more text appears or new font is wider. Anyway, it's not good if the whole site consists of such elements. And Roboto is not wider than Lato, so it's not your case.
Is it possible to view your webpage ?
You can also change the spacing between letters using the css property "letter-spacing"
h1 {
letter-spacing: 2px;
}
h2 {
letter-spacing: 5px;
}
<h1>SAMPLE</h1>
<h2>SAMPLE</h2>
I can't change my span element line-height, that is defined in body (I've tried using !important, as well as different line-height notation including font/line-height). Here's the code:
body {
font: 16px/1.5 Arial, Helvetica, sans-serif;
}
.pageBody.oferta > .cnt .columns ul span {
font-size: 9px;
line-height: 1;
}
The problem is obviously that my spans line-height is 1.5
More to that web dev tool doesn't show that inheritance from body covers it (it's crossed in web dev tool then). There's lot of code on the site as well, but i don't think that it could affect line-height anyhow (so pasting it would be lot of spam).
Edit: Interesting thing i have found out: when i apply line-height bigger than 2, it starts to apply on the span.
Set line-height on a block container, not on span. For span, or for non-replaced inline elements in general, the height of the content area depends on the font and on the browser and generally makes provisions for descenders and ascenders; see 10.6.1 Inline, non-replaced elements in the CSS 2.1 spec.
Even for a div element or other block element, your chances of tweaking the height down to 9px might be prevented by user settings, such as minimum font size set to something larger (an user option on Firefox; cannot be overridden by authors).
I don’t know how you inferred the line height, but my Firebug says, for a document constructed from your example, the computed line height as 9px but, in the Layout pane, the height as 13px. This is normal, by the CSS 2.1 principles.
span {
line-height: 0.66; /* 66% of 1.5 ~= 1
}
since line-height values are multiplied on nested elements you could obtain this with 0.66. Another way to override the value is setting line-height: normal (but the real value will change depending on the browser)
You are missing unit part of the definiation
Example here
Must be something basic I'm missing here. I thought that font-weight:bold should not change how much vertical space the text takes. Especially when the line-height is set to be higher than the font-size.
http://jsfiddle.net/Arkkimaagi/7xAyy/
On my OSX chrome those three text heights do not match. The second one with font-weight:bold is 1px higher than the rest. The third div is just an example of fixing the problem (poorly)
I'm trying to set the line-height to something specific (18px) here, to have "vertical rhythm"
My question is, how can I have bold and normal text both with same line-height as in the example?
[edit:]
here's what I see on my mac
Also, here is what I ment by "vertical rhythm": http://www.alistapart.com/articles/settingtypeontheweb
- the baseline grid is more visible in the example: http://www.alistapart.com/d/settingtypeontheweb/example_grid.html
Sometimes adding top vertical align will solve this (depending on font size/family).
strong { vertical-align: top; }
In your fiddle example, because you have set a line height on the container (div), you can simply add the following:
span { line-height: 1em; }
It completely depends on the fonts you are using. Nothing about OSX or Chrome text rendering would ensure that two different fonts (and Helvetica-neue and Helvetica-neue-bold are two different fonts) would have the same vertical space even at the same font-size and line height.
Even though that is too much to ask you might think that two different fonts from the same family might be consistent, and usually they are, but sadly the two fonts you have chosen are not.
Setting an absolute line-height on both the container and the bold text, or giving bold text a line height of 1em (as DaveC says above) both fix this, e.g. from the jsfiddle you just need to add line-height: 1em
.bolded span {
font-weight:bold;
line-height: 1em;
}
Or why not follow HTML standards and use the correct tags instead of bolded spans? E.g.
strong, em { line-height: 1em }
I've encountered very similar problem with Chivo font: http://www.fontsquirrel.com/fonts/chivo. Right now I'm using the ugliest hack (works on current Firefox and Chrome, IE untested yet):
strong { vertical-align: top; position: relative; top: -1px; }
I try not give up on Chivo quite hard as you see ...
I think this is a font issue. I found differing line heights for the italic variant of Nunito (Google Web Font). When I switched to a reworked version of that font called "Nunito Sans" the issue was resolved.
I have a TEXTAREA where spacing is very important. I formatted it as follows:
TEXTAREA {
font-family: Tahoma, Arial;
font-size: 8pt;
letter-spacing: 0px;
line-height: 13px;
}
How, if I enter some text, the line height is not correctly applied: The last line of every paragraph (before pessing enter or shift-enter) is one pixel to high:
This problem only occurs in Internet Explorer 9, not in Firefox 7 or Chrome 14 (haven't tested older versions so far).
Is there a way to get rid of thad?
BTW: It does not happen for the last line of the textarea, unless there is a linebreak behind it.
Regards,
Steffen
I know this may not actually help entirely nor be the full answer, but it may be worth while reading up a little on the use of !important declaration within CSS.
http://www.impressivewebs.com/everything-you-need-to-know-about-the-important-css-declaration/
The only reason why this springs to mind is there may be another style/declaration that is applied after which is causing some sort of problem and this will make sure your textarea has the correct styles applied to it.
You may also want to check that any <p> CSS declarations are not causing conflicts/problems with any bottom or top margin's/paddings? Same goes with span or any other styles that could potentially cause some sort of problems.
Like I said, I'm aware this may not help in the slightest but it could be a possibility.
I have had similar problems with the last line in a textarea in IE8. When my textarea had a line-height of less than 18px, the cursor changed the line-height. The reason I bring this up is your line-height of 13px is quite small. You may want to experiment with larger line-heights to see if the problem goes away.
I just went many many rounds with this issue and finally discovered that IE9 is adding extra padding to textareas. Line height, height, etc had no effect. This did the trick:
padding: 0px !important;