Text is widely spaced even though line-height is set to 1 - html

Looking at the widely spaced text that's in the center of this site: http://www.sharonhadary.com/ .
I tried setting the line-height property to 1 in the web inspector (it was originally set to 1em), but this had little effect. This is surprising to me, because it looks like that text has a line height of 2 or 3.

Remove the giant font-size and it's fixed.
.banner-wrap .banner h2 {
padding-bottom: 30px;
color: #ffffff;
word-spacing: .1em;
text-transform: uppercase;
font-family: 'Fjalla One', sans-serif;
/* font-size: 100px; */ /*REMOVE THIS */
font-weight: normal;
line-height: 1.1em;
}
Also <font> has been deprecated and should no longer be used

Try to add line-height: 22px instead of 1em.

I didn't understand your problem correctly but
1) If you are concerned about spacing in text, remove "word-spacing: .1em;" from .banner h2 CSS rule in the main_style.css.
2) If you are concerned about spacing between lines, reduce line-height in the .banner h2 CSS rule in the main_style.css.

Related

span height different in Firefox vs Chrome

The following element:
<span>Test</span>
span {
font-family: Verdana;
font-size: 16px;
font-weight: bold;
line-height: 1.15;
}
Has a height of 19px in Chrome, and 21px in Firefox (fiddle). I tried applying all sorts of CSS resets/normalization, the height is still different. The text itself is rendered identically, but the element height is off by 2 pixels, which breaks my layout.
Any way to fix it without using (inline) block elements?
Use this :
span {
font-family: Verdana;
font-size: 16px;
font-weight: bold;
line-height: 1.15;
display: inline-block;
}
The difference is due to different render of fonts in browsers.
This is a well known problem. It is caused by the fact that Firefox and Chrome use different rendering engines, Gecko and Webkit respectively.
Unfortunately there is no 'best' way to fix it.
You can find a few workarounds in this answer and this one.
Because of span is inline element, you should re-write your code like following way:
document.querySelectorAll("span").forEach(el => {
el.textContent = el.offsetHeight + "px";
});
span {
font-family: Verdana;
font-size: 16px;
font-weight: bold;
line-height: 1.15;
display: inline-block; /* Key line */
vertical-align: top; /* It is recommended when using "display: inline-block"*/
}
<span>Test</span>
The reason for that behaviour is that you are using a span which is an inline element. It does not change its container height based on the line height but based on its parent block element. Apparently, Chrome and Firefox have different default styles for that.
Either make the span a block element using display: block or replace it with a block element like div.
About the height differences the issue is that you have added font-size, family and line-height as well.
So because of this 3 things :
font-family: Verdana;
font-weight: bold;
line-height: 1.15;
your size of text getting bigger then 16px.

Padding inside <input> shows 2 result in Firefox and other browsers

Check this Jsfiddle first.
Here my <input> with has a height of 10px; has given a padding of 10px;, I know it is not a right way of giving style. But still, it's working perfectly in Chrome, IE and Safari but it is an another story when it came to Firefox it crops my placeholder.why.?
I know different browsers have their different rendering methods but can anyone point me the exact reason behind this and is there a way I can solve this without changing the height, padding or font size(it should not be less than 14px).?
Please check if it works for you
input {
padding: 10px;
font-size: 14px;
font-weight: normal;
width: 100%;
line-height: 18px;
height: auto;
}
They count height and padding differently, try this.
Use only height or only padding. Here I add height and only x padding
input {
font-size: 14px;
font-weight: normal;
width: 100%;
height: 30px;
padding: 0 10px;
}

When I decrease the line-height on the tag the words overlap each other

