Lately I’ve been making a slew of changes to [JS Bin](https://jsbin.com) to provide mobile support, and due to the natrue of the work, I’ve had to switch between desktop (or "wide" view), emulator (via devtools) and real device. I’ve learnt loads of little tips which I’ll share here.
There’s a × character in most common fonts which you should use instead of an x for close, but getting it to look right across devices requires an eye for the detail.
[](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)
[READER DISCOUNTSave $50 on terminal.training](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)
[I’ve published 38 videos for new developers, designers, UX, UI, product owners and anyone who needs to conquer the command line today.](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)
[$49 - only from this link](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)
Here’s a screenshot of the simulator vs. the real device, with exactly the same CSS applied to create the effect. Notice that the vertical align is off?
It took me a while to work out what was different, but it’s the font. The font I’m using (if you’re on a Mac - as I was), is Helvetia Neue, but my Android doesn’t have that font, so it was falling back to the next default (possibly set as sans-serif, which could be Open Sans, or it could be something else). In this case, the different font had a slightly different letter height, so it caused (obviously) as slightly different result.
The pro tip: make sure to use a common font, probably Arial (IHMO ideally a font that doesn’t need to be downloaded) for button icons.
Yes, I know this is obvious if you’re using an icon font…but maybe not immediately obvious if you’re re-using system fonts.
Published 10-Dec 2016 under #web. [Edit this post](https://github.com/remy/remysharp.com/blob/main/public/blog/in-the-detail-close-button.md)
Comments
Lock Thread
Login
Add Comment[M ↓ Markdown]()
[Upvotes]()[Newest]()[Oldest]()
Adam
0 points
7 years ago
Since you mentioned Arial, it should be noted that Android doesn’t have Arial. It claims that it does, but it’s actually just an alias for Roboto, as shown [here](https://android.googlesource.com/platform/frameworks/base/+/master/data/fonts/fonts.xml).
rem
0 points
7 years ago
I think the point of Arial was that it would downgrade to sans-serif. But that’s still useful to point out, cheers.
rem
0 points
7 years ago
Approve.
Tarik Zakaria Benmerar
0 points
7 years ago
line-height: 100%; ?
rem
0 points
7 years ago
Not sure if that was a question or suggested answer. Though if it was an answer, I’m pretty sure line height can’t take a %…but I’m on my phone so I can’t be totally sure of that!
Tarik Zakaria Benmerar
0 points
7 years ago
Hi @remysharp:disqus I have taken a look again at this. It was not line-height:100%; but line-height: container-height; I don’t know if I have missed something in your observation but it is how I see it. Thanks, [https://uploads.disquscdn.c…;](https://uploads.disquscdn.com/images/d7168eef2397aa4831058092bc7d7c56e82726e831c7aa0db0ea76ba7fbd5054.png)
Danny Hope
0 points
7 years ago
SVGs are for this :)
That said, I use the multiplication sign in visual design all the time as it’s so quick to put in. I do it so often in fact, that I ended up making a TextExpander shortcut to do it—now I type "timess" and a "×" appears!
Jakobud
0 points
7 years ago
This is why you use SVGs instead of icon fonts ;-)
rem
0 points
7 years ago
I wasn’t using an icon font. I was using a symbol that appears in most regular fonts. So no need for additional fonts not additional SVG.
Giulia
0 points
7 years ago
I had this problem multiple times, so after a while I just decided that using an SVG icon in most cases actually saved me time in the long run, and the added SVG code is balanced by having to write less CSS for the alignment.
[Commento](https://commento.io)