Bildschirmtypografie und responsive Design

Pixel-Density und Skalierung

Moderne Bildschirme weisen stark variierende Pixeldichten auf. Ein MacBook Pro Retina-Display hat 220 PPI (Pixels Per Inch), während Standard-Monitore oft nur 72 PPI erreichen. Diese Varianz erfordert adaptive Skalierungsstrategien.

Gerätespezifische Pixeldichten:

• Standard-Monitor: 72-96 PPI
• Hochauflösende Monitore: 110-140 PPI
• Retina/HiDPI-Displays: 200-300 PPI
• Smartphones: 300-500+ PPI

CSS-Einheiten und ihre Anwendung

Absolute CSS-Einheiten:

• px: Pixel (geräteabhängig)
• pt: Points (1/72 inch)
• pc: Picas (12 pt)
• mm, cm, in: Metrische/imperiale Einheiten

Relative CSS-Einheiten:

• em: Relativ zur Schriftgröße des Elements
• rem: Relativ zur Root-Schriftgröße
• %: Prozentual zum Parent-Element
• vw/vh: Viewport-bezogen

Responsive Typografie-Strategien

Moderne Web-Typografie erfordert flexible Ansätze:

Fluid Typography: Verwendet CSS-Funktionen wie clamp() für kontinuierliche Skalierung zwischen definierten Grenzwerten.

Modular Scale: Basiert auf mathematischen Verhältnissen (z.B. goldener Schnitt) für harmonische Größenverhältnisse.

Container Queries: Ermöglicht typografische Anpassungen basierend auf Container-Größen statt nur Viewport-Dimensionen.