Design comparison
Solution retrospective
Hey All,
I am curious as to how you guys managed to get pixel perfect designs in regards to font-sizes, spacing (padding, etc..) & opacity. As it was difficult for me to get it perfect.
the style guide mentioned a font size of 16px for body but it was kind of mis-leading as some elements are definitely not 16 px in my opinion.
Community feedback
- @zoedarkweatherPosted about 1 year ago
Hi, my understanding is that pixel-perfect is kind of impossible and isn't as important as faithfully implementing the spirit of the design. It can even actually cause issues (not least of which is making you frustrated lol). Here is a good article on this idea https://www.joshwcomeau.com/css/pixel-perfection/.
Regarding font size - my understanding is that the body text font size refers to paragraph font size. 16px is the default p font size though so if it says 16px you don't need to specify that. Also, even though the style guides will have a font size in px, it's best to translate that into rem in your css to make sure it's accessible. Hope this helps.
Marked as helpful1 - @pRicard0Posted about 1 year ago
You can use an extension named PerfectPixel
Anyway, you don't need to care about that. It's a waste of time. Have you ever stopped to think about how much time you waste testing? It's enough time to have already created another project or studied more.
1
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord