0

In my application I am setting:

html {
    font-family: 'Source Sans Pro',"Helvetica Neue",sans-serif;
}

I set border width to 0.1rem and now I noticed that in Chrome this sets the width to 1.6px and in Safari it sets it to 1px.

The text in Safari and Chrome appears the same size so why does the width of the lines render differently?

I saw on some web sites the setting font-size: 100%. As a good practice should I be setting this?

One more question. Is it a bad practice for me to set my border widths with rem in this way? I was using rem as everything in the application uses rem and I wanted to keep things the same.

  • 1
    Different browsers have different *default* font-sizes. AFAIK Chrome is 16px, FF 14px and, presumably, Safari (whichever version you are using) is 10px. Have you checked your Safari settings to see what the default size is? – Paulie_D Nov 30 '15 at 12:05
  • @Paulie_D - Is it normal practice to set the font size so that all three will show the same size text. –  Nov 30 '15 at 12:07
  • 1
    The `rem` unit stands for *root em*. This means that when used it sets the unit of measurement relative to the root element (`html`). To account for any browser inconsistencies, you should specify a `font-size` in the `html` that establishes cross-browser consistency. I'm not sure `font-size: 100%` is the answer, since that simply passes along the `font-size` in the user agent stylesheet. – Michael Benjamin Nov 30 '15 at 12:16

2 Answers2

1

If you want rem measurements to be relative to a specific pixel size then you need to specify that size for the font-size property of your html tag. Without doing that, rem measurements will be relative to the default font size specified in each individual browser's settings.

html{
    font-size:16px;
}
p{
    border-width:.1rem; /* =1.6px */
}

Also, consider the fact that different browsers round numbers differently.

Community
  • 1
  • 1
Shaggy
  • 6,696
  • 2
  • 25
  • 45
0

Usually what is noticed is that if the border width is <=1px, it is better to give it as 1px. As rem would make it a very small value. Some of the browsers don't render this value.

Rovi
  • 259
  • 1
  • 3