CODEWITHSUNDEEP
cssgoogle-chromesafari
Juicy
Juicy

Reputation: 12530

Exact same CSS font taking more space in Safari

I'm using this CSS to style a div:

#mainSection .mainArticle .text {
    width: 600px;
    margin-top: 0px;
    margin-left: 20px;
    line-height: 26px;
    color: white;
    float: left;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
}

The image below shows the difference between Safari and Chrome:

enter image description here

I can't tell why it's this different. The font looks 'bolder' in Chrome, yet each character takes an tiny bigger length in Safari, meaning it sticks on average less chars on each line. Because the div box size is fixed length, the result is that the text ends too close to the bottom border.

I can't have variable length boxes. You can see the site here (go to MENTORING section): enter link description here

Is there a convenient way around this problem? I know the font engine is different for each browser...

Upvotes: 0

Views: 2188

Answers (3)

Andrew Swift
Andrew Swift

Reputation: 2237

The reason is that whereas other browsers render the font at the exact size specified, Safari renders fonts in a series of steps.

I assume that the Apple team feels that fonts rendered at 10.3px look better than fonts that are rendered at 10.0px. (made up values).

The consequence is that you get different results between Safari and other browsers.

The easiest way to see this in action is to define a font size as a percentage, then slowly resize the window:

Test page at svija.love

In other browsers, the font will resize smoothly with the window. In Safari, the font size will increase in a series of jumps.

I am looking for a workaround for this (help, somebody!) because this behavior is screwing up my layouts and making it look like I have spelling errors at Ozake.com.

[update fall 2021] I wrote a program that combines the various text blocks into a single line, eliminating spacing problems. See svija.love for more information.

Upvotes: 0

nikhil
nikhil

Reputation: 201

i think it is because the browser size is not same for all the browsers, and you have defined your CSS in terms of pixels., try to convert from pixels(px) to percentage(%) or em/rem values.

i hope this helps.

Upvotes: 1

Scott Drinkwater
Scott Drinkwater

Reputation: 81

Safari renders open sans bolder than in chrome so you would need to apply a lighter font weight for safari Open Sans Google Web Fonts Rendering in Chrome

Upvotes: 1

Related Questions