0

I am really struggling and was wondering whether anyone can help. I am designing a mockup on photoshop of a website we are going to build. We have to show our mockups of the site for all 3 devices (Tablet, Mobile and Desktop).

I have used 20px font size for the header. Will it be the same font size on tablet and mobile.

I have already tried 20px font size on tablet and you cant read the text.

Can anyone help?

Improve this question
3
  • You will need separate CSS files for each layout (and possibly tailored HTML and graphics).
    – Mick
    Mar 19, 2017 at 20:49
  • i found one site, where everything you mentioned is answered, check it out: varvy.com/mobile/legible-font-size.html. Hope it helps!
    – Rocky
    Mar 27, 2017 at 11:31
  • What, exactly, is your question? What do you need help with? A mockup has no bearing on the actual markup used to build the site. You can have the fonts any size you want on the devices you want, but that's not a Photoshop decision. That's an HTML/CSS decision (and one of the many reasons a lot of us would recommend not mocking up multiple screen sizes with Photoshop to begin with).
    – DA01
    Apr 28, 2017 at 5:21

1 Answer 1

Reset to default
1

You might want to look into (or even better, sit down with your frontender) the basics of coding for multiple devices.

When coding with HTML/CSS one can use Media Queries or seperate stylesheets, which basically are exceptions in your css that allow you to set specific styles for specific screen sizes or devices. If you think the header font works better on mobile in (for example!) 18px, use 18px in your mobile design.

Make sure to brief this clearly to your frontender. There are even tools (ie Sympli, Zeplin, Avocode) for Photoshop and Sketch app to help your frontender read font sizes, colors, fonts, sizes etc from your files.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.