Learn CSS: Typography


#1

Good day guys, i’m having some issues with Exercise 5/19 of Learn CSS: Typography.
I’m not sure why the creator for Garamond was italicized as well since we are only setting the font style of .font-card .creator to italic ,which in my assumption should only have the creators of Helvetica and Space Mono italicized.

Shouldn’t Garamond only be italicized if we had set the font style of .font-card garamond . creator to italic?

Appreciate your enlightenment on it


#2

Link to exercise, please, as well as your markup and CSS.


#3

https://www.codecademy.com/courses/learn-css-typography/lessons/css-typography/exercises/font-style-i?action=resume_content_item&course_redirect=learn-css

The web page features three sections, “Garamond”, “Helvetica”, and “Space Mono”. Each of these sections includes a line with the name of the font creator, such as “Claude Garamond”.

Let’s italicize the creator’s name on each of these cards. In style.css, in the font card section, set the font style of .font-card .creator to italic.

Notice the font change from normal to italic on the web page.

CSS

.font-card .creator {
font-size: 20px;
line-height: 1.25;
font-style: italic;
}

HTML

<div class="font-card garamond">
  <h2>Garamond</h2>
  <p class="creator">by Claude Garamond (16th Century)</p>
  <div class="garamond">
    <span class="sample">
      <h2>Bold</h2>
      <span class="bold text">Abc</span>
    </span>
    <span class="sample">
      <h2>Regular</h2>
      <span class="regular text">Abc</span>
    </span>
    <span class="sample">
      <h2>Italic</h2>
      <span class="italic text">Abc</span>
    </span>
  </div>
</div>
<!-- Editorial Section - Sans-Serif -->
<div class="editorial">
  <h2>Sans-Serif</h2>
  <p>Sans-Serif ("without serif") describes fonts with characters which lack flourishes at the ends of the strokes. Sans-serif fonts have become the most prevalent for display of text on computer screens, as on lower-resolution digital displays, fine details like serifs may disappear or appear too large.</p>
  <p><em>Sans-serif fonts are often used to project an image of simplicity, modernity or minimalism.</em></p>
</div>

<!-- Font Card - Sans-Serif -->
<div class="font-card">
  <h2>Helvetica</h2>
  <p class="creator">by Max Miedinger & Eduard Hoffman (1957)</p>
  <div class="helvetica">
    <span class="sample">
      <h2>Bold</h2>
      <span class="bold text">Abc</span>
    </span>
    <span class="sample">
      <h2>Regular</h2>
      <span class="regular text">Abc</span>
    </span>
  </div>
</div>
<!-- Editorial - Monospaced -->
<div class="editorial">
  <h2>Monospaced</h2>
  <p>A monospaced font's characters each occupy the same amount of horizontal space. This contrasts with most fonts, where the letters and spacings have different widths. For example, the two high-use letters "I" and "E" do not need the same footprint. The first monospaced Western typefaces were designed for typewriters.</p>
  <p><em>Many text editors (like those used to write computer code) use monospaced fonts, which aid in distinguishing between potentially similar characters (like "l" and "1") and in counting the number of characters in a line.</em></p>
</div>

<!-- Font Card - Monospaced -->
<div class="font-card">
  <h2>Space Mono</h2>
  <p class="creator">by Colophon Foundry (2016)</p>
  <div class="space">
    <span class="sample">
      <h2>Bold</h2>
      <span class="bold text">Abc</span>
    </span>
    <span class="sample">
      <h2>Regular</h2>
      <span class="regular text">Abc</span>
    </span>
  </div>
</div>

#4

All three font-cards have a .creator class, so all of them will show the creator’s name in italics, not just garamond.


#5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.