• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

When developers implement the designs I make in Adobe XD, the font sizes look massive compared to my design (I design on a Retina screen)

New Here ,
Apr 10, 2019 Apr 10, 2019

Copy link to clipboard

Copied

The font sizes they use from the specs are correct as per my design but they look massive on the live site. I design on a retina screen, does this have anything to do with it?  If so, is there a fix around it?

Thanks

Views

2.8K

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

Community Expert , Apr 11, 2019 Apr 11, 2019

Personally I wouldn't normally design on a 1920 artboard because few people have a monitor that large. A range of 1280 to 1440 is much more common for most desktops/laptops.

While your type is a bit large... it's not huge and would fit on smaller screens. If the type on the live site does not match your design, then you should ask the developers about it because I think it has to do with something they are doing, rather than it being Adobe XD.

Keep in mind that it's up to the developer to take th

...

Likes

Translate

Translate
Adobe Employee ,
Apr 10, 2019 Apr 10, 2019

Copy link to clipboard

Copied

Hi UncleDenski,

This could be frustrating, would it be possible for you to share the design specs? You may also create a sample file for this so that we may test it here at our end. I am interested to check the text properties in XD and how different it is on the web.

Thanks,

Atul_Saini

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 ,
Apr 11, 2019 Apr 11, 2019

Copy link to clipboard

Copied

here are the dev Adobe XD

here are the design Adobe XD

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 Expert ,
Apr 11, 2019 Apr 11, 2019

Copy link to clipboard

Copied

It's a little hard to say without seeing one of your files, but here's my guess. In Adobe XD you should be working at 1x sizes, NOT the hardware pixel size of the device. For example in Adobe XD an iPhone 6/7/8/X is 375px wide even though their screens have more hardware pixels.

What size artboards are you designing on? What size is your type in Adobe XD? The default text size in a browser is 16px for some context.


— Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor

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 ,
Apr 11, 2019 Apr 11, 2019

Copy link to clipboard

Copied

I'm designing on 1920x1080 size. My smallest type is 16px but ranges all the way to 38px

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 Expert ,
Apr 11, 2019 Apr 11, 2019

Copy link to clipboard

Copied

Personally I wouldn't normally design on a 1920 artboard because few people have a monitor that large. A range of 1280 to 1440 is much more common for most desktops/laptops.

While your type is a bit large... it's not huge and would fit on smaller screens. If the type on the live site does not match your design, then you should ask the developers about it because I think it has to do with something they are doing, rather than it being Adobe XD.

Keep in mind that it's up to the developer to take the information from XD and then properly code the page. You've provided the specs, but it doesn't mean they have to listen to them.


— Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor

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 ,
Apr 12, 2019 Apr 12, 2019

Copy link to clipboard

Copied

the font matches the design font, but i'm not sure why everything looks smaller in my design vs the live site

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 ,
Apr 12, 2019 Apr 12, 2019

Copy link to clipboard

Copied

i just realized, its not just the font either. ITS ALL ITEMS. Like modals, boxes, pictures, etc all look way bigger with less space inbetween them than in my design

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 Expert ,
Apr 12, 2019 Apr 12, 2019

Copy link to clipboard

Copied

Are you viewing your design at 100% zoom, which is the actual size?


— Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor

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 Expert ,
Apr 12, 2019 Apr 12, 2019

Copy link to clipboard

Copied

In XD make sure you're designing at 100% zoom to see everything the proper size. Keep in mind that the share for design will scale large designs down in the web browser if you're on a smaller monitor. This is one of the many reasons why I don't design for 1920 screens.


— Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor

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 ,
Apr 15, 2019 Apr 15, 2019

Copy link to clipboard

Copied

Ok thanks, but I guess my question is if I design at 1440, how will that translate well for the developers?

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 Expert ,
Apr 23, 2019 Apr 23, 2019

Copy link to clipboard

Copied

It technically should not matter what screen size you design, developers should be able to translate that into code. But if you are designing for a screen size very few people use, it's not a good use of your time. You should design for a common screen size, because you want to see and design for what the average person will see... not some outlier.

Also, if you're designing at a really big size, and not at a smaller common size, the developers will have to figure out what to do on smaller screens. They may have to make decisions about issues you didn't think about, because you weren't designing for that size screen.

I hope that helps!


— Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor

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 ,
Nov 04, 2019 Nov 04, 2019

Copy link to clipboard

Copied

Hi,
I have the same issue (only regarding the font) and I just realized that might be because of the font-size: points vs pixels. Do you know what is the usual measure of the font size on xd? and if it is points can we convert it to pixels?

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 ,
Oct 03, 2021 Oct 03, 2021

Copy link to clipboard

Copied

Hey Dan, 

 

If I'm trying to design for MacBook Pro 2018 (13 inch) have 13.3" physical screen size with IPS technology and it's native resolution is 2560 x 1600 Pixels with approximately 227 PPI pixel density. 

 

Should my artboard size be 2560 x 1600 or should i design in 1280 x 800 to fit the Macbook Pro screen size?

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 Expert ,
Oct 03, 2021 Oct 03, 2021

Copy link to clipboard

Copied

LATEST

1280 x 800. For retina, if you have raster images, you can have them @ x2 the size before importing, and scale them down to 50% in the design. When you export for web, Xd will export 1x and 2x (retina) versions of that image, if you want to make it available. The rest of the elements like fonts, buttons etc. are vector based and described with code, so the device upscales them to match the 2560x1600 res without loss of quality.

 

You can also design at 2560x1600, and have xd halve the resolution of images on export, by selecting "Designed at: 2x" on the export screen. That is not  a popular practice, since when you code websites, you will use the logical (smaller) resolution sizes for fonts and other elements. If you have an icon that's 24x24 px @ 1280x800, devices that don't have upscaling will show it as that, and devices such as the MacBooks that do, will upscale it to 48x48, retaining the same relative size on the screen with the bigger resolution.

 

If you design on the bigger resolution, and the frontend developer uses the bigger numbers when coding, your elements will look huge, because the browser will think that's their logical size and upscale them anyways.

 

So it kind of depends on what you're making specifically. If you were making a game for example, where the buttons are drawn in photoshop @ actual size and 90% of elements are raster, then you can use the bigger res and downscale. In most other cases, you use the smaller logical resolution.

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