Skip to main content
Spas K.
Spas K.Correct answer
Community Expert
Jul 10, 2020 2:36 PM UTC

The problem is resolutions on retina displays work the same as on mobile devices - they use scaling.

Your logical resolution is 1440x900, and 1920x1080 is bigger than that, so when you open the prototype everything looks smaller as it's scaled down to fit. 1366 naturally fits, as it's smaller, and you see it at 100% - everything matches.

 

At least that's how I understand it, it's a bit hard to keep up with all the resolutions, devices and so on 🙂

View reply

17 replies

natasha_ux
natasha_ux
Participant
Dec 20, 2021 11:40 AM UTC

Is there a fix for this yet? Is it better in sketch? If so I will need to change programme. I am having a nightmare with developers because all fonts look WAY bigger than my design once coded and in staging.  

Translate
Spas K.
Community Expert
Spas K.Community Expert
Community Expert
Dec 20, 2021 6:31 PM UTC

It's not an issue to fix. It's a feature that might be useful, but hasn't yet been implemented.
As far as I know, most design software (including sketch & figma) doesn't support designing in rem units.

 

Your developers should know 16px = 1rem (in most cases). It's not that hard of a calculation 🙂

Translate
I.MP24
Participant
Feb 28, 2021 1:11 PM UTC

Hi, is this not simply a PT to PX conversion issue. My sizes in XD are PT for fonts, so I use a converter when going into build where I px. This was helpful for me https://pixelsconverter.com/pt-to-px

 

Translate
    kamils69569554
    kamils69569554
    Participant
    Oct 5, 2020 8:52 AM UTC

    Hi!

    I found an answer for a really similar but probably different problem: In my case - on page font was 16px, but in my mockup font was 14px. I found this code line which is kind of tricky. Let's check that your problem has the same line in your code of page because the font size on the page when is 1920px is correct. It's weird but it works for me.

     

    Translate
    victorh20442966
    Participating Frequently
    Sep 17, 2020 1:28 PM UTC

    For this problem I stopped used px like a parameter and replaced rem instead. The rem unit is most efficenly because adjust the font size conform the div the text it's inside. So 36px is 2.25rem and always gone be preserve this scale in every screen. I used this site for make conversion

    https://pixelsconverter.com/px-to-rem

     

    You can read more about the CSS units in the W3 Schools

    https://www.w3schools.com/cssref/css_units.asp

    Translate
    Diegoleft
    Participant
    Jul 9, 2020 2:16 PM UTC

    I had same problem in a Macbook pro Retina screen with 2880px x 1800px

     

    What I did wrong?
    By the resolution of my screen immediately I thought I should choose the Web 1920 workspace to start working. After finishing a prototype and validated with my team, we start to translate to CSS then we had a heart attack after seeing the difference of pixels. The H1 headline in XD was 75px and in CSS 55px. That means, all the paddings, fonts, distances, etc are wrong.

     

    How I solved it?

    We just start working on Web 1366 width workspace, then we had the same px in all the fonts and objects.

     

    Hope this helps.

    Best

    Translate
      Spas K.
      Community Expert
      Spas K.Community ExpertCorrect answer
      Community Expert
      Jul 10, 2020 2:36 PM UTC

      The problem is resolutions on retina displays work the same as on mobile devices - they use scaling.

      Your logical resolution is 1440x900, and 1920x1080 is bigger than that, so when you open the prototype everything looks smaller as it's scaled down to fit. 1366 naturally fits, as it's smaller, and you see it at 100% - everything matches.

       

      At least that's how I understand it, it's a bit hard to keep up with all the resolutions, devices and so on 🙂

      Translate
        danrademacher2017
        Participant
        May 31, 2019 12:26 AM UTC

        We just discovered a potential underlying cause here that's outside of Xd -- Windows 10 has a default setting to zoom everything to 125%, so one team member working on windows was seeing different things than folks working on Macs. Not sure if that's your issue, but changing that setting on our end is at least part of the fix. Still scratching my head on the larger implications of most Windows users seeing everything 20% larger...

        Translate
        GWATdesign
        Inspiring
        Jun 20, 2020 12:46 PM UTC

        This is not the correct answer - Adobe, stop creating fake accoutns to mark this UNSOLVED, FUNDAMENTAL issue as fixed. windows zoom is not causing the issue, it happens on different monitors with different zoom levels and on mac also. XD is not rendering accurate font sizes, or at least not matching web browsers rendering of font sizes- this makes XD useles as a design tool for web UX.  

        THIS IS A BIG PROBLEM!

        Translate
          claudia carvalho
          Participating Frequently
          Jun 25, 2020 5:24 AM UTC

          Faz um ano que mencionei esse problema e ainda não resolveram. Não trouxeram nenhuma solução.

          Creio que não seja uma questão do windows 10. Já alterei as configurações e nada resolveu.  

          É uma pena. Muitos estão deixando de usar o XD, pois isso causa um grande transtorno entre Designers e Desenvolvedores. É penoso. 

          Projetamos algo e se o desenvolvedor seguir os tamanhos de fontes especificados, o resultado final na web fica enorme, completamente fora do que foi criado.

          Penso seriamente em testar outro aplicativo, pois a #adobe parece não estar preocupada em resolver esse problema e manter seus clientes. 

          Translate
          Atul_Saini
          Atul_Saini
          Legend
          Apr 1, 2019 6:50 PM UTC

          Hi Karola,

          Could you please try to share the prototype for development and check the font size?

          Thanks,

          Atul_Saini

          Translate
            karola41620367Author
            Participant
            Apr 3, 2019 11:09 AM UTC

            Hi,

            I don't get it.

            Let me explain to you again: For example;  Google font Montserrat font size 16 and same font size on adobe xd look smaller. It's a problem for designing and developing.

            If we share the preview to the client and developer, the final product looks different. There are other designers they have got the same problem as us. And developer can't download JPG file.

            Currently, we switch to Figma. Definitely, other features are good but the different font size is confusing .

            Translate
              claudia carvalho
              Participating Frequently
              Jul 10, 2019 4:49 AM UTC

              Olá pessoal,

              Eu estou com o mesmo problema.

              Projeto tudo e o desenvolvedor sempre apresenta um resultado final com fontes em dimensões bem maiores.

              Geralmente uso 16px para texto e o resultado fica diferente na web.

              Eu trabalho no Windows 10 Pro com configuração de tela 100% - resolução 1680 X 1050 (recomendável)

              Qual a solução ? Isso é um problema do XD ou do Windows?

              Podem ajudar?

              Obrigada

              Translate
              Terms & ConditionsAccessibility statement
              Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices