It seems like you are using an ad blocker. To enhance your experience and support our website, please consider:

  1. Signing in to disable ads on our site.
  2. Sign up if you don't have an account yet.
  3. Or, disable your ad blocker by doing this:
    • Click on the ad blocker icon in your browser's toolbar.
    • Select "Pause on this site" or a similar option for lancecourse.com.

LCC: Web Apps Development Essentials

Course by zooboole,

Last Updated on 2024-09-05 14:50:08

Day 11: Typography and Colors

Quiz ahead

In this lesson, we delved into the crucial role typography plays in web design and application development. Text is not just an element of design—it's central to user experience. Therefore, it’s important to master how to format and style text effectively.

Introduction to Typography

Typography is crucial in web design because text is a core element of almost every website or application. Presenting text clearly and attractively makes a significant difference in user experience. In this lesson, we'll explore essential CSS properties for formatting text and discuss how to choose fonts wisely to improve readability and aesthetics.

CSS Text Properties:

We explored a range of CSS properties to enhance text presentation, including: text-align font-size line-height text-indent vertical-align text-transform text-decoration text-decoration-color text-decoration-thickness ext-decoration-style text-underline-offset text-shadow

Following this, we introduced fonts, defining what a font face and font family are. We covered the five groups of font families in CSS: serif, sans-serif, monospace, cursive, and fantasy. Finally, we applied our knowledge by using a Google Font (Rayway) in a practical example.

Fonts in CSS

Fonts are a critical part of typography, and choosing the right one can impact the tone and readability of your content. In CSS, we can customize the fonts we use on a webpage using the font-family and font-face properties.

font-family: Specifies the type of font to use for text. This property can contain a list of fonts to try in case the first one is unavailable.

font-face: A rule that allows custom fonts to be defined and used in a webpage.

CSS Font Family Groups

CSS organizes fonts into five broad groups:

- Serif: Fonts with small lines or strokes attached to the end of letters (e.g., Times New Roman).

- Sans-serif: Clean fonts without decorative strokes (e.g., Arial, Helvetica).

- Monospace: Fonts where each character occupies the same amount of space (e.g., Courier, Consolas).

- Cursive: Fonts that imitate handwritten text (e.g., Pacifico, Brush Script).

- Fantasy: Decorative, stylized fonts often used for special purposes (e.g., Papyrus, Comic Sans).

Using Google Fonts

Google Fonts provide a library of free fonts that can easily be integrated into a webpage. For this lesson, we used Raleway from Google Fonts. Adding a Google Font is simple:

  1. Visit Google Fonts.
  2. Select the font you want to use.
  3. Include the provided link in your HTML file inside the tag.
  4. Use the font-family property to apply the font in your CSS.

Example:

<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
body {
  font-family: 'Raleway', sans-serif;
}

Conclusion

Typography is one of the most vital aspects of web design, affecting both readability and the overall look of a website. By learning how to manipulate text properties and choose fonts effectively, you can significantly improve user experience. Next, we’ll move on to colors and how to use them to further enhance the design of your website.

Assignment 11:

Objective: Apply your knowledge of typography and fonts to create a well-structured and visually appealing webpage that showcases text formatting and font choices.

Instructions

Create a new HTML page that displays the following:

  1. A heading (e.g., "Typography and Fonts").
  2. A short paragraph introducing typography (use text-align, line-height, and text-indent to format it).
  3. Another paragraph describing the importance of fonts (apply font-size, text-transform, and text-shadow for styling).
  4. An unordered list that lists five font family groups: Serif, Sans-serif, Monospace, Cursive, and Fantasy. Use different fonts for each list item to represent each font group.
  5. Use Google Fonts:
    • Select two different Google Fonts (e.g., Raleway for headings and Roboto for body text).
    • Integrate the fonts into your webpage by linking them in the HTML <head> section and applying them using the font-family property in your CSS.
  6. Add text decoration:
    • Underline some important words in your text using the text-decoration property.
    • Experiment with text-decoration-color and text-decoration-thickness.

Optional Challenge:

  • Add a button or a link and use the text-transform and text-shadow properties to make it stand out visually.
Take Quiz