Exact same CSS font taking more space in Safari

Question

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...

nikhil · Accepted Answer · 2017-01-19T21:27:01.963

1

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.

edited Jan 19 '17 at 21:27

answered Jun 07 '14 at 23:02

nikhil

203
1
10

1

I converted to *em* and it helped. – Juicy Jun 08 '14 at 00:39

score 1 · Answer 2 · edited May 23 '17 at 12:05

1

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

edited May 23 '17 at 12:05

Community

1
1

answered Jun 07 '14 at 23:37

Scott Drinkwater

81
1
4

Thanks, explicitly setting the font-weight to '400' and the size in *em* helped. Still not exactly the same but at least they fit better within their div box space. – Juicy Jun 08 '14 at 00:40

Andy Swift · Answer 3 · 2021-12-15T10:38:14.053

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.

Exact same CSS font taking more space in Safari

3 Answers3

Linked