So, a few days ago I received a photoshop document (PSD) containing a mockup of a web. So my job is to convert that PSD file to an actual website but I’m having some issues mainly because of its font size, Its too big. the screen pixel ratio on the PSD file is larger than the PC I am using, so if I use the original font size, which is 80px, it overlaps with the other elements. I ended up lowering the font size but I don’t know if it was the right thing to do, so do you all have any suggestions for this issue? and how should I make it mobile friendly too? (this is assuming that I can’t ask the design person, so i have to think for myself)
I wouldn’t worry about the specific font-sizing in pixels because pixel sizing really makes a site non-responsive because a pixel isn’t responsive - it’s a fixed measurement.
I don’t recall the thread (edit: it’s this one), but Paul (our resident CSS guru/jedi/master) makes a good case that pixels are best for margins/paddings, but for the rest of the measurements should be in percentages (for height/width) or in em/rem (for font sizes/line heights). There are also viewport relatives (vh, vw) but are harder to master.
Did your “designer” give you a small device design, or did they only give you a desktop version?
Thank you for that I’ll keep that in mind next time I want to size my fonts!! Unfortunately no, they only gave a desktop version for the design. So if i want to make it more responsive what kind of approach should i go for, specifically for these big fonts?
Should i just resize them according to screen size?
If you design your site right, then most times, it’s the containers which determine where the “break points” are. And at those break points, you may have to adjust the font-sizes.
But if you develop in em/rem instead of using hard pixels, you should have fewer font-size breakpoints.
Just don’t go for “pixel perfection” based on the an image design. Design using the ratios in the original design and adjust accordingly.