Bildschirmlineal
Pixel, Zentimeter und Zoll direkt am Bildschirm messen. Abstände, Flächen und Seitenverhältnisse ermitteln — mit DPI-Kalibrierung für präzise physische Messungen.
Pixel und Abstände am Bildschirm messen
Das Bildschirmlineal misst Abstände und Größen direkt auf Ihrem Monitor — in Pixeln, Millimetern oder Zentimetern. Es ist ein unverzichtbares Werkzeug für Webdesigner, UI/UX-Designer, Grafiker und alle, die pixelgenaue Maße am Bildschirm benötigen. Im Unterschied zu nativen Desktop-Tools wie PixelRuler oder Meazure arbeitet dieses Lineal vollständig im Browser und erfordert keine Installation. Es eignet sich für schnelle Ad-hoc-Messungen ebenso wie für die systematische Überprüfung von Layouts und Design-Spezifikationen.
Das Lineal kann horizontal und vertikal ausgerichtet, frei auf dem Bildschirm positioniert und in der Länge angepasst werden. Die Messwerte werden in Echtzeit angezeigt, während Sie die Markierungen verschieben. Zusätzliche Hilfslinien (Guides) erleichtern die Ausrichtung an mehreren Referenzpunkten. Die Messung berücksichtigt den Device-Pixel-Ratio (DPR) Ihres Bildschirms, sodass auch auf High-DPI-Displays (Retina, 4K) korrekte Werte angezeigt werden.
Wofür braucht man ein Bildschirmlineal?
Die Einsatzmöglichkeiten sind vielfältig und gehen über reines Design hinaus:
- Webdesign: Abstände zwischen Elementen (Margins, Paddings), Schriftgrößen, Spaltenbreiten und die Einhaltung eines Gestaltungsrasters (Grid) messen. Besonders nützlich beim Abgleich von Design-Mockups mit der tatsächlichen Implementierung.
- UI/UX-Design: Touch-Targets auf Mobilgeräten prüfen — Apple empfiehlt mindestens 44×44 Punkte, Google (Material Design) mindestens 48×48 dp. Zu kleine Tippflächen führen zu Fehleingaben und schlechter Nutzererfahrung.
- Grafik-Design: Proportionen und Ausrichtung von Objekten in Layouts, Präsentationen und Druckvorlagen prüfen. Abstände zwischen Logo und Rand, Zeilenabstände und Spaltenausrichtung kontrollieren.
- Screenshots: Abmessungen von Bildschirmbereichen vor der Aufnahme bestimmen, um die richtige Crop-Größe für Dokumentationen oder Tutorials festzulegen.
- Barrierefreiheit: Schriftgrößen und Kontrastverhältnisse überprüfen — die WCAG 2.1 empfiehlt eine Mindestschriftgröße von 16px für Fließtext und Touch-Ziele von mindestens 24×24 CSS-Pixeln.
- Monitor-Kalibrierung: Physische Maße verifizieren, indem Sie ein reales Lineal neben das Bildschirmlineal halten und den DPI-Wert anpassen.
Pixel, PPI und physische Maße
Die Umrechnung von Pixeln in physische Einheiten (Millimeter, Zentimeter, Zoll) hängt von der Bildschirmauflösung ab, gemessen in PPI (Pixels per Inch) oder DPI (Dots per Inch). Die Formel lautet: Physische Größe (mm) = Pixel ÷ PPI × 25,4. Typische PPI-Werte verschiedener Displaytypen:
- Standard-Desktop (Full HD, 24"): ca. 92 PPI → 100 Pixel ≈ 27,6 mm
- QHD-Monitor (27", 2560×1440): ca. 109 PPI → 100 Pixel ≈ 23,3 mm
- 4K-Monitor (27", 3840×2160): ca. 163 PPI → 100 Pixel ≈ 15,6 mm
- MacBook Retina (13", 2560×1600): ca. 227 PPI → 100 Pixel ≈ 11,2 mm
- iPhone 15 Pro: ca. 460 PPI → 100 Pixel ≈ 5,5 mm
In der Webentwicklung unterscheidet man zwischen physischen Pixeln (Hardware-Pixel) und CSS-Pixeln (logische Pixel). Auf einem Retina-Display mit DPR 2 entspricht 1 CSS-Pixel 4 physischen Pixeln (2×2). Das Bildschirmlineal arbeitet mit CSS-Pixeln und zeigt den Device-Pixel-Ratio an, damit Sie beide Ebenen berücksichtigen können. Für die CSS-Eigenschaft 1px gilt: Sie entspricht auf Standard-Displays exakt einem physischen Pixel, auf Retina-Displays zwei oder mehr.
Tipps für präzise Messungen
Für maximale Genauigkeit sollten Sie den Zoom Ihres Browsers auf 100 % setzen (Strg+0 bzw. Cmd+0), da Browser-Zoom die Pixelmaße verfälscht. Bei der Kalibrierung für physische Maße halten Sie ein echtes Lineal an den Bildschirm und passen den DPI-Wert an, bis die Markierungen übereinstimmen. Beachten Sie, dass Browser keine garantiert pixelgenaue Darstellung liefern — für professionelle Messungen an Druckvorlagen empfiehlt sich zusätzlich eine Software-basierte Überprüfung.
Häufig gestellte Fragen
Was ist ein Bildschirmlineal?
Ein Bildschirmlineal ist ein digitales Werkzeug, das direkt im Browser Abstände auf dem Bildschirm misst. Es zeigt Pixel, Zentimeter, Millimeter und Zoll an. Besonders nützlich für Webdesigner, Grafiker und UI-Entwickler, die pixelgenaue Abstände zwischen Elementen messen müssen — ohne eine Desktop-Anwendung installieren zu müssen.
Wie genau ist das Online-Bildschirmlineal?
In Pixeln ist die Messung exakt. Für physische Einheiten (cm, mm, Zoll) hängt die Genauigkeit vom DPI-Wert des Monitors ab. Browser melden standardmäßig 96 CSS-DPI — das entspricht selten der echten Bildschirmauflösung. Mit der Kalibrierungsfunktion (Kreditkarte als Referenz) können Sie den DPI-Wert präzise ermitteln.
Wie kalibriere ich den DPI-Wert meines Bildschirms?
Halten Sie eine Standard-Kreditkarte (85,6 mm breit) an den Bildschirm und vergleichen Sie sie mit dem angezeigten Referenz-Rechteck. Alternativ messen Sie die Pixelbreite der Karte und geben sie im Kalibrierungsbereich ein. Das Tool berechnet daraus den tatsächlichen DPI-Wert und speichert ihn für zukünftige Besuche.
Was ist DPI und warum ist es wichtig?
DPI (Dots per Inch) beschreibt, wie viele Pixel einem physischen Zoll auf Ihrem Bildschirm entsprechen. Standard-Monitore haben typisch 90–110 DPI, während Retina-Displays 200+ DPI aufweisen. Ohne korrekten DPI-Wert sind Umrechnungen zwischen Pixel und physischen Einheiten (cm, Zoll) ungenau.
Wie rechne ich Pixel in Zentimeter um?
Die Formel lautet: cm = Pixel × 2,54 ÷ DPI. Bei einem Standard-DPI von 96 sind 100 Pixel ≈ 2,65 cm. Nutzen Sie den Einheiten-Tab für automatische Umrechnung aller gängigen Einheiten.
Kann ich das Tool auf dem Handy nutzen?
Ja, das Bildschirmlineal funktioniert auch auf Mobilgeräten. Touchscreen-Messungen sind allerdings weniger präzis als Maus-basierte Messungen am Desktop. Das Lineal und die Einheiten-Umrechnung funktionieren überall, die Abstandsmessung ist am Desktop am genauesten.
Was ist der Unterschied zwischen px, pt und em?
Pixel (px) sind absolute Bildschirmeinheiten. Punkt (pt) ist eine typografische Einheit — 1 pt = 1/72 Zoll. Em und rem sind relative CSS-Einheiten: 1 em entspricht der aktuellen Schriftgröße des Elements, 1 rem der Wurzel-Schriftgröße (standardmäßig 16 px im Browser).