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
Tiffany McAllister
25,806 PointsDifficulty with Typography
The thing about making websites that I have the most trouble with is typography, especially responsive typography. I'm not much of a designer myself so I find it pretty difficult to take a website mockup that has been designed by someone else and make the typography look good and achieve vertical rhythm etc. I struggle with font-size units, line-heights and margins. How do you guys come up with these values? Are there any specific conventions to follow, or any tools that can help with this kind of thing?
4 Answers
Ted Sumner
Courses Plus Student 17,967 Pointsthere is a good course on here for typography. The compass helper for Sass also has some good typography tools. I strongly suggest Sass if you are not using it. This is a good place to start.
Allison Walker
17,137 PointsCan I make a suggestion? If someone else is designing the site, would it be possible for them to specify the pixel measurements they want - meaning they provide you with design specs? Seems like what you're asking for are essentially design decisions. Have the designer be the one to come up with the specs for the leading, the margins, and the font size so you can focus on the CSS/HTML. It's common for visual designers to spend time at the end of their design cycle, marking up their work in Illustrator or wherever, with exact pixel measurements so that the dev team doesn't have to guess at which styles to use.
ETA: You can also use this site which will convert pixel measurements to em values, if that's what you're asking. http://pxtoem.com/
ETA: This tool, Pearsonified's Golden Ratio Calculator might help: http://www.pearsonified.com/typography/ (It is based on this http://www.pearsonified.com/2011/12/golden-ratio-typography. There are many aspects of typography that affect legibility and readability. But for the purposes of this tool, keep in mind that 52-70 characters per line (CPL) is the ideal. Try inputting your width and CPL, and letting the tool choose the font size for you, or mix-it-up as needed. I do highly recommend taking some time to learn more about typography and web typography but in the meantime this might help you out!
Tiffany McAllister
25,806 PointsThe designer has specified pixel font sizes for large screens. If I was making a fixed-width website I wouldn't find it so difficult, but since it's a responsive website I find it much harder. The designer doesn't know anything about development, he just designs the website in Photoshop at desktop size and specifies the dimensions in pixels.
I've been trying to learn as much as I can about web typography. I'm just finding it difficult to make it look right at every breakpoint and in-between due to my non-designer mind haha.
Anyway, thanks for the links, guys. I will definitely check them out :)
Allison Walker
17,137 PointsEven for responsive designs, the designer should be creating mockups and making specifications for target device sizes - for desktop, tablet, and mobile. That's part of their job. It should simply be a requirement of the project that the deliverables the designer hands off you at the end of the design stage should include at least 2 sizes, and preferably 3 if there's a difference between tablet and desktop.
Ted Sumner
Courses Plus Student 17,967 PointsThe problem with exact pixel measurements is that exact pixels are not responsive. You are better off using em and rem for units. The design also shifts on screen size. Ideally the designer will direct that, but exact pixel size is not what you want.
Additionally, there is a rhythm to the text that is in the implementation of the CSS. The issues are discussed in the classes I cited above.
Allison Walker
17,137 PointsIt is true that pixel measurements are not exact on the screen, but I never said she had to use pixel measurements to get the result. The point is that what she's asking for are design decisions that typically a designer has spent time working on getting just right. (She said she was working from a mockup.) In that case, it would be good to have the designer specify what she's looking for so that the developer doesn't need to spend on figuring out what is the best looking line-height, and instead can focus on how to turn the designer's specified leading into the right line-height.
Ted Sumner
Courses Plus Student 17,967 PointsYou might want to try to get him to do a basic design for tablets and phones. Explain that over half of all hits are now coming from those devices and either he can design it so it looks good or he can let you have free reign of more than 50% of all views. I would also explain that design should be done from small screens to large screens. Small screens have the key content while you add for larger screens. If it is not done right, you lose all the mobile hits to the site. Ie. a substantial portion of the 50% mobile users will never wait around to view his cool designs. Proper education and stroking of his (or her) ego may get you at least some guidance on small screens.