Roboto font from Google has different heights on Mac vs PC

Contributor ,
Jan 07, 2021 Jan 07, 2021

Copy link to clipboard

Copied

Yesterday me and my colleague were collaborating on a same part of our project's UI and I noticed that she was changing correct paddings between text elements to incorrect one. When I asked why is she doing it, she answered that they were incorrect in the first place and she changed them to correct.

We've made a through-out testing and found out, that Roboto font has different heights on PC vs Mac. We've taken these screenshots while both co-editing this same file.
On a PC it looks like this:

Screenshot 2021-01-06 210238.pngScreenshot 2021-01-06 210822.png

 

At the same time (i co-editing) it looks like this on a Mac:

InkedScreen Shot 2021-01-06 at 20.56.13.jpgInkedScreen Shot 2021-01-06 at 21.11.15.jpg

 

We are using the same Roboto font downloaded from Google: https://fonts.google.com/specimen/Roboto

 

Here is a PC system and font info:
Screenshot 2021-01-06 195000.pngScreenshot 2021-01-06 195748.pngInkedInkedScreenshot 2021-01-06 195324.jpg

 

Here is a Mac system and font info:
InkedScreen Shot 2021-01-06 at 19.46.57.jpgInkedScreen Shot 2021-01-06 at 19.50.29.jpg

 

This is not a problem with one particular file, but with the font itself.

After a long testing we found out that this difference was not consistent along different sizes of Roboto font. We made this comparison in a cloud file, both saved it as local file and created links with Design Specs.

 

I've marked font sizes that don't match with red color and on the left I marked the height difference with red. Here you can clearly see that the difference may differ from 0 to 2 pixels and it can be at the top, or at the bottom, or both.
Web 1280 – 1@2x.png

 

Link generated on a PC:
https://xd.adobe.com/view/adf5c80e-00b0-4af5-9504-7057a1d70156-f8a6/

Screenshot 2021-01-07 142322.png

 

Link generated on a Mac:
https://xd.adobe.com/view/2d51b57d-8586-454b-8e90-a347d7e6ab61-7802/

Screenshot 2021-01-07 142339.png

 

As you can see even in Design Specs the same text has different height depending on what platform it was generated on.

 

Here are both files:
https://1drv.ms/f/s!Atd7YEzqP5IVloJ6InkDpM9TpUtoDg

 

They both look exactly the same when are opened on the same platform.

This is a huge problem because I can't find any plausible workaround to make our Design Specs to be the same. It's very confusing both for designers and for developers. And after discussing this issue with our developers today, it appears that they already had a problem of different buttons being different heights that they had to fix. They thought I was just making small mistakes - it really hurts my reputation.

 

Roboto from Adobe Typekit is not an option, because it's way outdated and our developers use Google's version:
- Roboto from Google is v2.137 from 2017
- Roboto from Adobe is v2.001047 from 2015.

 

This is not the first report of the problem (it was reported year and a half ago) and there is no solution yet:
https://community.adobe.com/t5/adobe-xd/font-height-issues-moving-from-mac-pc/m-p/10553699?page=1

 

Adobe posts a lot of articles, videos and tutorials about design systems and enhanced collaboration. But we can't use neither of them because the same file opened in co-editing displays differently on PC vs Mac and the same components from our Libraries have different heights. This is not what I expect from a professional-grade software from such a huge developer as Adobe.

 

This is one example of a feature request that would eliminate this problem and was marked as FEATURE-COMPLETED:

Snap text box edges to edge of text – Adobe XD Feedback : Feature Requests & Bugs (uservoice.com)

But this "completed" feature is not what we were asking for - it's a totally different feature:
image_2021_01_07T14_25_07_143Z.png

 

I've spent several months building our design system and now it's useless, and our developers and other coworkers think that I'm always making mistakes. This is not acceptable.

 

I hope this issue will be fixed soon because we can't work this way on a project where only a small part occupies 590 artboards and Library consists of 300+ elements.

TOPICS
Design , Known Issue , Product performance , Share or publish

Views

4.2K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Employee , Feb 24, 2021 Feb 24, 2021

Hi All,

 

Thank you so much for waiting on the issue. After a long investigation on this issue and trying all the aspects to fix it. The team identified that the font engines on the 2 platforms return different values for this font and it won't be fixed until we use the same engine on both platforms.

 

There is something related to this going on in the backend but until then there is nothing that team can do to fix it.

 

We are sorry for the inconvenience.

 

Thanks,

Harshika

 

<Marking as correc

...

Likes

Translate

Translate
New Here ,
Nov 25, 2021 Nov 25, 2021

Copy link to clipboard

Copied

I have the issue, it not possible to work on mac and on windows on the same project, thats nonsense.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 26, 2021 Nov 26, 2021

Copy link to clipboard

Copied

Hi...balancing the qualities of a textual style that entire destinations are planned around so it appears to be unique for a tremendous % of the userbase and leaving it as sufficient is peculiar and flippant.

You've broken site formats with this slip-up (and it IS a mix-up now, not a "highlight"). Is it the clients shortcoming for believing you to keep a textual style stacking reliably I assume?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Dec 29, 2021 Dec 29, 2021

Copy link to clipboard

Copied

I just hit this problem too, using InDesign and transferring files back and forth with my localization vendor. Wow, this is maddening. I have wasted countless hours trying to fix a problem this is not fixable. The only solution I have now is to force everyone to use Macs.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 28, 2022 Jan 28, 2022

Copy link to clipboard

Copied

Obviously there is still no solution to the problem. A popular font like Roboto should not be displayed differently on both systems if you want to work with it seriously. I now have the same problem with Roboto. The identical and latest Roboto True Type version is displayed differently. 

 

Serious question: Is there a realistic time frame when this will be solved? I see new features in XD every month but such an elementary problem remains. Why?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 12, 2022 Aug 12, 2022

Copy link to clipboard

Copied

My team just stumbled into this problem since we recently onboarded a Mac user, and WOW. I was beggining to think the designer wasn't paying attention to any of the spacing rules we established until they shared their screen and we realized that my file and hers (which were exactly the same file) were displaying different sizes. Absolutely mind boggling, that in 3 years this still hasn't been fixed. Starting to understand why people prefer Figma for collaboration.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 24, 2022 Aug 24, 2022

Copy link to clipboard

Copied

My team is having the exact same issues. When will this be fixed?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 24, 2022 Aug 24, 2022

Copy link to clipboard

Copied

LATEST

Unfortunately I haven't heard anything. Been waiting for a while.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines