Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Analyzing the chunking on the professional sites

From: Typography for Web Designers

Video: Analyzing the chunking on the professional sites

In this chapter we've learned a lot about how to create hierarchy and chunk text on the page. We've used proximity and similarity and both these things help readers find and read what they're looking for. Now is a good time to ask, how do professional designers create hierarchy on their sites? How do they chunk the text on their sites? How do they use proximity and similarity? Here at subtraction.com we see similarity galore. Everything is in the same font, Arial.

Analyzing the chunking on the professional sites

In this chapter we've learned a lot about how to create hierarchy and chunk text on the page. We've used proximity and similarity and both these things help readers find and read what they're looking for. Now is a good time to ask, how do professional designers create hierarchy on their sites? How do they chunk the text on their sites? How do they use proximity and similarity? Here at subtraction.com we see similarity galore. Everything is in the same font, Arial.

This helps the subtle contrasts work to create hierarchy and chunk the text. Here you can see the first level of chunking is done by placement. The homepage is organized by date and the date is in a column of its own on the left. The next level of importance here is the title of the post. Posts are chunked by a bold title and a pair of rule lines. The top rule is a little bit thicker and darker and it creates a stronger visual separation. The bottom rule is so subtle that the title and the type that follows it feel like they belong together.

If we go up into the Archives, we can see that the rules continue to be used. And also the headings are a little bigger. This is necessary because people are scanning the text, looking quickly for information for a topic or a date. The larger heading wasn't necessary in the homepage where a reader is probably reading in a more leisurely manner. Let's go further down into the site. We'll click on a topic and here we can see that the use of rules continues.

As readers we've learned what his system is for separating things and he wouldn't want to change his system now. We can see he has got the date on the left and the title. Let's go into an article. Here we see that the title of the article has gotten bigger. If you look carefully, it's actually the same size as the title of the web site, but he has created a little hierarchy here. He has lowered the hierarchy of the title by graying it back.

We can also see that he needs to use subheads in some of his longer articles. His subheads are set in all caps and they are grayed back a little bit. This must have been sort of a tough balance to find for hierarchy. He couldn't have used lowercase bold, because then they would have looked too much like his links and all uppercase and in black, it would have just had too much presence, too much hierarchy. So by using the caps and the gray he balances his hierarchy and his subheadings don't look like his links.

And even though they are a little bit more subtle, they still help break the text, because they have a really nice amount of space above them. On our next site, Design Observer, we can see they also use rule lines, both vertical and horizontal to chunk their content. They have to. It's jam-packed. And here's something interesting. If you're planning to use rule lines, you should consider using heavier lines between the columns to separate them and then lighter rule lines within the columns so they don't break the vertical flow of reading down a column, and that's what Design Observer does.

See how the horizontal lines here are lighter and the vertical lines are heavier. If you look over here in the third column you'll see that they're using very thick rule lines. Our eyes are drawn to this area, but the subtle background color that they use in this column, it's very subtle here. Very, very light yellow. It helps with the vertical flow of the column, that the vertical flow of the column remains strong, because the color is only in that column. And the rules are pretty thick, but they work here because they visually relate to the text.

If you look at this top rule, in this top h4 here, they visually relate to each other. They feel like they belong to each other. But you know what, chunking text isn't just about rule lines, so let's look at the text itself. I absolutely love the hierarchy they've created on this site and I want to point out some of the subtleties that tell you that this page or this site was designed by an experienced typographer. First, their h1, the large sort of yellowish type here. It's not bold.

It's not a strong color. It's not in all caps and it's not a different font, yet it's the strongest heading in the content and that's because they didn't hold back in size. Their h1 here is 24 pixels, while the h4 above it is only nine pixels. So there's a really good contrast between the two and at that size an h1 does not have to be bold. And if we go into another section of the site, we scroll up here, we'll go into Places, you can see that the h1 changes color.

It shows we're in a different section of the site, but only the color changes. So there's an element of similarity here. The system didn't completely change on us, and that's good. We learned the rules of hierarchy on the first page and the rules shouldn't change when we go into another section of the site. My favorite subtlety though is the h4. It sits here over the h1 and it says, "Hhi, I'm less important than the title below me. I'm just sort of small. I'm just sitting here." That's okay. But then over here in the left column the exact same h4 is strong, and it says, "Stop, read me.

