Roboto font shifts down after (supposedly) Sketch updates

Hi there! I’ve asked this before on the Sketch subreddit, but it keeps happening, so hopefully someone has some updated information regarding this since I posted it last time. This issue is absolutely stomping on my face every other month or so, as it is very time-consuming to fix.

We are using the Roboto font for our Android and desktop apps, and whenever Sketch is updated (I am assuming it has something to do with updates. I’m not necessarily working with the related files exactly after a new update is released, so I open the files on later occasions to find this issue), the text placement inside text boxes is misaligned. I have attached a video to describe my issue.

You can easily tell how misaligned the # and the Hex code text are - normally they are horizontally aligned. When I select the text box, you can see the font is towards the bottom of the text box. After selecting the text, the text box will expand, but It will expand from the bottom, which will leave me having to manually move the text box back up to align it horizontally again. This affects a lot of our files and is insanely tedious to do.

Some things to note:

  • Yes, we are multiple designers working with the files, but we both have the same Roboto version (and this also affects local files I’m working solo with)

  • Font is embedded in the file. I’ve also tried leaving it unembedded, but the issue persists.

Hey Mads,

I’m sorry to read about these unfortunate misalignments.

We’re not sure what’s going on here. Would you mind sending a sample of the document and the font to productsupport@sketch.com so we can investigate this further? Thanks.

I just wanted to share that I have observed the same over the years with this font.

1 Like

I’m not sure this fixes it forever, but I noticed I had Roboto activated on Adobe Fonts in addition to having Roboto installed locally (downloaded from Google Fonts). I removed the Adobe Fonts sync version of Roboto and re-opened sketch and the issue was solved (for now). Will add this as solution, but update later if the issue returns.

Hi @Mads thanks for sharing this update! It is likely that this was the cause of the issue. Fonts can have different settings depending on the source and the bounding box of text layers can be affected by this. We’ll definitely keep your solution in mind when troubleshooting similar cases in the future.

And of course, if the issue returns, let us know so we can get right to it.