I use these sizes for the text in my CSS but I am facing a problem with line height. I want to decrease the line height in CSS but when I use mark tag the words will be on each other. I have attached an image that shows the issue:
Code:
h1 {
font-size: 58px;
text-transform: uppercase;
margin: 0px 0px;
line-height: 1em;
font-family: "frutigerBold75";
}
<h1><mark>Guidelines on Certification <br />and Grading</mark></h1>
you should put desired line-height inside mark
before
h1{
font-size: 58px;
text-transform: uppercase;
font-family: "frutigerBold75";
line-height: .8em;
}
<h1><mark>Guidelines on Certification <br />and Grading</mark></h1>
after
h1{
font-size: 58px;
text-transform: uppercase;
font-family: "frutigerBold75";
}
mark{
display: block;
line-height: .8em;
}
<h1><mark>Guidelines on Certification <br />and Grading</mark></h1>
It looks to me like the issue is a font issue.
(that's the reason why if running the code snippet it's correct).
What I would suggest is to try to change the line height (manually) till you get a result you'd like.
Also, something else you could keep in mind is the internal padding (as it seems to be some from the picture you added.
unfortunately, without the same font you're using it's quite tricky to debug and help you further more.
so, to recap:
manually adjust the line height (to be 1.1em or more, for instance)
try with a different font
make the padding to 0, and start adding some as required

Text (Special unicode, like ⇑) not vertically centered in IE11

Given the following css code, the text (arrow) is vertically centered in Chrome while not in IE11, could someone tell me why and how can I achieve the same effects in IE11?
span {
display: block;
width: 2rem;
height: 2rem;
line-height: 2rem;
background: blue;
color: white;
font-size: 2rem;
}
<span>⇑</span>
Screenshots:
Chrome:
IE11:
By default, the computed font-family is Times New Roman as the inspect view shows:
However, looking through the supported unicode characters by the Times New Roman font, we find ⇑ (U+21D1)is not supported by Times New Roman. In this case, browser is free to choose which font to use, and we have no idea how the characters would be aligned (since we don't know which fallback font the browser has chosen to use internally), that causes the behavior varies from browsers.
So how to make it vertically centered? One simple method would be explicitly specifying a font-family which contains ⇑ (U+21D1), for example, Cambria
span {
display: block;
width: 2rem;
height: 2rem;
line-height: 2rem;
background: blue;
color: white;
font-size: 2rem;
font-family: Cambria;
}
<span>⇑</span>

HTML & CSS: manipulating font/text height?

I am using a custom font (Oswald) for the headings or titles within my page. I believe that its' height is conflicting with the native fonts (Arial, san-serif etc.) and would like to know if there is a way to set both fonts evenly...? If more text is placed in later on, the gap difference becomes substantial.
Please take a look at what I have here: http://jsfiddle.net/x6v7F/
I have a temporary background fade in and out to illustrate.
thank you.
It doesn't seem to be a font-size issue, the issue seemed to be with you specifying the line-height
If you see this fiddle, you can see I've changed h1 and h2 to have these line-heights
h1 {
font: 16px 'Oswald', Arial, Helvetica, sans-serif;
text-transform: uppercase;
color:#000000;
margin:14px 0;
line-height: 100%; <----
}
h2 {
font: 12px 'Oswald', Arial, Helvetica, sans-serif;
text-transform: uppercase;
color:#BBBBBB;
margin-bottom: 14px;
line-height: 100%; <----
letter-spacing: .2px;
}
If you check that Fiddle, it seems to have fixed your problem?
Rob has 4 sections that sit side by side (you may have to bump up width of jsfiddle window). His prob is that he wants his sections to line up along the bottom, but is having issue because the varying text sizes between his body font and header fonts.
Many of the css grid frameworks try to address these type of issues: normalizing the heights of text and headers so that all lines fall on an imaginary grid of baselines.
To be honest, I would just give the sections a static height and leave some fuzzy space at the bottom for margin of error.
section { height: 370px; position:relative; }
section .button { position:absolute; bottom:0; right:0; }
Edit:
If you're looking for a dynamic section height, you'll have to leverage javascript magic. JQuery:
<style>
section { position:relative; padding-bottom:50px; }
section .button { position:absolute; bottom:0; right:0; }
<style>
<script>
var max_height = 0;
$('section').each(function() {
max_height = Math.max(max_height, $(this).height());
}).height(max_height);
</script>