Directions:
Change the font family of the <h1> element to Georgia. CSS Fonts
Change the font family of the .editorial elements to Trebuchet MS. CSS Web Safe Fonts
Use a font stack to give the .editorial elements fallback fonts of Times New Roman and serif. CSS Font Fallbacks
Change the font weight of elements with the .banner p selector to lighter.
Change the font-weight of the .header class to 900.
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. CSS Font Style
Transform the text in the main heading (h1) to appear uppercase. CSS Text Transformation
Let’s put these new properties to work! In style.css, set the letter spacing of the <h1> element to 0.3em. CSS Text Indentation and Spacing
Set the word spacing in the .banner p ruleset to 0.25em. CSS Text Indentation and Spacing
Set the line height in the .banner p ruleset to 1.4. CSS Text Indentation and Spacing
Set the text alignment of the <p> elements to justify. CSS Text Alignment and Text Direction
The font at the bottom of the page, under the Monospaced section, needs to be “Space Mono”. Let’s fix it by linking to the Space Mono Google Font!
Navigate to Google Fonts and select the “Space Mono” font. In the list of style variations, find “Regular 400” and click “+ Select this style”.
Copy the provided <link> element, and paste it into the <head> element inside index.html. CSS Google Fonts
<link href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap" rel="stylesheet">
Inside the .space ruleset, create a declaration using the font-family property, with 'Space Mono', monospace; as the value.
Let’s change the font of the banner using local font files. If you open up the fonts/ directory using the file navigator in the code editor, you’ll notice that we have added local font files Glegoo-Regular.woff2, Glegoo-Regular.woff, Glegoo-Regular.ttf.
At the top of style.css, create a @font-face ruleset and give it the font-family property and 'GlegooBanner' as its value. CSS Web Fonts
Within the @font-face rule, add a src property with the following paths and formats as values, in the following order:
url('../fonts/Glegoo-Regular.woff2') and a format of 'woff2'
url('../fonts/Glegoo-Regular.woff') and a format of 'woff'
url('../fonts/Glegoo-Regular.ttf') and a format of 'truetype'
@font-face {
font-family: 'GlegooBanner';
src: url('../fonts/Glegoo-Regular.woff2') format('woff2'),
url('../fonts/Glegoo-Regular.woff') format('woff'),
url('../fonts/Glegoo-Regular.ttf') format('truetype');
}
Inside the .banner p ruleset, add a declaration that sets the font family to 'GlegooBanner', with a font size of 20px.
<!DOCTYPE html>
<html>
<head>
<title>Typography Blog</title>
<link rel='stylesheet' href='style.css'>
</head>
<body>
<!-- Header -->
<nav class='header'>
<ul>
<li><a class='home' href='#top'>FAVORITE FONTS</a></li>
<li><a class='pagelink' href='#serif'>SERIF</a></li>
<li><a class='pagelink' href='#sans'>SANS-SERIF</a></li>
<li><a class='pagelink' href='#mono'>MONOSPACED</a></li>
</ul>
</nav>
<!-- Banner Section -->
<div class='banner'>
<h1>Typography</h1>
<p>While typography has been practiced for many centuries, digital font design is a relatively new discipline. There are some great examples of old-school fonts (also called typefaces) which have been adapted for use on digital displays. However, I would like to highlight a few of my favorite fonts that were created with screens in mind.</p>
</div>
<!-- Serif Section -->
<div id='serif'>
<!-- Editorial Section - Serif -->
<div class='editorial'>
<h2>Serif</h2>
<p>Serifs are the small features at the end of strokes within letters. These features are <strong>functional as well as decorative</strong>. Serif fonts are widely used for body text (eg. articles) because they are considered easier to read than sans-serif fonts in print.</p>
<p>Serif fonts can often create a feeling of traditionalism and antiquity, due to their common use in printed materials for many years.</p>
</div>
<!-- Font Card - Serif -->
<div class='font-card garamond'>
<h2>Garamond</h2>
<h5 class='creator'>by Claude Garamond (16th Century)</h5>
<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>
<!-- Sans-Serif Section -->
<div id='sans'>
<!-- 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>Sans-serif fonts are often used to project an image of simplicity, modernity or minimalism.</p>
</div>
<!-- Font Card - Sans-Serif -->
<div class='font-card helvetica'>
<h2>Helvetica</h2>
<h5 class='creator'>by Max Miedinger & Eduard Hoffman (1957)</h5>
<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>
<!-- Monospaced Section -->
<div id='mono'>
<!-- 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>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.</p>
</div>
<!-- Font Card - Monospaced -->
<div class='font-card space'>
<h2>Space Mono</h2>
<h5 class='creator'>by Colophon Foundry (2016)</h5>
<span class='sample'>
<h2>Regular</h2>
<span class='regular text'>Abc</span>
</span>
</div>
</div>
</body>
</html>
/* Universal Styles */
html {
font-size: 16px;
font-family: 'Arial', sans-serif;
}
body {
background-color: #F2F2F2;
text-align: center;
}
h1 {
padding: 20px;
color: white;
font-size: 28px;
text-align: center;
}
h2 {
padding: 40px 20px 0 20px;
font-size: 24px;
text-align: center;
}
a {
text-decoration: none;
}
p {
max-width: 900px;
margin: 0 auto;
padding: 20px;
}
/* Header */
.header {
position: fixed;
top: 0;
width: 100%;
padding: 20px 0;
background-color: #fff;
font-size: 14px;
}
.header li {
display: inline-block;
padding: 10px;
}
.header a {
color: #4A4A4A;
}
a.home {
color: #4D00FF;
}
/* Banner Section */
.banner {
margin-top: 74px;
padding: 40px 0 100px 0;
background-color: #4D00FF;
}
.banner p {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
color: #ffffff;
}
/* Editorial Sections */
.editorial {
padding-bottom: 40px;
color: #717171;
}
/* Font Card Sections */
.font-card {
padding: 10px 0 40px 0;
background-color: #ffffff;
text-align: center;
}
.font-card .creator {
padding: 10px 20px;
font-size: 16px;
}
.sample {
display: inline-block;
padding: 5px 40px;
}
.sample .text {
color: #4D00FF;
font-size: 100px;
}
.garamond {
font-family: Garamond;
}
.helvetica {
font-family: Helvetica;
}
.space {
}
.bold {
font-weight: 900;
}
.regular {
font-weight: normal;
}
.italic {
font-weight: normal;
font-style: italic;
}