Font and Line Spacing in Different Browsers

Is it possible to achieve line-height consistency in all browsers?

Your currently using em's. Maybe you can try to be more specific by trying to use px in both line-height and font-size. Also try to use padding in those texts, maybe it'll work, I think ;).

In any cross browser thing you do. There's is no concrete way of doing things to make it same on every renderer. It's always a dream that most client's don't understand. For me, it's better to always explain to them what they want and how much time we spend in things like 1px/2px differences. It's plain normal. You may check this video by Andy Clarke speaking about cross browser and some other cool stuff.

css line-height rendering differently in IE, Safari and Chrome

In short: there are many fonts out there in which the linespacing values lead to inconsistencies across operating systems and across browsers.

This is true. Many fonts have issues with their vertical metrics. Such font will never align right across browsers. The only way to get the font rendered consistently across browsers is to fix its vertical metrics.

Most font providers allow you to update and fix vertical metrics of a font before downloading it. They may call that option differently though. E.g.: Fontsquirrel calls it Auto-Adjust Vertical Metrics, myFonts.com calls it Line Height Adjustments.

More on that: Font: poor vertical metrics cause inconsistent line-height rendering across browsers. Solution?

CSS line-height not the same in Firefox and Chrome

You could explicitly set the line-height.

line-height: 1.2;

Working Example (JSFiddle):

.txt {    width:300px;    height:48px;    overflow:hidden;    border-bottom-style:solid;    border-bottom-width:1px;    border-bottom-color:#aaaaaa;    margin-bottom:2em;    font-size:0.8em;    line-height: 1.2;}

<div class="txt">    This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. </div>

Why does this paragraph look different in different browsers?

You defined your parent container #myslogan with a fixed width.

If you have a large enough font, and a long enough line of non-breaking text, the content can overflow.

Different browsers have different default fonts (hence letter size/spacing) so the
line width will vary across platforms.

Also, different browsers create bold lettering differently, so turn off bold to see what
happens.

Line height being represented differently on browsers

Did you try to use CSS reset. This makes sure that the size and spacing is always the same independent the browser.
See more: About CSS Reset

Put it before all your CSS code:

* {
   margin:0;
   padding:0;
   border: 0;
   list-style:none;
   vertical-align:baseline;
   line-height: 1;
}

Letter spacing in different browsers

You're never going to get pixel-perfect across every browser and platform. Even if the letter-spacing is the same (which is seems to be if you set it to 0), the slight differences in anti-aliasing can make the letters appear wider. There's nothing in the CSS spec that specifies how browser render those small details.

Workarounds would be Cufon (yech) and images (yech). Pixel-perfect and the web are simply not good friends.

Why line-height in Firefox and Chrome is different?

Unfortunately, there isn't a full and clean crossbrowser workaround. Because different UAs render text different, height of each textline may be taller a bit (or vice verca). So, I create a solution based on SCSS calculations of required box' sizes, and hide artefacts via overflow property.

Here is my solution, if you meet the same problem: http://codepen.io/ifiri/pen/ygEeeL

HTML:

<p class="multiline-text">
    <span class="multiline-text__wrapper multiline-text__wrapper--outer">
        <span class="multiline-text__wrapper multiline-text__wrapper--left">
            <span class="multiline-text__wrapper multiline-text__wrapper--right">Multiline Padded text, which looks great on all browsers. No artefacts, no hacks, all clear and flexy, all alignment support. Change SCSS variables for see how it works.</span>
        </span>
    </span>
</p>

SCSS:

/* 
Variables 
*/
$base-line-height: 1.75;
$base-font-size: 1.25em;

$multiline-padding-base: ($base-line-height / 2) * 1em;
$multiline-padding-horizontal: $multiline-padding-base;
$multiline-padding-vertical: $multiline-padding-base - (1em / 2);

$multiline-bg-color: #a5555a;
$multiline-font-color: #fff;

/* 
= Snippet Styles 
This code is required
*/
.multiline-text {
    color: $multiline-font-color;

    padding: 0px $multiline-padding-horizontal;

    // hide line-height artefacts
    overflow: hidden;
    position: relative;
}
.multiline-text__wrapper {
    background-color: $multiline-bg-color;
    padding: $multiline-padding-vertical 0px;
}
.multiline-text__wrapper--outer { 
    // Inner padding between text lines
    line-height: $base-line-height;
}
.multiline-text__wrapper--left { 
    position: relative;
    left: -($multiline-padding-horizontal);
}
.multiline-text__wrapper--right {
    position: relative;
    right: -($multiline-padding-horizontal / 2);
}

Spacing different in Chrome and Firefox

You should change line-height on some elements that contains text. These are line-heights for some (maybe all) elements you need to change:

#title: 56px
.yoText: 46px
#buttonTitle: 68px
#buttonText: 34px

How to set line spacing of an ordered list consistently across browsers?

You mention non-webkit, non-Firefox browsers appear to do the same thing. Have you looked using their developer tools? Both IE (except for 7; 6 has it as an addon; 8 and 9 have it included, just hit F12) and Opera have developer tools. Check them out and see what's causing it in them.

Opera puts a 1em top and bottom margins on the <p> element, I don't have a platform that IE runs on, but I assume it does, too. In the code and example you give us, you have no all-element margin reset, so there's nothing to override until you explicitly set the margins.

Another thing you can do is set line-height: 1; to tighten things up farther.

Aso, have you considered restructuring a little? From what you've posted here, your content might be better suited to a definition list.

On a side note, why are you using frames? Not only are they being deprecated in HTML5, but there are several major reasons why they are bad. If you want to have a single file for universal stuff, such as headers and navigation, then have a look at server side includes.

---

Related Topics