Textstil-Probe sammeln
Oeffne die Website und kopiere relevante CSS-Regeln, Inline-Styles oder berechnete Werte aus DevTools. Fuer Live-Daten nutze das Snippet auf einer Seite, die du pruefen darfst.
Schriftgroessen-Detektor fuer Websites
Fuege CSS-Regeln oder Computed-Style-JSON aus deinem Browser ein, um Schriftgroessen einer Webseite zu erkennen. Das Tool wandelt rem, em, Prozent, pt und px in eine uebersichtliche Pixel-Tabelle um und zeigt line-height, Gewicht und Farbe.
Interaktives Tool
Schriftgroesse aus CSS oder Browser-Ausgabe pruefen
Dieser Schriftgroessen-Detektor ist fuer echte Website-Audits gedacht. Fuege CSS, Inline-Styles oder JSON aus dem Browser-Snippet ein. Er ruft keine privaten Seiten ab und umgeht keine Sicherheit, sondern analysiert Stile, die du bereits einsehen kannst.
- Wandelt rem, em, Prozent, pt und px in vergleichbare Pixelwerte um.
- Zeigt Selektor, line-height, font-weight und Farbe neben jedem Ergebnis.
- Funktioniert mit CSS und Computed-Style-JSON von Seiten, die du kontrollierst.
- Trennt Screenshot-Fonterkennung klar von Live-CSS-Groessenpruefung.
Regeln
0
Bereich
-
Haeufig
-
| Selektor | Groesse | Berechnet px | Line-height | Gewicht | Farbe |
|---|
So nutzt du den Schriftgroessen-Detektor
Basisgroesse setzen
Viele Websites nutzen 16px als Root-Groesse, manche Designsysteme nicht. Setze den Basiswert, damit rem, em und Prozent realistisch umgerechnet werden.
Typografie-Tabelle vergleichen
Pruefe Selektor, deklarierte Groesse, berechnete Pixel, line-height, Gewicht und Farbe zusammen, um Inkonsistenzen schneller zu finden.
Wann ein Website-Schriftgroessen-Checker hilft
Fuege CSS-Regeln oder Computed-Style-JSON aus deinem Browser ein, um Schriftgroessen einer Webseite zu erkennen. Das Tool wandelt rem, em, Prozent, pt und px in eine uebersichtliche Pixel-Tabelle um und zeigt line-height, Gewicht und Farbe.
Landingpage-Typografie auditieren
Pruefe, ob Headlines, Subheads, Buttons, Karten und FAQ-Text einer konsistenten Skala folgen.
CSS-Einheiten in Pixel uebersetzen
Design-Handoffs mischen oft rem, em, Prozent und px. Dieses Tool macht sie vergleichbar.
Responsive Schriftproben pruefen
Fuege Desktop- und Mobile-CSS getrennt ein, um Groessen ueber Breakpoints zu vergleichen.
Groesse mit Gewicht und Farbe koppeln
Line-height, Gewicht und Farbe erklaeren oft, warum Text eng, schwer oder blass wirkt.
Schriftgroessen-Detektor vs Font Finder vs DevTools
Dieser Schriftgroessen-Detektor ist fuer echte Website-Audits gedacht. Fuege CSS, Inline-Styles oder JSON aus dem Browser-Snippet ein. Er ruft keine privaten Seiten ab und umgeht keine Sicherheit, sondern analysiert Stile, die du bereits einsehen kannst.
Schriftgroessen-Detektor fuer Websites
Dieser Schriftgroessen-Detektor ist fuer echte Website-Audits gedacht. Fuege CSS, Inline-Styles oder JSON aus dem Browser-Snippet ein. Er ruft keine privaten Seiten ab und umgeht keine Sicherheit, sondern analysiert Stile, die du bereits einsehen kannst.
- Wandelt rem, em, Prozent, pt und px in vergleichbare Pixelwerte um.
- Zeigt Selektor, line-height, font-weight und Farbe neben jedem Ergebnis.
- Funktioniert mit CSS und Computed-Style-JSON von Seiten, die du kontrollierst.
- Trennt Screenshot-Fonterkennung klar von Live-CSS-Groessenpruefung.
Am besten fuer: Schriftgroesse aus CSS oder Browser-Ausgabe pruefen
Font Finder
Use image-based font detection when the text is in a screenshot, logo, or flattened image.
- Best for screenshots and logos
- Returns probable font names
- Useful when CSS is unavailable
- Less precise for CSS size
Am besten fuer: image font identification
DevTools
Browser DevTools gives exact values for one live element, while this page helps compare several samples in one table.
- Exact live values
- Good for debugging
- Slower for many samples
- Requires access to the page
Am besten fuer: single-element inspection
Schriftgroesse aus CSS oder Browser-Ausgabe pruefen
Dieser Schriftgroessen-Detektor ist fuer echte Website-Audits gedacht. Fuege CSS, Inline-Styles oder JSON aus dem Browser-Snippet ein. Er ruft keine privaten Seiten ab und umgeht keine Sicherheit, sondern analysiert Stile, die du bereits einsehen kannst. Der Detektor ist besonders nuetzlich, wenn ein Designsystem nicht dokumentiert ist oder mehrere Teams an derselben Website gearbeitet haben. Statt einzelne Elemente im Browser zu vergleichen, kannst du CSS-Proben aus Header, Hero, Karten, Formularen und Footer nebeneinander auswerten. So siehst du sofort, ob Textgroessen logisch abgestuft sind oder ob einzelne Bereiche aus der Reihe fallen.
Wann ein Website-Schriftgroessen-Checker hilft
Fuege CSS-Regeln oder Computed-Style-JSON aus deinem Browser ein, um Schriftgroessen einer Webseite zu erkennen. Das Tool wandelt rem, em, Prozent, pt und px in eine uebersichtliche Pixel-Tabelle um und zeigt line-height, Gewicht und Farbe. Bei Relaunches hilft die Tabelle, alte Seiten sauber nachzubauen. Du kannst die wichtigste Typografie erfassen, Groessen in Pixel normalisieren und daraus eine kleine Referenz fuer Entwickler, Designer oder Content-Teams erstellen. Das reduziert Rueckfragen und verhindert, dass mobile oder sekundare Textstile uebersehen werden.
Schriftgroessen-Detektor vs Font Finder vs DevTools
Use this workflow when the question is CSS size, not only the font name. Die Umrechnung ist bewusst transparent. Wenn ein Wert aus rem, em oder Prozent nur eine Naeherung ist, bleibt der deklarierte Originalwert sichtbar. Fuer die genaueste Pruefung kannst du computed-style JSON aus dem Browser einfuegen und die Ergebnisse dann mit dem geschatzten CSS-Block vergleichen.
FAQ zum Schriftgroessen-Detektor
Wie pruefe ich die Schriftgroesse auf einer Website?
Inspiziere den Text im Browser, kopiere CSS oder Computed Styles und fuege sie hier ein. Das Tool liest font-size und wandelt Einheiten in Pixel um.
Kann das Tool jede URL automatisch scannen?
Nein. Ein statisches Tool kann keine Cross-Origin-Regeln, private Seiten oder Sicherheit umgehen. Kopiere deshalb Stile von Seiten, auf die du Zugriff hast.
Was ist der Unterschied zwischen deklarierter Groesse und berechnetem px?
Deklariert ist der originale CSS-Wert wie 1.25rem. Berechnetes px ist die Umrechnung auf Basis des gewaehlten Basiswerts.
Funktioniert es mit rem und em?
Ja. rem und em werden mit dem Basiswert umgerechnet. Bei em kann der echte Browserwert vom Elternelement abhaengen.
Warum line-height, Gewicht und Farbe?
Lesbarkeit haengt nicht nur von Groesse ab. Diese Werte helfen, enge, schwere oder kontrastarme Texte zu erkennen.
Soll ich dieses Tool oder einen Bild-Font-Detektor nutzen?
Nutze diese Seite fuer CSS-Schriftgroessen. Nutze den Bilddetektor, wenn du nur Screenshot, Logo oder Bild hast.
Wie pruefe ich responsive Schriftgroessen?
Pruefe zuerst die Root-Groesse der Seite. Wenn sie nicht 16px ist, passe den Basiswert an. Fuer responsive Seiten ist es sinnvoll, je eine Probe pro Breakpoint zu analysieren, weil CSS media queries die Groessen deutlich veraendern koennen.
Ersetzt das Tool ein Designsystem?
Nein. Verwende die Tabelle als Audit- und Kommunikationshilfe, nicht als automatische Designentscheidung. Gute Typografie beruecksichtigt Layoutbreite, Sprache, Zeilenlaenge, Kontrast und Nutzerkontext.