I am the heading for this chunk of content. I am the heading for this list of links." So the designers found a perfect balance in their system of hierarchy. The exact same tag can play multiple roles on the same page and this is lovely. It keeps the page simple and tied together. If they had used more tags or classes to create more levels of hierarchy, this page could have felt really overwhelming. It has a lot of content on it. So finally, a quick look at the hierarchy within a longer article.

Let's scroll down here and see how they're using their subheads. And you can see it's very simple. They've simply added a bold to the same font and size that they're using on their text. And if we scroll down even further, I want to take you all the way down to the notes. This is a long article. So when we scroll down at the very bottom we see the end notes and you know what, perhaps they're a little light and they're perhaps a little bit small, especially for my old eyes, but it's okay on the web, because you know what? I can zoom in and I can read whatever I need to read and then I can zoom back out when I'm done.

And on a long article like this, I think it's good to make the notes recede into the background. There are a lot of them and some of them are really long and if they didn't recede, they could look like they were still part of the main article. Even though the notes are a bit hard to read without zooming in, I think this was a good decision. It's a good visual break between the article and the notes. We're going to take a look at two more sites quickly. I'd like to show you Jessica Hische's site. She uses the bright orange script font as the main heading and then she also uses it within the text.

It does a great job of chunking the text. And when I scroll down, I notice that the space above the headings is bigger than the space below the headings, and that helps chunk the heading to the text below it. I'd also like to show you another page here, the Accolades page. Again, she is using the orange script font here for her main headings, but when she needs a lower heading, she's using the bold, black, all caps, similar to her links for her lower level headings.

She also does something here that we call a run-in side head. It's when a heading runs right into the text instead of sitting up above it. And this is the lowest level heading that we would usually use, but it has still got good contrast, even though it's in the same line of text. It's bold, it's all caps, and it's a little bit bigger than the text that it's the heading for. So this is excellent! You can also see that she uses subtle gray rule lines to separate sections on her page.

On A List Apart, the larger serif and a slightly brighter color has the highest level of hierarchy in the text. The author's name comes in second. It's all caps, bold, and a color. It combines to give them emphasis. We can click on an article and we can see that the title and author and the styles that they've been assigned continue on the article page. We can scroll down further and let's take a look at how they're using their subheadings.

Here we can see that their subheadings reference the title of the article, same font and size. I think they've just added a little bit of letter spacing and removed the color. Sometimes in these very long articles, let's keep going here, we also need to use a subhead within the subhead, sometimes we call those as sub-subhead and these reference the author. You can see that they are the caps, bold, and letters spaced, just like the author is.

So this really stands out and yet it relates to the system. And then we're just going to go back to the homepage, because I also wanted to point out that they too use subtle gray rule lines to help separate the content on their page. And I have to admit, the rule lines on both Jessica Hische and A List Apart sort of surprised me. I've visited both sites multiple times and I've never really noticed the rule lines or paid attention to them. They sort of flew under my radar until I sat down to analyze the chunking for this lesson.

I was always paying attention to the content, to what I was reading. So I think this means the rule lines work really well on both of these last two sites. They're so subtle, they recede into the background, they do their job, and they help chunk the pages. But they let the text, the content, really take center stage. So as you can see from analyzing the professional sites, hierarchy and chunking can affect the organization of text on the page and when information is set well we often don't notice it. We just read it.

Making good decisions about proximity and similarity will take you extra time, but it will be well worth the trouble. Your readers will be able to find what is important to them without getting frustrated by a difficult reading experience. Again, when you see a web site with good typography, feel free to analyze their design. How have they created hierarchy, how have they chunked their text. Don't hesitate to learn from other people's good type decisions. It will only help you make good type decisions too.

Show transcript

This video is part of

Image for Typography for Web Designers
Typography for Web Designers

74 video lessons · 13477 viewers

