feat(curriculum): add images to css fonts lectures (#67188)

2026-05-28 18:26:54 +00:00 · 2026-05-07 07:47:39 +02:00
parent 24e5e9dd4d
commit df2f6f7566
5 changed files with 128 additions and 23 deletions
@@ -11,9 +11,17 @@ Typography is the art of choosing the right fonts and format to make text visual

 We'll start by talking about typefaces and fonts. A typeface is the overall design and style of a set of characters, numbers, and symbols. It's like a blueprint for a family of fonts. A font is a specific variation of a typeface with specific characteristics, such as size, weight, style, and width.

-Two very important examples of typefaces are Serif and Sans Serif. The Serif typeface has a classical style with small lines at the end of characters. Serif typefaces are commonly used for printed materials, like books. Some examples are Times New Roman, Georgia, and Garamond. 
+Two very important examples of typefaces are Serif and Sans Serif. The Serif typeface has a classical style with small lines at the end of characters. Serif typefaces are commonly used for printed materials, like books.

-In contrast, the Sans Serif typeface has a more modern look, without the small lines at the end of characters. Sans Serif typefaces are commonly used in digital design because they are easy to read on screen. Some examples include Helvetica, Arial, and Roboto. There are other typeface classifications, like Script, Blackletter, Monospaced, and Decorative.
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-the-fundamentals-of-typography-1.png" alt="The text 'Hello, World!' displayed in a serif font, showing the small decorative lines at the ends of characters" />
+
+Some examples are Times New Roman, Georgia, and Garamond.
+
+In contrast, the Sans Serif typeface has a more modern look, without the small lines at the end of characters. Sans Serif typefaces are commonly used in digital design because they are easy to read on screen. Some examples include Helvetica, Arial, and Roboto.
+
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-the-fundamentals-of-typography-2.png" alt="The text 'Hello, World!' displayed in a sans-serif font, showing characters without decorative lines at the ends" />
+
+There are other typeface classifications, like Script, Blackletter, Monospaced, and Decorative.

 We mentioned that typefaces are like blueprints for fonts, right? Well, fonts can also be grouped if they share a similar design. Different weights and styles can be combined. For example, Times New Roman includes variations like Times New Roman Bold, Times New Roman Italic, and Times New Roman Bold Italic. These variations within the same font family typically include:

@@ -23,15 +31,41 @@ We mentioned that typefaces are like blueprints for fonts, right? Well, fonts ca

 Great. Now let's explore the fundamental elements of typography:

- The baseline is the imaginary line on which most characters rest. 
- The cap height is the height of uppercase letters, measured from the baseline to the top. 
- The x-height is the average height of lowercase letters, excluding ascenders and descenders.
- Ascenders are the parts of lowercase letters that extend above the x-height, such as the tops of the letters `h`, `b`, `d`, and `f`.
- Descenders are the parts of lowercase letters that extend below the baseline, such as the tails of `y`, `g`, `p`, and `q`.
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-the-fundamentals-of-typography-3.png" alt="The word 'happy' in bold with a red horizontal line labeled 'Baseline' showing the imaginary line on which the characters rest" />
+
+The baseline is the imaginary line on which most characters rest.
+
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-the-fundamentals-of-typography-4.png" alt="The word 'Happy' with two red horizontal lines and a double-headed arrow labeled 'Cap Height' measuring the distance from the baseline to the top of uppercase letters" />
+
+The cap height is the height of uppercase letters, measured from the baseline to the top.
+
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-the-fundamentals-of-typography-5.png" alt="The word 'happy' with two red horizontal lines and a double-headed arrow labeled 'X-Height' measuring the height of lowercase letters excluding ascenders and descenders" />
+
+The x-height is the average height of lowercase letters, excluding ascenders and descenders.
+
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-the-fundamentals-of-typography-6.png" alt="The word 'happy' with a red line labeled 'Ascenders' marking the area above the x-height where the top of the letter 'h' extends" />
+
+Ascenders are the parts of lowercase letters that extend above the x-height, such as the tops of the letters `h`, `b`, `d`, and `f`.
+
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-the-fundamentals-of-typography-7.png" alt="The word 'happy' with two red lines labeled 'Descenders' marking the area below the baseline where the tails of 'p' and 'y' extend" />
+
+Descenders are the parts of lowercase letters that extend below the baseline, such as the tails of `y`, `g`, `p`, and `q`.

 There are more advanced concepts too, like kerning, tracking, and leading.

-Kerning is how space is adjusted between specific pairs of characters to improve their readability and aesthetics. For example, reducing the space between the letters `A` and `V`. Tracking is how space is adjusted between all characters in a block of text. It's essentially the distance between the characters. It affects how dense and open the text will be. Leading is the vertical space between lines of text. It's measured from the baseline of one line to the baseline of the next line.
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-the-fundamentals-of-typography-8.png" alt="The word 'Available' with a yellow triangle highlighting the space between the letters 'A' and 'v', illustrating the gap that kerning can adjust" />
+
+Kerning is how space is adjusted between specific pairs of characters to improve their readability and aesthetics. For example, reducing the space between the letters `A` and `V`.
+
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-the-fundamentals-of-typography-9.png" alt="The word 'Available' with normal character spacing, showing the default distance between letters" />
+
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-the-fundamentals-of-typography-10.png" alt="The word 'Available' with increased spacing between all characters, illustrating how tracking affects the overall density of text" />
+
+Tracking is how space is adjusted between all characters in a block of text. It's essentially the distance between the characters. It affects how dense and open the text will be.
+
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-the-fundamentals-of-typography-11.png" alt="The text 'Let's learn typography' split across two lines with a red double-headed arrow labeled 'Leading' measuring the vertical space between the two baselines" />
+
+Leading is the vertical space between lines of text. It's measured from the baseline of one line to the baseline of the next line.

 Being familiar with these concepts is essential for choosing the right font for your project. 

@@ -13,15 +13,33 @@ Let's start with readability. You should choose clear and simple fonts to make y

 Text should also be large enough for everyone to read it. You should try to keep lines relatively short. The specific number of characters per line really depends on your project. But keeping lines short will make the content easier to read.

-You can use font size to create a visual hierarchy for headings, subheadings, paragraphs, and other elements. For example, the main heading on a webpage should have a larger font, followed by subheadings with smaller font sizes. This will give every element in the hierarchy a specific font size that helps users navigate through the structure visually.
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-some-best-practices-for-working-with-typography-in-your-designs-1.png" alt="Three levels of text hierarchy: 'Heading' in large bold serif, 'Subheading' in medium bold serif, and 'Text' in small regular weight" />
+
+You can use font size to create a visual hierarchy for headings, subheadings, paragraphs, and other elements.
+
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-some-best-practices-for-working-with-typography-in-your-designs-2.png" alt="freeCodeCamp's landing page showing 'Learn to code — for free.', 'Build projects.', and 'Earn certifications.' in progressively smaller text, with a 'Get started (it's free)' button below" />
+
+For example, the main heading on a webpage should have a larger font, followed by subheadings with smaller font sizes. This will give every element in the hierarchy a specific font size that helps users navigate through the structure visually.

 You should use two or three fonts at most to create a visual consistency. Using too many fonts can make the text more difficult to read and weaken your branding's identity. This can also impact the user experience by increasing the load time of the website.

-Once you choose these two or three fonts, use them consistently across different pages and elements. These fonts should be consistent with the overall design of your web application, product, or service. You should also use whitespace to create a visual balance and enhance readability.
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-some-best-practices-for-working-with-typography-in-your-designs-3.png" alt="freeCodeCamp's Style Guide Typography section on a dark background, listing Hack-ZeroSlash as the primary monospace font, Lato as the primary proportional font, and SaxMono as the logo font" />
+
+Once you choose these two or three fonts, use them consistently across different pages and elements. These fonts should be consistent with the overall design of your web application, product, or service.
+
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-some-best-practices-for-working-with-typography-in-your-designs-4.png" alt="Two versions of the same text side by side: the top version has a green checkmark and good whitespace between lines, while the bottom version has a red X and cramped, poorly spaced text" />
+
+You should also use whitespace to create a visual balance and enhance readability.
+
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-some-best-practices-for-working-with-typography-in-your-designs-5.png" alt="WCAG 2.1 Understanding Docs page showing Understanding SC 1.4.3: Contrast (Minimum) (Level AA), with explanations of contrast ratio requirements for large and small text" />

 For accessibility purposes, you should follow the Web Content Accessibility Guidelines. These guidelines set the recommended contrast ratio for text. A higher contrast ratio makes text easier to read, especially for people with visual disabilities.

-You should also provide options to adjust font size and avoid complex fonts as much as possible. As a general rule, you should use simple fonts whenever possible. If your content is easy to read, users are more likely to engage with it. A final tip for working with typography is making sure that your fonts are displayed correctly on different screen sizes and devices.
+You should also provide options to adjust font size and avoid complex fonts as much as possible. As a general rule, you should use simple fonts whenever possible. If your content is easy to read, users are more likely to engage with it.
+
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-some-best-practices-for-working-with-typography-in-your-designs-6.png" alt="Browser DevTools open alongside freeCodeCamp's landing page in responsive mode, showing CSS styles applied to the page's heading elements" />
+
+A final tip for working with typography is making sure that your fonts are displayed correctly on different screen sizes and devices.

 Typography is a powerful tool for creating beautiful designs and engaging user experiences. By understanding the fundamentals of typography and applying these best practices, you can create effective designs.

@@ -9,6 +9,8 @@ dashedName: what-are-font-families

 A font family is a group of fonts that share a common design. All the fonts that belong to the same family are based on the same core typeface, but they also have variations in their style, weight, and width. You can think of them as siblings who share similar characteristics but also have some differences. For example, Arial is a font family that includes variations like Arial Bold and Arial Italic.

+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-font-families-and-how-do-they-work-1.png" alt="Diagram showing 'Arial' at the top with two blue arrows pointing down to 'Arial Bold' on the left and 'Arial Italic' on the right, illustrating font family variations" />
+
 In CSS, you can set the font family with the `font-family` property. Here is an example of setting the font for the paragraph to `Arial`:

 :::interactive_editor
@@ -15,14 +15,27 @@ However, the fallback font selected by the browser may look very different from

 Let's check out some examples of web-safe fonts. In a previous lesson, you learned that sans-serif fonts are commonly used for web development because they don't have small "feet" or lines at the end of the characters, so they're easy to read on screen. Some examples of web-safe sans-serif fonts are:

- Arial
- Verdana
- Trebuchet MS
+Arial
+
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-web-safe-fonts-1.png" alt="The text 'Hello, World!' displayed in Arial, a clean geometric sans-serif font with uniform stroke width" />
+
+Verdana
+
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-web-safe-fonts-2.png" alt="The text 'Hello, World!' displayed in Verdana, a wide sans-serif font with large open letterforms and a tall x-height" />
+
+Trebuchet MS
+
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-web-safe-fonts-3.png" alt="The text 'Hello, World!' displayed in Trebuchet MS, a humanist sans-serif font with slightly rounded letterforms" />

 In contrast, serif fonts do have small "feet" at the end of the characters, so they're commonly used for traditional print. But if you ever need to use them for web development purposes, web-safe serif fonts include:

- Times New Roman
- Georgia
+Times New Roman
+
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-web-safe-fonts-4.png" alt="The text 'Hello, World!' displayed in Times New Roman, a classic serif font with strong contrast between thick and thin strokes" />
+
+Georgia
+
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/what-are-web-safe-fonts-5.png" alt="The text 'Hello, World!' displayed in Georgia, a serif font with wider letterforms and stroke contrast optimized for screen readability" />

 By using web-safe fonts, you can make sure that your design looks consistent across devices and platforms. They can also enhance accessibility for users with visual disabilities, since they are simple and easy to read. And finally, web-safe fonts can reduce page load time, since they don't have to be downloaded if they're already installed.

@@ -18,15 +18,25 @@ Let's start with Google Fonts. This is a Google service that offers a collection
 - A section where you can find and download icons for your web projects.
 - A section where you can learn more about fonts and their best practices, followed by frequently asked questions.

-To add a Google Font to your website, you should go to the first section (Fonts). You can customize the preview text on the left sidebar, where it says "Preview." Just write the text that you would like to see and it will be updated automatically. This is helpful to preview the font with the text that you already have in mind for your website. You can also adjust the font size and filter the fonts based on their characteristics. 
+To add a Google Font to your website, you should go to the first section (Fonts). You can customize the preview text on the left sidebar, where it says "Preview." Just write the text that you would like to see and it will be updated automatically. This is helpful to preview the font with the text that you already have in mind for your website. You can also adjust the font size and filter the fonts based on their characteristics.
+
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts-1.png" alt="Google Fonts Fonts section showing a left sidebar with preview text set to 'freeCodeCamp' at 40px, filter options for Language, Technology, and Decorative stroke, and the main panel listing font families including Roboto, SUSE, and Sevillana each previewing 'freeCodeCamp'" />

 To see more information about a font, just click on it and you will see important information about the font, like who designed it, preview text, and different styles, like light, regular, medium, bold, and black. If you click on the options at the top, you can go to the type tester, see individual glyphs, and learn more about the font and its license.

-You can customize the font size of the preview text with the blue slider located next to the field where you can enter the preview text. Once you're ready to add the font to your project, click on the blue "Get font" button at the top. You'll be taken to a summary page where you'll see the fonts that you currently have selected. You can have multiple fonts selected simultaneously.
+You can customize the font size of the preview text with the blue slider located next to the field where you can enter the preview text.
+
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts-2.png" alt="Google Fonts Roboto Styles page with Specimen, Type tester, Glyphs, and About &amp; license tabs, a blue Get font button, a preview text field showing 'freeCodeCamp' with a font size slider at 48px, and a list of styles including Thin 100, Thin 100 Italic, Light 300, and Light 300 Italic" />
+
+Once you're ready to add the font to your project, click on the blue "Get font" button at the top. You'll be taken to a summary page where you'll see the fonts that you currently have selected. You can have multiple fonts selected simultaneously.
+
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts-3.png" alt="Google Fonts page showing '1 font family selected' with Roboto Static listed, Get embed code and Download all buttons on the right, and a How to use section with All, Design, Develop, and Google products tabs" />

 Next, you have to choose if you would like to download the font files to add them to your project as local files or if you would like to use them as external fonts and download them from Google's servers when a user enters your website. Click on "Download all" if you want to download them but if you prefer to use them as external fonts on Google's servers, click on "Get embed code." If you click on "Get embed code," you'll see the instructions that you should follow to add these external fonts to your project.

-For web development projects, you have two options. You can either use a `link` element or `@import`. If you choose the `link` element option, you can copy and paste the HTML snippet and the CSS rules to add them to your project. You should embed the code in the `head` element of your HTML file and add the CSS rules that fit your needs. 
+For web development projects, you have two options. You can either use a `link` element or `@import`. If you choose the `link` element option, you can copy and paste the HTML snippet and the CSS rules to add them to your project. You should embed the code in the `head` element of your HTML file and add the CSS rules that fit your needs.
+
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts-4.png" alt="Google Fonts Embed code page with the link element option selected, showing three link tags for preconnect and the font stylesheet, a CSS classes section with .roboto-thin, .roboto-light, .roboto-regular, and .roboto-medium rules, and a left sidebar showing font style toggles" />

 Here is an example of using all Roboto styles:

@@ -131,7 +141,11 @@ Here is an example of using all Roboto styles:

 There's a CSS rule for each font style. Each rule assigns the custom fonts with fallback fonts in case the custom fonts are not loaded properly.

-If you choose the `@import` option instead, you will need to add that rule to your CSS file. Here is an example:
+If you choose the `@import` option instead, you will need to add that rule to your CSS file.
+
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts-5.png" alt="Google Fonts Embed code page with the @import option selected, showing a style block containing the @import URL rule, a CSS classes section below, and the left sidebar with font style toggles" />
+
+Here is an example:

 ```css
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@@ -139,18 +153,42 @@ If you choose the `@import` option instead, you will need to add that rule to yo

 The CSS rules are exactly the same.

-If you only want to include specific font styles, you also have the option to remove them from these snippets. The HTML and CSS snippets will be updated automatically. 
+If you only want to include specific font styles, you also have the option to remove them from these snippets. The HTML and CSS snippets will be updated automatically.
+
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts-6.png" alt="Google Fonts Embed code page with the link element option selected, showing the HTML snippet and CSS classes, and the left sidebar listing all Roboto styles from Thin 100 through Bold 700 each with a blue enabled toggle switch" />

 And this is Google Fonts. It's one of the most popular options for finding free and open source fonts for web development projects.

-Another great option is Font Squirrel, where you can find and download the custom fonts that you envision for your design. If you search for a font and click on a result, you'll see more details about the font, including specimens, test drive, glyphs, and Webfont kit. You can also see samples of the different styles and variations of the font, like thin, light, medium, bold, and black.
+Another great option is Font Squirrel, where you can find and download the custom fonts that you envision for your design.
+
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts-7.png" alt="Font Squirrel 'Free Font Utopia' page listing featured free fonts including Acherus Grotesque, Intro Rust, Source Sans Pro, Open Sans, and Questa, each shown with an alphabet specimen and a Download button" />
+
+If you search for a font and click on a result, you'll see more details about the font, including specimens, test drive, glyphs, and Webfont kit.
+
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts-8.png" alt="Font Squirrel search results for 'Roboto' showing three matches: Roboto, Roboto 2014, and Roboto Slab, each with an alphabet specimen and a Download TTF button" />
+
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts-9.png" alt="Font Squirrel Roboto page showing tabs for Sample, Specimens, Test Drive, Glyphs, License, and Webfont Kit, a dark specimen banner displaying 'Roboto' in large white text, and a Fonts section below listing Roboto Thin and Roboto Thin Italic with alphabet specimens" />
+
+You can also see samples of the different styles and variations of the font, like thin, light, medium, bold, and black.
+
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts-10.png" alt="Font Squirrel Roboto Specimens section listing all styles with alphabet samples: Roboto Thin, Thin Italic, Light, Light Italic, Regular, Italic, Medium, Medium Italic, Bold, Bold Italic, and Black, each in its respective weight" />

 Once you've decided on a font that you want to use in your project, go to the "Webfont Kit" tab. Here, you can check if the font's license allows you to use it in `@font-face` CSS embeddings. You can also choose the subset and format.

-Clicking on the "Download @font-face Kit" button will download a compressed (zip) file. If you unzip it, you'll find a "web fonts" folder, the license as a text file, and an HTML file with instructions on how to use web fonts. The web fonts folder will have all the font files that you need for your project. You will find them grouped into specific folders for the different fonts styles.
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts-11.png" alt="Font Squirrel Roboto Webfont Kit tab showing a license notice confirming @font-face embedding is allowed, a subset selector set to Western Latin, format checkboxes with WOFF selected, and a Download @font-face Kit button" />
+
+Clicking on the "Download @font-face Kit" button will download a compressed (zip) file. If you unzip it, you'll find a "web fonts" folder, the license as a text file, and an HTML file with instructions on how to use web fonts.
+
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts-12.png" alt="Three file icons showing the contents of the downloaded kit: a blue folder labeled 'web fonts', a text document labeled 'Apache License.txt', and an HTML file labeled 'How_to_use_webfonts.html'" />
+
+The web fonts folder will have all the font files that you need for your project. You will find them grouped into specific folders for the different fonts styles.
+
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts-13.png" alt="macOS Finder showing the web fonts folder with 19 subfolders for each Roboto variant, named with the pattern roboto_weight_macroman, such as roboto_black_macroman, roboto_bold_macroman, and roboto_thin_macroman" />

 If you open the HTML file on a browser, it has instructions on how to add the fonts to your project, how to include them in the stylesheet with the `@font-face` declaration, and how to use them in the CSS rules.

+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts-14.png" alt="FontSpring 'Installing Webfonts' page with three steps: uploading webfont files, including the webfont stylesheet with @font-face declarations, and modifying your own stylesheet, plus a Troubleshooting section on the right" />
+
 This is how you can add custom Font Squirrel fonts to your project. You can also host them on a separate server and use them as external fonts. External fonts are very helpful for customizing the overall look and design of your website. They can make your website truly unique.

 However, you should also keep in mind that using multiple external fonts can increase the load time of the website, affecting its overall performance. You should always strive to find a balance between style and efficiency.