learned it from freeCodeCamp || See it Live at CodePen
Typography is the art of styling your text to be easily readable and suit its purpose. In this course, you'll use typography to build a nutrition label webpage. You'll learn how to style text, adjust line height, and position your text using CSS.
The Nutrition Label project serves as a practice for creating a structured layout and enhancing styling techniques. The label includes sections such as:
- Serving size
- Calories
- Macronutrient details (e.g., fats, carbohydrates, protein)
- Micronutrients (e.g., vitamins, minerals)
The project adheres to modern web standards and is designed to replicate a real-world nutrition label's look and feel.
- Header: Displays the title and serving information.
- Calories Section: Highlights calorie content with large, bold text.
- Daily Value Section: Provides % Daily Value for each nutrient with indentation for subcategories.
- Micronutrient Section: Lists additional nutritional information like vitamins and minerals.
- Stylized Dividers: Enhances readability and separation of sections.
- Responsiveness: Uses scalable font sizes (rem units) for adaptability.
The primary file containing the structure of the nutrition label. Organized into sections such as:
- Header
- Calories Information
- Daily Values
The styling file that defines the appearance of the label. It includes:
- Font styles and sizes
- Borders and dividers
- Spacing and alignment
- Bold and indented text for emphasis
-
Header Section
<header> <h1 class="bold">Nutrition Facts</h1> <p>8 servings per container</p> <p class="bold">Serving size <span>2/3 cup (55g)</span></p> </header>
- Displays the title and serving details.
- Uses
<span>for inline elements.
-
Calories Info
<div class="calories-info"> <div class="left-container"> <h2 class="bold small-text">Amount per serving</h2> <p>Calories</p> </div> <span>230</span> </div>
- Highlights calories prominently with larger font size and bold text.
-
Daily Value Section
<div class="daily-value small-text"> <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p> <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p> ... </div>
- Lists nutrients with nested and indented categories.
-
Overall Styling
body { font-family: 'Open Sans', sans-serif; } .label { border: 2px solid black; width: 270px; margin: 20px auto; padding: 0 7px; }
- Ensures clean layout with a defined width and centralized position.
-
Text Formatting
.bold { font-weight: 800; } .small-text { font-size: 0.85rem; }
- Differentiates important text using bold weight and font scaling.
-
Dividers
.divider { border-bottom: 1px solid #888989; margin: 2px 0; } .large, .medium { background-color: black; border: 0; } .large { height: 10px; } .medium { height: 5px; }
- Creates distinct section separators with varying styles and thickness.
-
Selective Divider Usage
.daily-value p:not(.no-divider) { border-bottom: 1px solid #888989; }
- Applies a bottom border to
<p>elements in.daily-value, except those with theno-dividerclass. This ensures a clean and organized layout.
- Applies a bottom border to
-
Change Dimensions
- Update
.labelwidth instyles.cssto adjust the label's size.
- Update
-
Update Nutritional Values
- Modify content inside
<p>tags in thedaily-valuesection ofindex.html.
- Modify content inside
-
Font and Theme
- Link a different Google Font in the
<head>section. - Adjust colors (e.g., border, text) in
styles.css.
- Link a different Google Font in the
-
Global Selectors
*: Appliesbox-sizing: border-boxto all elements.
-
Body and Container
body: Defines global font-family using 'Open Sans'..label: Styles the container with a border, fixed width, and margin.
-
Text Formatting
.bold: Applies bold font weight..small-text: Sets smaller font size for specific sections..indentand.double-indent: Adds varying levels of left indentation.
-
Dividers
.divider: Adds horizontal lines for section separation..large,.medium: Styles thick dividers with background color..daily-value p:not(.no-divider): Adds borders to most<p>elements while excluding specific ones.
-
Special Layout
.calories-info: Creates a flexbox layout for calorie section alignment..right: Aligns elements to the right..no-divider: Removes additional borders from specific lines.
This project creates a digital representation of a Nutrition Label using HTML and CSS. The design is inspired by the standardized labels found on food products, presenting nutritional facts in a visually structured and accessible format.