alex-mueller/Aufgaben-Python
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
Aufgaben-Python/courses/html_css/08_typografie_und_webfonts
History
Alex Mueller 2571cb8847 feat(ux): responsive kurs-sidebar und kapitel-drawer für alle 13 kurse & web-ide 
- Dynamic Sidebar mit window.COURSES_MANIFEST für 13 Kurse (216 Kapitel)
- Kurswechsler Dropdown mit Direktnavigation
- Fortschrittsanzeige mit Solved-Checkmarks (✓) aus localStorage
- Responsive Off-Canvas Drawer mit Floating Action Button (☰ Kapitel) & Backdrop auf Mobile/Tablets
- Web-IDE Topbar Drawer-Button (☰ Kapitel) für unterbrechungsfreien Vollbild-Editor
- Saubere Bereinigung redundanter statischer Legacy-Sidebars
2026-09-12 13:49:46 +02:00
..
aufgabe.html Branding-Update für it-praxisportal.de: Neuer Hero-Bereich, SVG-Favicon, OpenGraph-Metadaten und Plattform-Titel 2026-09-12 13:26:06 +02:00
index.html feat(ux): responsive kurs-sidebar und kapitel-drawer für alle 13 kurse & web-ide 2026-09-12 13:49:46 +02:00
musterloesung.html Branding-Update für it-praxisportal.de: Neuer Hero-Bereich, SVG-Favicon, OpenGraph-Metadaten und Plattform-Titel 2026-09-12 13:26:06 +02:00
README.md Vollständige Umsetzung von Phase A bis C: (1) SQL & Data Analytics Master (16 Module), (2) HTML5 & Modern CSS3 (16 Module) und (3) Go Cloud Microservices (16 Module). Plattform umfasst nun 131 Module über 7 Sprachen 2026-08-30 13:10:38 +02:00
test_aufgabe.js Vollständige Umsetzung von Phase A bis C: (1) SQL & Data Analytics Master (16 Module), (2) HTML5 & Modern CSS3 (16 Module) und (3) Go Cloud Microservices (16 Module). Plattform umfasst nun 131 Module über 7 Sprachen 2026-08-30 13:10:38 +02:00

README.md

CSS 08: Web-Typografie, Schriftarten & Text-Effekte 🔤

Willkommen in Modul 08!

In dieser Lerneinheit lernst du, wie Webfonts via @import eingebunden werden, wie Font-Stacks aufgebaut sind, wie relative Schriftgrößen (rem) funktionieren und wie du Text-Transformationen gezielt einsetzt.

💡 1. Das Wichtigste in Kürze

Webfont-Einbindung & Fallback

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700&display=swap');

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

Type-Scales & Zeilenabstände

  • h1: 2.25rem bis 2.5rem, line-height: 1.2
  • h2: 1.5rem bis 1.75rem, line-height: 1.3
  • p: 1rem bis 1.125rem, line-height: 1.6 (optimale Zeilenhöhe für ermüdungsfreies Lesen)
  • letter-spacing: 0.05em bis 0.1em in Kombination mit text-transform: uppercase

🎯 Teilziele in aufgabe.html

  1. Webfont @import: Binde Google Fonts mit @import ein.
  2. Font-Family Stack: Wende font-family mit Fallbacks auf den body an.
  3. Type-Scale: Definiere Schriftgrößen mit relativen rem-Einheiten für h1, h2 und p.
  4. Lesbarkeit: Setze line-height: 1.6 (oder höher) auf Absätze.
  5. Text-Transformation: Formatiere .category-tag mit text-transform: uppercase, letter-spacing und font-weight.