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

CSS CSS Foundations Web Typography Responsive Text and Vertical Rhythm: Part 1

Posted by orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

maxWidth

Hello!

THis is the original style from web-typography Stage8. In this lesson, we change all the pixels to em to make the web site responsive, but to keep the line-length at 60 characters per line, the instructor gives .wrap a max-width of 600px. I dont understand why he didn't change 600px to em, like he did with the others.

2) is there a formula to know that max-width 600px will create 60 characters per line

**Please respond if you have a direct answer.

Cheers!

/* ---------------------
    Reset Margins
------------------------ */

body, h1, h2, h3, p {
    margin: 0;
}

/* ---------------------
    Page Styles
------------------------ */

* {
    box-sizing: border-box;
} 

body {
    padding: 2.95em 0;
    border-top: 8px solid #222;
    background: #f9f9f9;
    color: #333;
    font-size: 1.125em;
    font-family: 'PT Serif', serif;
    line-height: 1.62;
}
a {
    color: #d24c39;
}
.wrap {
    margin: 0 auto;
    max-width: 58%;
}
.title {
    font-size: 4em;
    margin-bottom: .78em; 
    font-family: 'PT Sans Narrow', sans-serif;
    line-height: 1;
}
h2, h3 {
    font-family: 'PT Sans', sans-serif;
}
h2 {
    margin: 1.35em 0 .8em 0;
    color: #2B9BD4;
    letter-spacing: -1px; 
    font-size: 2em;
    line-height: 1.1;
}
h3 {
    margin: 1.7em 0 .8em 0;
    color: #222;
    font-size: 1.33em;
}
p {
    margin: 1.6em 0;
}
img {
    padding: .5em;
    width: 100%;
    border: 1px solid rgba(34,34,34,.3);
}
blockquote {
    position: relative;
    margin: 0 0 0 3em;
    padding: 0 1.7em 0 0;
    color: rgba(34,34,34, .8);
    font-style: italic;
}
blockquote:before {
    position: absolute;
    top: -30px;
    left: -55px;
    color: rgba(77,195,255,.5);
    content: "\201C";
    font-size: 4.5em;
}
.code {
    padding: 1.1em;
    border: 1px solid #dae0a7;
    background: #eef2ca;
    color: #ccc;
    color: rgba(34,34,34, .8);
    white-space: pre;
    font-size: 1rem;
    font-family: 'Consolas', monospace;
    line-height: 1.35;
}

/* ---------------------
    Media Queries 
------------------------ */


@media screen and (max-width: 599px) {
    body {
        font-size: 1em;
    }
    .wrap {
        max-width: 85%;
    }
}

@media screen and (min-width: 980px) {
    .wrap {
        max-width: 600px;
    }
}

7 Answers

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Chris Coyier over at CSS-Tricks wrote a great article about the differences and why it's best to use different units for various parts of the site compared to using a single unit.

http://css-tricks.com/rems-ems/

Also the em unit doesn't imply the term responsive, it simply means that the font size will scale the same way from mobile to desktop whereas a unit like px won't.

orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Hello Chris,

Also the em unit doesn't imply the term responsive, it simply means that the font size will scale the same way from mobile to desktop whereas a unit like px won't.

  1. I thought scale meant responsive. My understading of scaling and responsize is that the page will change in size as the viewport increases or decreases in size.

  2. is there a formula to know how max-width 600px creates 60 characters per line?

thanks!

orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Sorry about the bold section, I am not sure how the bold feature got activated.

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

I thought scale meant responsive. My understading of scaling and responsize is that the page will change in size as the viewport increases or decreases in size.

Scaling in terms of the page responding to different devices, yes. What I meant by my above comment is that with the em unit you should get a consistent font size across all devices which pixel font's don't give you as they generally scale to the devices screen rather than the pages base font size which causes smaller fonts on mobile devices compared to tablets and desktop browsers even though the size never changes.

is there a formula to know how max-width 600px creates 60 characters per line?

I'm not sure I follow, pixels don't line up with characters as one character can either take up half a pixel, a whole pixel or more so it would never be a true 1:1 relationship.

orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Hello John,

If you look at this video, toward the end the instructor mentions giving the max-width:600px so that line doesnt get longer than 60characters.

I cant figure out why 600px would cause a line to have up to 60characters. How does he determine that. or What about 900 or 980px, how many characters will they have

http://teamtreehouse.com/library/css-foundations/web-typography/responsive-text-and-vertical-rhythm-part-1

thanks!

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Guil says of about 60 characters which doesn't imply 60 characters exactly which matches up with what I said above.

Pixels don't line up with characters as one character can either take up half a pixel, a whole pixel or more so it would never be a true 1:1 relationship.

orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Ok, I am sure I heard 60 characters per line(in fact, if you download the start file, and follow all his instructions, you will see the line length change. there should be fewer words on each line when you complete the instructions on this video) ..

ok if you wanted 70 or 90 character per line just like he mentions, what max-width would you give them and why?

Cheers!!

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

The max-width depends on the total number of characters you want, until today I wasn't even aware that the number of characters per-line mattered until I read the below articles.

http://www.benshoemate.com/2013/08/02/optimum-web-readability-max-and-min-width-for-page-text/ http://www.maxdesign.com.au/2013/05/25/ideal-line-length-in-ems/

orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Hey John, Thanks for this article. Yeah, I am a bit anal this way, hahaha. nothing gets by me in these videos.

Thanks a million!

Danita Copeland
Danita Copeland
7,547 Points
Danita Copeland
Danita Copeland
7,547 Points

I have a follow up question regarding max-width. How did Guil calculate the percentage for the max-width (converting the original 600px to 58%)? He starts talking about max-width at 06:30 in the video. Thanks.

rosinapissaco
rosinapissaco
13,401 Points
rosinapissaco
rosinapissaco
13,401 Points

Thanks, I also was not sure why (in the video) he is using rems instead of ems for some widths.