Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Responsive Design

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Responsive Body Copy

5:26 with Anwar Montasir

The rules for working with mobile body copy are, at a glance, pretty straightforward. Keep your font size at least sixteen pixels. Don’t justify body copy. Leading, or the space between lines of body copy, should be at least 1.5 times the size of the text. So if your body copy is sixteen pixels, your leading should be at least 24 pixels. And the space separating paragraphs should be at least 2.25 times the text size or at least 36 pixels for a 16-pixel body copy. And, finally, a maximum of 80 characters per line. These aren’t just my recommendations–you’ll actually find them in the Web Content Accessibility Guidelines, under a heading called Visual Presentation. So following these rules will keep your text accessible, and easier to read and understand.

Further Reading

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    The rules for working with mobile 0:00
    body copy are, at a glance, pretty straightforward. 0:02
    Keep your font size at least 16 pixels. 0:06
    Don't justify body copy. 0:11
    Leading, or the space between lines of body copy, 0:14
    should be at least 1.5 times the size of the text. 0:18
    So if your body copy is 16 pixels, your leading, or 0:23
    line height as it's called in CSS, should be at least 24 pixels. 0:27
    And the space separating paragraphs should be at least 2.25 0:34
    times the text size, or at least 36 pixels for 16 pixel body copy. 0:40
    And finally, a maximum of 80 characters per line. 0:47
    And these aren't just my recommendations. 0:54
    You'll actually find them in the Web Content Accessibility 0:57
    Guidelines under a heading called Visual Presentation. 1:01
    So following these rules will keep your text accessible and 1:05
    easier to read and understand. 1:10
    But let's take a closer look at that last recommendation, 1:14
    a maximum of 80 characters per line. 1:17
    On a small mobile viewport, say, 375 pixels for a modern iPhone 1:21
    in portrait orientation, it's pretty easy to respect this guideline. 1:27
    But as the screen gets wider, line length presents a greater challenge. 1:33
    Unfortunately, calculating line length in a design program 1:39
    like Figma is not easy as of the time of this recording. 1:44
    Here's a demo I made that I'm checking out with a plugin called Text Counts. 1:49
    On an iPhone 11 Artboard in portrait orientation, 375 x 812 pixels 1:55
    with 16 pixel body copy, I'm counting about 45 characters per line. 2:02
    Great, that's highly legible. 2:09
    What happens when the device is rotated? 2:11
    In landscape format, I'm counting over 105 characters per line. 2:14
    And that's too many. 2:21
    So how can we solve this? 2:22
    We've seen a variety of solutions in action 2:24
    while viewing responsive sites earlier in this workshop. 2:28
    One possibility is increasing text size as the viewport gets larger. 2:32
    Once my font size is 20 pixels or greater, 2:38
    the line length becomes appropriate in landscape format. 2:42
    Responsive typography, where the font size increases based on 2:47
    viewport width, is pretty easy for developers to implement using CSS. 2:53
    Other possibilities include increasing the white space around 3:01
    the text as the viewport expands as Ethan Marcotte has done. 3:06
    Adding more columns on a wider screen, as we saw in CSS Tricks 3:11
    and on multiple news sites, is another strategy. 3:16
    Implementing a maximum pixel width for your body copy is 3:20
    important for dealing with large monitors. 3:24
    In my iPhone demo, I allowed my body copy to extend all 3:28
    the way across the page except for 32 pixels of margin at each edge. 3:32
    But check out Figma's MacBook Pro Artboard, which measures 3:39
    1440 pixels wide. If I extend my body copy all the way across 3:44
    the screen, there's no way to achieve comfortable reading. 3:49
    Whether I'm using multiple columns or even one single column, 3:53
    it's important to establish a maximum width for each column. 3:58
    If I'm willing to make my body copy as large as 28 pixels, 4:02
    I can actually create legible text using a single column on a MacBook Pro. 4:07
    But my column of text is 1000 pixels wide and 4:14
    doesn't extend all the way across the screen. 4:18
    Now, you may be watching this and wondering, oh wow, 4:22
    does this mean I have to calculate each breakpoint in my wireframe 4:26
    and communicate this precise information to my developer? 4:31
    Not exactly. 4:35
    And here's one reason why communication with your 4:37
    developer during the designer-developer handoff is so important. 4:41
    In terms of whether a breakpoint is needed at, say, 4:46
    600 pixels versus 650 pixels to switch navigation schemes 4:50
    or body copy presentation, 4:56
    it's best to give the developer some leeway in figuring this out. 4:59
    It's much easier to make adjustments to breakpoints in CSS 5:03
    than faking it using a design tool like Figma. 5:08
    However, if you're able to clearly communicate your goals for 5:12
    responsive body copy, your developers will be able to make more 5:16
    informed decisions about just where to place those breakpoints. 5:21

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up