Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Mike Aquan-Assee
15,336 PointsFont-Sizing when designing a web layout
When designing the layout for a website, tablet or mobile - how do you factor in the correct font sizes? Do you just visually layout headlines and body in pt. or px. sizes and then factor in the em conversion in the development stage?
8 Answers
Tracy Trathen
10,468 PointsMike
When working in Photoshop or Illustrator doing a mockup, your best choice is to swap out to using Pixels in the software. Having done print layout for years, and also having done design for many different screens, if you know your viewport sizes (the area of display in the device or devices you're designing for has), that helps, but it's a bit different going from print to online/web, mostly because of the fact that when designing for digital devices, there are literally thousands upon thousands of possibile device viewports that are out there.... it's impossible to design for them all. So what's a designer to do? What I do, is design for content, and keep the mockups in Photoshop (or Sketch) to a few / and keep what you do to a minimum. I don't really even call them mockups, I tend to call them stylesheets and I make sure to explain to the client that what they are seeing is not an exact shot of what they will get in the end, when the website is done, and then I explain the multiple device viewport rendering thing, in as layman terms as I can (you'd be surprised how many business people don't have a clue about tech things).
Typically when I design a website, for example, once I've done the mockups or stylesheets (some also call these "Style Tiles"), and I'm working in an actual prototype, I design for the content at that point. Breakpoints (i.e. when the design breaks in a different size viewport width) is what has me change the font sizes slightly depending on my needs at that particular breakpoint. This is why I don't usually do any sort of extensive mockups in Photoshop or Sketch any more.
The last few websites I've designed, I've skipped the mockup stage, and just used my quickly sketched wireframes (paper and pencil!), and just built a semi-working prototype right in the browser, making sure I have all the sections and elements the client wants. Typically as long as I have their colors and logos and the right kind of imagery, they've been pretty happy.
But to reiterate the answer to your question, at least from my viewpoint: When I do use Photoshop or Illustrator to do any sort of design that I know will go on the web, I use Pixels for my font sizes.
I hope this helps.
Kevin Korte
28,149 PointsAhh gottcha, okay well here are my thoughts.
When designing I do not think about ems, rems, or anything else. I work in sizes most comfortable to me, which is pixels. I would set my font sizes in pixels on the design side.
Re-reading your question, I see that's why you suggested in your question, and so I agree with that. It's not until I start writing code that I would worry about any other sizing unit, and I would use a pre-processor to do the math for me, hints why I asked. I would still write my sizes in pixels buy the pre-processor would convert those to ems, rems, etc.
maali2
12,539 PointsYes, create mobile first then for tablet, desktop use em and test, test, test!!!!
Mike Aquan-Assee
15,336 PointsThanks Kevin, it's good to hear other people's workflows!
Tim Callan
24,230 PointsThanks, this is very helpful
Mike Aquan-Assee
15,336 PointsThanks but could you clarify your process in a bit more detail - from starting with designing the layout? Converting font sizes in ems, rems, etc for development is a bit confusing for me, coming from a print background.
Kevin Korte
28,149 PointsMike are you using a css-preproccessor like Sass, Less, or Stylus? That's helpful to know before I answer my thoughts.
Mike Aquan-Assee
15,336 Pointshi Kevin, I am asking generally, as in I'm not currently building something. I wouldn't be using a css-preprocessor. I'm mostly interested in how a visual/web/ui designer would approach this when creating a mockup in Sketch or Photoshop. Would the ems, rems etc come into the picture at that stage? Does the designer need to factor in the conversion when choosing font sizes in the mockup stage?
Tracy Trathen
10,468 PointsTracy Trathen
10,468 PointsI forgot one other thing. If you're not doing the development portion, maybe ask the person doing the development what they'd prefer? or what unit of measure they will be using? i.e. are they just going to use pixels, or are they going to use ems or rems.... Are they using pixels and having their preprocessors convert them, etc.
Mike Aquan-Assee
15,336 PointsMike Aquan-Assee
15,336 PointsThanks Tracy, very helpful answer!