Skip to main content
K
karola41620367
Participant
April 1, 2019
Answered

Adobe xd font size and css font size different

  • April 1, 2019
  • 7 replies
  • 26386 views

Hi,

Adobe xd font size and web font size is different. It makes me huge trouble. I can't see what will be actual font size when the site will be on the web. 

    Correct answer Spas K.

    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 🙂

    7 replies

    natasha_ux
    natasha_ux
    Participant
    December 20, 2021

    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.  

    Spas K.
    Community Expert
    Spas K.Community Expert
    Community Expert
    December 20, 2021

    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 🙂

    I
    I.MP24
    Participant
    February 28, 2021

    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

     

      kamils69569554
      kamils69569554
      Participant
      October 5, 2020

      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.

       

      V
      victorh20442966
      Participating Frequently
      September 17, 2020

      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

      D
      Diegoleft
      Participant
      July 9, 2020

      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

        Spas K.
        Community Expert
        Spas K.Community ExpertCorrect answer
        Community Expert
        July 10, 2020

        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 🙂

          D
          danrademacher2017
          Participant
          May 31, 2019

          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...

          G
          GWATdesign
          Inspiring
          June 20, 2020

          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!

            C
            claudia carvalho
            Participating Frequently
            June 25, 2020

            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. 

            Atul_Saini
            Community Manager
            Atul_SainiCommunity Manager
            Community Manager
            April 1, 2019

            Hi Karola,

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

            Thanks,

            Atul_Saini

              K
              karola41620367Author
              Participant
              April 3, 2019

              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 .

                C
                claudia carvalho
                Participating Frequently
                July 10, 2019

                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

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