Laura Franz
Author

 
Expand all | Collapse all
  1. 6m 18s
    1. Welcome
      1m 9s
    2. Using the exercise files
      1m 57s
    3. Things to consider before starting this course
      3m 12s
  2. 41m 3s
    1. Understanding how good typography promotes reading
      2m 9s
    2. Understanding legibility
      4m 41s
    3. Understanding how fonts convey meaning
      5m 19s
    4. Choosing web-safe fonts to convey meaning
      6m 13s
    5. Using font size, case, style, letter spacing, weight, and color to convey meaning
      6m 22s
    6. Choosing web fonts to convey meaning
      6m 23s
    7. Downloading web fonts
      4m 9s
    8. Applying web fonts in CSS with @font-face
      5m 47s
  3. 38m 0s
    1. Choosing a web-safe font for use in text
      4m 13s
    2. Applying the web-safe font to the text and the heading
      3m 4s
    3. Setting a class for the resource titles in the text
      3m 45s
    4. Choosing a second web-safe font for the heading
      2m 42s
    5. Applying the second font to the heading
      2m 16s
    6. Choosing a web font from the Google Font API for use in text
      5m 44s
    7. Adding and applying the Google Font API syntax
      4m 29s
    8. Choosing a second web font from the Google Font API for the heading
      2m 56s
    9. Adding and applying the second font to the heading
      4m 52s
    10. Analyzing the fonts on some professional sites
      3m 59s
  4. 55m 31s
    1. Understanding how we read
      4m 34s
    2. Finding and applying a good font size and line height
      4m 50s
    3. Finding and applying a good line length
      8m 6s
    4. Understanding ems
      6m 17s
    5. Using ems to set font size
      6m 9s
    6. Using ems to set line length
      3m 40s
    7. Understanding how color affects readability
      3m 58s
    8. Improving a color palette by improving contrast
      5m 39s
    9. Improving a color palette by reducing optical vibration
      4m 59s
    10. Analyzing text readability on the professional sites
      7m 19s
  5. 1h 11m
    1. Understanding how we "chunk" visual elements
      3m 59s
    2. Developing a system of hierarchy
      2m 17s
    3. Applying hierarchy in HTML and CSS
      7m 16s
    4. Developing a system to help chunk text for readers
      6m 1s
    5. Applying the system in the CSS
      4m 19s
    6. Changing an element by creating and applying a class
      5m 0s
    7. Using multiple columns to create hierarchy
      4m 12s
    8. Building a two-column system in HTML and CSS
      10m 56s
    9. Refining the horizontal space in a two-column layout
      6m 1s
    10. Adding rule lines to improve chunking
      5m 50s
    11. Adding emphasis within a heading
      4m 36s
    12. Analyzing the chunking on the professional sites
      11m 18s
  6. 17m 57s
    1. Understanding classic and modernist typographic pages
      7m 3s
    2. Understanding how to create rhythm and tension
      6m 0s
    3. Applying typography skills when making design decisions
      4m 54s
  7. 55m 47s
    1. Designing typographic links for the traditional page
      5m 54s
    2. Adding a list of links to the traditional page
      8m 44s
    3. Describing the link states in CSS
      6m 30s
    4. Returning links to their original "unvisited" style
      2m 38s
    5. Using different CSS for different kinds of links
      7m 28s
    6. Using CSS notation to organize syntax
      5m 34s
    7. Choosing a background color or image
      4m 0s
    8. Applying a repeating background image
      2m 58s
    9. Shaping the traditional page layout
      6m 38s
    10. Analyzing the traditional typographic elements on the professional sites
      5m 23s
  8. 43m 0s
    1. Designing typographic links for the modernist page
      6m 47s
    2. Making a list of links run across the page
      2m 14s
    3. Adding and removing space between the navigation links
      6m 50s
    4. Styling the inline links on the modernist page
      5m 33s
    5. Choosing a background color or image for the modernist bibliography
      4m 4s
    6. Applying a no-repeat background image
      4m 13s
    7. Shaping the modernist page layout
      6m 58s
    8. Analyzing the modernist typographic elements on the professional sites
      6m 21s
  9. 52m 53s
    1. Fixing quotation marks and apostrophes
      6m 59s
    2. Fixing dashes
      6m 33s
    3. Working with lining figures (numbers) and acronyms
      9m 28s
    4. Fixing characters that don't look right
      8m 19s
    5. Hanging punctuation
      2m 54s
    6. Applying typographic accents
      2m 36s
    7. Vertically centering text
      5m 18s
    8. Creating drop caps
      5m 59s
    9. Analyzing the typographic details on the professional sites
      4m 47s
  10. 3m 9s
    1. Additional resources
      3m 9s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Typography for Web Designers.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.