0

I am using 'Coolvetica Regular' for my headings. It works ok on different browsers on my PC, but on mobile it looks weird on every mobile browser that is based on Chromium (Chrome, Edge, Kiwi).

And by weird I mean that letter-spacing between words isn't handled correctly on mobile. This font was also used on this portfolio website and I didn't see this problem there.

What should I do to fix this problem? Is there any way to only add letter-spacing to mobile Chromium-based browsers?

Code, Chrome, and Firefox on desktop Chrome, Edge, Kiwi, Firefox on mobile

SepSol
  • 115
  • 3
  • 10
  • Hi SepSol, you need to specify what you mean with *weird*. Also without a proper [reprex] your question will get downvoted and closed eventually. To me only the last mobile shows a wider 'letter-spacing' compared to the rest, which might be a browser specific calculation thing. Maybe add a tiny `letter-spacing: 0.02em` (or something like that) to your CSS? – Rene van der Lende Aug 01 '20 at 23:04
  • Thanks for the heads up! I updated my question and added a little bit more description. When I add letter-spacing, it's applied to all browsers. How can I only add it to mobile 'Chromium-based' browsers? – SepSol Aug 01 '20 at 23:30
  • 1
    That would require getting specific *user agent* information from the browser with Javascript `NavigatorID.userAgent` and modify the `letter-spacing` based on that info. However, if it is just one browser and a tiny `letter-spacing` works for most, you should ask yourself: is it worth the time and effort? – Rene van der Lende Aug 01 '20 at 23:36

2 Answers2

0

I'm assuming you're referring to the font. You need to note that not all browsers are created equally. If you want consistency cross-browser then I might suggest sticking with a simpler font such as sans-serif. Now, in my opinion, the fonts don't seem to differ too much to raise concern. Remember, the first font in quotation marks is what the browser is going to attempt to render first. If it cannot, it will move to the second option. Chrome and Edge are probably the most versatile browsers.

Dharman
  • 30,962
  • 25
  • 85
  • 135
Jacob Flora
  • 1
  • 2
  • Thanks for the suggestion. I saw that font being used on this portfolio website (https://jacekjeznach.com/) with no problem and I really liked it. Is there something that I'm missing while using that font or I should use a trick to fix this problem? – SepSol Aug 01 '20 at 23:32
  • Instead of using em for font size, use px. that will guarantee font size cross browser while em and rem are based on the browsers default font settings. Say if googles default font size is 16 px then 2 em would be 2 x 16. but maybe firefox default px size is 17px, 2 em would be 2 x 17. the difference is 2 px. – Jacob Flora Aug 02 '20 at 01:06
  • I just tested that and it didn't work. You can try it for yourself, the source code is at (https://github.com/sepsol/sepsol.github.io) – SepSol Aug 02 '20 at 01:13
  • OK, I'm sorry about that. i might play with it in a bit. I'm helping a friend with his code right now. – Jacob Flora Aug 02 '20 at 01:15
  • Thanks, that would be awesome! My question is not urgent, I just want to fix this problem in the final version of the website. – SepSol Aug 02 '20 at 01:25
0

This is the best solution I could come up with. I saw this question on StackOverflow and tried to implement it for my own scenario. On the desktop, it worked correctly and could differentiate between Chrome and Firefox, but on the mobile, it didn't differentiate between Firefox and other Chromium-based browsers.

Overall I'm happy with the result and I don't think this issue worths the time and effort as @Rene suggested in a comment above.

Here's what I added at the end of my CSS to fix this issue:

h1, h2 {letter-spacing: 0;}
@media screen and (max-width: 480px) { 
  .selector:not(*:root), h1, h2 {
    letter-spacing: 0.04em;
  }
}
SepSol
  • 115
  • 3
  • 10
  • Cool, I like people getting smart, it seems to me that getting *manic* about the next holiday destination surpasses the need for a proper `letter-spacing` (life has no [Ctrl-Z] [Ctrl-Y], but that's just me thinking out loud). – Rene van der Lende Aug 02 '20 at 02:04