modern font stacks

Moderne Schriftstapel

System Schriftart Stack CSS organisiert nach Schriftklassifizierung für jedes moderne Betriebssystem

Die schnellsten Schriftarten. Kein Download, keine Layoutverschiebungen, keine Blitze - nur sofortige Rendern.

---

System UI · Übergangs · alter Stil · Humanist · Geometrischer Humanist

Klassischer Humanist · Neo-Grotesque · Monospace Slab Serife · Monospace Code

Industrielle · abgerundete Sans · Platte Serife · antik · didone · handgeschrieben

---

Zusätzliche Funktionen / Betriebssystemunterstützung / Plugins und Erweiterungen

System UI

System UI -Schriftarten sind diejenigen, die in der Schnittstelle des Betriebssystems nativ sind. Sie sind in kleinen Größen sehr lesbar und leicht zu lesen, enthalten viele Schriftgewichte und sind ideal für UI -Elemente.

CSS -Schriftstapel

 font-family : system-ui , sans-serif;

Sehen Sie sich in Ihrem Browser an (Artikelansicht / Zeichen)

? Vorschau -Rendering über Betriebssysteme hinweg

✅ Schriftgewichte & Notizen

Schriftgewichte	100	200	300	400	500	600	700	800	900
San Francisco	●	●	●	●	●	●	●	●	●
Segoe ui	●	●	●	●	●	●	●	●	●
Roboto	●	●	●	●	●	●	●	●	●
Ubuntu	●		●	●	●		●
Cantarell	●		●	●			●	●
Noto Sans	●	●	●	●	●	●	●	●	●

Notizen

• Die System UI ist weniger ein Schriftstapel als vielmehr ein CSS-Wert, system-ui , was die Standard-Benutzeroberfläche der Benutzeroberfläche darstellt. Es wird allgemein auf allen modernen Betriebssystemen unterstützt.
• Die gezeigten Schriftarten sind die Standardschriften für die Benutzeroberfläche in jedem modernen Betriebssystem.

Zurück nach oben ↑

Übergang

Übergangsforschung sind eine Mischung zwischen alten und modernen Schriften, die während der Aufklärung entwickelt wurden. Eines der berühmtesten Beispiele für eine Übergangsschrift ist Times New Roman, die für die Zeitung Times of London entwickelt wurde.

CSS -Schriftstapel

 font-family : Charter , 'Bitstream Charter' , 'Sitka Text' , Cambria , serif;

Sehen Sie sich in Ihrem Browser an (Artikelansicht / Zeichen)

? Vorschau -Rendering über Betriebssysteme hinweg

✅ Schriftgewichte & Notizen

Schriftgewichte	100	200	300	400	500	600	700	800	900
Charta				●			●		●
Bitstream -Charta				●			●
Sitka Text				●			●
Cambria				●			●
Noto Serif¹				●			●

Notizen

• Charter ist eine fantastische und zeitlose Schrift, die 1987 von Matthew Carter für 300DPI-Faxgeräte mit niedriger Auflösung und Laserdrucker entworfen wurde. Es hat eine große X-Höhe, die bei der Lesbarkeit hilft und auf den heutigen Bildschirmen wunderschön hält.
• Charter für MacOS hat einen seltsamen, nicht bahnbrechenden Raum (   ). Dieser Fehler wurde Apple gemeldet.
• Sitka ist eine weitere schöne Schrift, die von Matthew Carter entworfen wurde und die Charta leicht ähnelt. Sitka wurde in den erweiterten Lesetechnologien von Microsoft in Zusammenarbeit konzipiert, um die Lesbarkeit zu optimieren.
• Android verwendet Noto Serif als Standard serif , sodass Sie im Stapel nicht angegeben werden müssen.

Zurück nach oben ↑

Alter Stil

Schriften im alten Stil sind durch diagonale Spannung, einen geringen Kontrast zwischen dicken und dünnen Strichen und abgerundeten Serifen gekennzeichnet und wurden in der Renaissance -Periode entwickelt. Eines der berühmtesten Beispiele für eine Schrift im alten Stil ist Garamond.

CSS -Schriftstapel

 font-family : 'Iowan Old Style' , 'Palatino Linotype' , 'URW Palladio L' , P052 , serif;

Sehen Sie sich in Ihrem Browser an (Artikelansicht / Zeichen)

? Vorschau -Rendering über Betriebssysteme hinweg

✅ Schriftgewichte & Notizen

Schriftgewichte	100	200	300	400	500	600	700	800	900
Iowan alter Stil				●			●		●
Palatino -Linotyp				●			●
Urw Palladio l				●			●
P052				●			●
Noto Serif¹				●			●

Notizen

• Android verwendet Noto Serif als Standard serif , sodass Sie im Stapel nicht angegeben werden müssen.

Zurück nach oben ↑

Humanist

Humanistische Schriften sind durch ihre organischen, kalligraphischen Formen und einen geringen Kontrast zwischen dicken und dünnen Strichen gekennzeichnet. Diese Schriften sind von der Handschrift der Renaissance-Periode inspiriert und werden häufig als lesbarer und leichter angesehen als andere seriF-Schriftarten.

CSS -Schriftstapel

 font-family : Seravek , 'Gill Sans Nova' , Ubuntu , Calibri , 'DejaVu Sans' , source-sans-pro , sans-serif;

Sehen Sie sich in Ihrem Browser an (Artikelansicht / Zeichen)

? Vorschau -Rendering über Betriebssysteme hinweg

✅ Schriftgewichte & Notizen

Schriftgewichte	100	200	300	400	500	600	700	800	900
Seravek		●	●	●	●		●
Gill ohne Nova			●	●			●	●
Ubuntu	●		●	●	●		●
Calibri			●	●			●
Dejavu sans	●			●			●
Quelle ohne Pro				●		●	●

Notizen

• Gill Sans Nova ist als ergänzende herunterladbare Schriftart erhältlich.
• Source Sans Pro verwendet Namens-Sans-Pro unter Android, sodass diese Schrift nur auf Android-Geräte abzielt.

Zurück nach oben ↑

Geometrischer Humanist

Geometrische humanistische Schriften sind durch ihre sauberen, geometrischen Formen und gleichmäßigen Schlaganfallbreiten gekennzeichnet. Diese Schriften werden häufig als modern und schlank angesehen und werden häufig für Schlagzeilen und andere Anzeigzwecke verwendet. Futura ist ein berühmtes Beispiel für diese Klassifizierung.

CSS -Schriftstapel

 font-family : Avenir , Montserrat , Corbel , 'URW Gothic' , source-sans-pro , sans-serif;

Sehen Sie sich in Ihrem Browser an (Artikelansicht / Zeichen)

? Vorschau -Rendering über Betriebssysteme hinweg

✅ Schriftgewichte & Notizen

Schriftgewichte	100	200	300	400	500	600	700	800	900
Avenir			●	●	●			●	●
Montserrat	●	●	●	●	●	●	●	●	●
Konsole			●	●			●
Urw Gothic			●			●
Quelle ohne Pro				●		●	●

Notizen

• Avenir wurde als nächstes über Avenir für macOS ausgewählt, da das Gewicht 300 im Internet über das 200 -Gewicht, das Avenir als nächstes hat, viel lesbarer ist. Wenn Sie nach einem ultraleichten oder ultra-schwarzen suchen, können Sie Avenir als nächstes gegen Avenir austauschen.
• Source Sans Pro verwendet Namens-Sans-Pro unter Android, sodass diese Schrift nur auf Android-Geräte abzielt.

Zurück nach oben ↑

Klassischer Humanist

Klassische humanistische Schriftarten sind gekennzeichnet, wie sich die Striche auf subtile Weise vergrößern, wenn sie die Schlaganfallanschlüsse erreichen, ohne in einer Serife zu enden. Diese Schriften sind von klassischen römischen Hauptstädten und dem Steinschnitzer auf Renaissance-Period-Grabsteinen inspiriert.

CSS -Schriftstapel

 font-family : Optima , Candara , 'Noto Sans' , source-sans-pro , sans-serif;

Sehen Sie sich in Ihrem Browser an (Artikelansicht / Zeichen)

? Vorschau -Rendering über Betriebssysteme hinweg

✅ Schriftgewichte & Notizen

Schriftgewichte	100	200	300	400	500	600	700	800	900
Optima				●			●		●
Candara			●	●			●
Noto Sans	●	●	●	●	●	●	●	●	●
Quelle ohne Pro				●		●	●

Notizen

• Source Sans Pro verwendet Namens-Sans-Pro unter Android, sodass diese Schrift nur auf Android-Geräte abzielt.

Zurück nach oben ↑

Neo-Groteske

Neo-Grotesque-Schriften sind ein Sans-Serif-Stil, der im späten 19. und frühen 20. Jahrhundert entwickelt wurde und durch seine sauberen, geometrischen Formen und gleichmäßigen Schlaganfallbreiten gekennzeichnet ist. Eines der berühmtesten Beispiele für eine Neo-Grotesque-Schrift ist Helvetica.

CSS -Schriftstapel

 font-family : Inter , Roboto , 'Helvetica Neue' , 'Arial Nova' , 'Nimbus Sans' , Arial , sans-serif;

Sehen Sie sich in Ihrem Browser an (Artikelansicht / Zeichen)

? Vorschau -Rendering über Betriebssysteme hinweg

✅ Schriftgewichte & Notizen

Schriftgewichte	100	200	300	400	500	600	700	800	900
Inter	●	●	●	●	●	●	●	●	●
Roboto	●	●	●	●	●	●	●	●	●
Helvetica Neue	●	●	●	●	●	●	●
Arial Nova			●	●			●
Nimbus sans				●		●	●
Arial				●		●	●

Notizen

• Arial Nova ist als ergänzende herunterladbare Schriftart erhältlich.
• Roboto wird für Linux (MX Linux, Elementaryos usw.) und Handbuch Installationen verwendet. Es wird Roboto nicht auf Android rendern, aber Androids generisches Sans-Serif wird.

Zurück nach oben ↑

Monospace Slab Serife

Die monospace-Platten-Serifenarten sind durch ihre festen Breitenbuchstaben gekennzeichnet, die unabhängig von ihrer Form die gleiche Breite haben, und ihre einfachen, geometrischen Formen. Wird verwendet, um die Schreibmaschinenausgabe für Berichte, tabellarische Arbeit und technische Dokumentation zu emulieren.

CSS -Schriftstapel

 font-family : 'Nimbus Mono PS' , 'Courier New' , monospace;

Sehen Sie sich in Ihrem Browser an (Artikelansicht / Zeichen)

? Vorschau -Rendering über Betriebssysteme hinweg

✅ Schriftgewichte & Notizen

Schriftgewichte	100	200	300	400	500	600	700	800	900
Nimbus mono ps				●			●
Kurier neu				●			●
Schneidenmono				●

Notizen

• Nimbus mono ps wird zuerst spezifiziert, weil viele Linux -Distribünen Namen Alias für Kurier neu erstellen und nicht immer eine Slab -Serif repräsentieren
• Cutive Mono muss im Stapel nicht vertreten werden, da Android einen Namen Alias für Courier New erstellt.
• Schneidenmono hat leider nur ein Gewicht

Zurück nach oben ↑

Monospace Code

Monospace -Code -Schriftarten wurden speziell für die Verwendung in der Programmierung und anderen technischen Anwendungen entwickelt. Diese Schriften sind durch ihr monospatisiertes Design gekennzeichnet, was bedeutet, dass alle Buchstaben und Zeichen die gleiche Breite und ihre klaren, lesbaren Formen haben.

CSS -Schriftstapel

 font-family : ui-monospace , 'Cascadia Code' , 'Source Code Pro' , Menlo , Consolas , 'DejaVu Sans Mono' , monospace;

Sehen Sie sich in Ihrem Browser an (Artikelansicht / Zeichen)

? Vorschau -Rendering über Betriebssysteme hinweg

✅ Schriftgewichte & Notizen

Schriftgewichte	100	200	300	400	500	600	700	800	900
SF Mono			●	●	●	●	●	●
Cascadia -Code	●	●	●	●		●	●
Quellcode Pro		●	●	●	●	●	●	●
Menlo				●			●
Konsolas				●			●
Dejavu sans mono				●			●
Droid ohne Mono				●

Notizen

• SF Mono ist nur über ui-monospace auf macOS 10.15+ und iOS 13.3+ erhältlich, während Sie Safari verwenden
• Droid ohne Mono für Android muss im Stapel nicht angegeben werden, da monospace ein Name -Alias dafür ist

Zurück nach oben ↑

Industriell

Industrielle Schriften stammen aus dem späten 19. Jahrhundert und wurden in dieser Zeit stark von den Fortschritten in Technologie und Industrie beeinflusst. Industrielle Schriften zeichnen sich durch ihre kühnen, seriF-Buchstabenformen, das einfache und unkomplizierte Erscheinungsbild und die Verwendung von geraden Linien und geometrischen Formen aus.

CSS -Schriftstapel

 font-family : Bahnschrift , 'DIN Alternate' , 'Franklin Gothic Medium' , 'Nimbus Sans Narrow' , sans-serif-condensed , sans-serif;

Sehen Sie sich in Ihrem Browser an (Artikelansicht / Zeichen)

? Vorschau -Rendering über Betriebssysteme hinweg

✅ Schriftgewichte & Notizen

Schriftgewichte	100	200	300	400	500	600	700	800	900
Bahnschrift	●	●	●	●	●	●	●	●	●
Din Alternative							●
Franklin Gothic Medium					●
Nimbus ohne schmal				●			●
Roboto kondensiert	●	●	●	●	●	●	●	●	●

Notizen

• Da dieser Stapel auf den Betriebssystemen in den Gewichten begrenzt ist, kann es am besten als mittel-/fetthaltige Display -Schriftart verwendet werden
• Bahnschrift ist eine der ersten variablen Schriftarten, die Windows hinzugefügt wurden.
• Roboto Condensed verwendet unter Android den Namen sans-serif-kondensiert, sodass diese Schrift nur auf Android-Geräte abzielt.

Zurück nach oben ↑

Abgerundete Sans

Rundete Schriften sind durch die abgerundeten gekrümmten Buchstabenformen gekennzeichnet und verleihen ein weicheres, freundlicheres Erscheinungsbild. Die abgerundeten Kanten vermitteln der Schrift ein organischeres und verspielteres Gefühl, was es für informelle oder kinderfreundliche Designs geeignet ist. Der abgerundete Sans-Serif-Stil ist seit den 1950er Jahren beliebt und wird weiterhin in Werbe-, Branding- und anderen Formen des Grafikdesigns verwendet.

CSS -Schriftstapel

 font-family : ui-rounded , 'Hiragino Maru Gothic ProN' , Quicksand , Comfortaa , Manjari , 'Arial Rounded MT' , 'Arial Rounded MT Bold' , Calibri , source-sans-pro , sans-serif;

Sehen Sie sich in Ihrem Browser an (Artikelansicht / Zeichen)

? Vorschau -Rendering über Betriebssysteme hinweg

✅ Schriftgewichte & Notizen

Schriftgewichte	100	200	300	400	500	600	700	800	900
SF Pro rund	●	●	●	●	●	●	●	●	●
Hiragino Maru Gotic				●
Treibsand			●	●			●
Comfortaa			●	●			●
Manjari	●			●			●
Arial abgerundeter mt							●
Arial abgerundet mt mutig							●
Calibri			●	●			●
Quelle ohne Pro				●		●	●

Notizen

• SF Pro Rounded ist nur über ui-rounded auf macOS 10.15+ und iOS 13.3+ erhältlich, während Sie Safari verwenden
• Hiragino Maru Gothic ist technisch gesehen eine japanische Schrift, unterstützt jedoch alle lateinischen Charaktere. Die Mac -Schriftart enthält keinen Fettdruck, sodass auf dem Bildschirm ein Faux -Fettdruck angezeigt wird.
• Arial gerundeter MT wird für Fenster benötigt, während Arial abgerundeter MT -Fett für iOS-, Mac- und ältere Windows -Installationen benötigt wird
• Source Sans Pro verwendet Namens-Sans-Pro unter Android, sodass diese Schrift nur auf Android-Geräte abzielt. Es ist keine abgerundete Schrift, aber hier besser als Roboto.

Zurück nach oben ↑

Platte Serife

Slab-Serif-Schriften sind durch das Vorhandensein dicker, blockähnlicher Serife an den Enden jeder Buchstabenform gekennzeichnet. Diese Serifen sind normalerweise ohne Abstand, was bedeutet, dass sie keine gekrümmten oder sich verjüngenden Übergänge zum Hauptstrich des Briefes haben.

CSS -Schriftstapel

 font-family : Rockwell , 'Rockwell Nova' , 'Roboto Slab' , 'DejaVu Serif' , 'Sitka Small' , serif;

Sehen Sie sich in Ihrem Browser an (Artikelansicht / Zeichen)

? Vorschau -Rendering über Betriebssysteme hinweg

✅ Schriftgewichte & Notizen

Schriftgewichte	100	200	300	400	500	600	700	800	900
Rockwell				●			●
Rockwell Nova			●	●			●	●
Roboto -Platte	●		●	●			●
Dejavu Serif				●			●
Sitka klein				●			●
Noto Serif				●			●

Notizen

• Rockwell ist in Windows Office enthalten
• Rockwell Nova ist als ergänzende herunterladbare Schriftart erhältlich.
• Android verwendet Noto Serif als Standard serif , sodass Sie im Stapel nicht angegeben werden müssen.

Zurück nach oben ↑

Antiquität

Antike Schriften, auch als Ägypter bekannt, sind eine Untergruppe von Serifenformen, die im 19. Jahrhundert beliebt waren. Sie zeichnen sich durch ihre blockartigen Serife und dicken gleichmäßigen Schlaganfallgewicht aus.

CSS -Schriftstapel

 font-family : Superclarendon , 'Bookman Old Style' , 'URW Bookman' , 'URW Bookman L' , 'Georgia Pro' , Georgia , serif;

Sehen Sie sich in Ihrem Browser an (Artikelansicht / Zeichen)

? Vorschau -Rendering über Betriebssysteme hinweg

✅ Schriftgewichte & Notizen

Schriftgewichte	100	200	300	400	500	600	700	800	900
Superclarendon			●	●			●		●
Bookman alter Stil				●			●
Urw Bookman			●			●
Georgia Pro			●	●		●	●		●
Georgia				●			●
Noto Serif¹				●			●

Notizen

• Georgia Pro ist als ergänzende herunterladbare Schriftart erhältlich.
• Android verwendet Noto Serif als Alias für Georgia , sodass im Stapel nicht angegeben werden muss.

Zurück nach oben ↑

Didone

Didone -Schriften, auch als moderne Schriften bekannt, sind durch den hohen Kontrast zwischen dicken und dünnen Strichen, vertikaler Spannung und Haaranfängern ohne Klammung gekennzeichnet. Der Didone -Stil entstand im späten 18. Jahrhundert und wurde im 19. Jahrhundert an Popularität gewonnen.

CSS -Schriftstapel

 font-family : Didot , 'Bodoni MT' , 'Noto Serif Display' , 'URW Palladio L' , P052 , Sylfaen , serif;

Sehen Sie sich in Ihrem Browser an (Artikelansicht / Zeichen)

? Vorschau -Rendering über Betriebssysteme hinweg

✅ Schriftgewichte & Notizen

Schriftgewichte	100	200	300	400	500	600	700	800	900
Didot				●			●
Bodoni Mt				●			●		●
Noto Serif Display	●	●	●	●	●	●	●	●	●
Urw Palladio l				●			●
P052				●			●
Sylfaen				●
Noto Serif¹				●			●

Notizen

• Android verwendet Noto Serif als Standard serif , sodass Sie im Stapel nicht angegeben werden müssen.
• Sylfaen enthält keinen Fettdruck, sodass auf dem Bildschirm ein Faux -Fettdruck angezeigt wird.

Zurück nach oben ↑

Handgeschrieben

Handgeschriebene Schriften sind so konzipiert, dass sie das Erscheinungsbild und das Gefühl der Handschrift nachahmen. Trotz der Vielzahl von Handschriftstilen neigen dieser Schriftart Stapel dazu, einen informelleren und alltäglichen Stil der Handschrift zu veranlassen.

CSS -Schriftstapel

 font-family : 'Segoe Print' , 'Bradley Hand' , Chilanka , TSCu_Comic , casual , cursive;

Sehen Sie sich in Ihrem Browser an (Artikelansicht / Zeichen)

? Vorschau -Rendering über Betriebssysteme hinweg

✅ Schriftgewichte & Notizen

Schriftgewichte	100	200	300	400	500	600	700	800	900
Segoe Druck				●			●
Bradley Hand							●
Chilanka				●
Tscu_comic				●
Bald kommen				●

Notizen

• In Kürze wird der Name Casual unter Android verwendet, sodass diese Schrift nur auf Android -Geräte abzielt.

Zurück nach oben ↑

Zusätzliche Funktionen

Emoji -Unterstützung

Möchten Sie Ihrer Seite einheimische Emojis hinzufügen? Gehen Sie diese Schriftarten am Ende Ihres Schriftartstapels an:

 'Apple Color Emoji' , 'Segoe UI Emoji' , 'Segoe UI Symbol' , 'Noto Color Emoji' 

Anti-Aliasing

Rendern Sie Ihren Text mit Anti-Aliasing mit diesen CSS-Eigenschaften:

 html {
  -webkit-font-smoothing : antialiased;
  -moz-osx-font-smoothing : grayscale;
}

Betriebssystemunterstützung

• Windows 7 oder neuer
• Android 10 oder neuer (sehr begrenzt mit 8 Schriftarten)
• iOS 9.3 oder neuer
• macOS 10.9 (Mavericks) oder neuer
• Linux (abgetastet 12 beliebte Distributionen)

Zurück nach oben ↑

Plugins und Erweiterungen

• Moderne Schriftstapel für Rückenwind -CSS von Borisanthony
• Moderne Schriftstapel für WordPress durch LittleBighing
• Moderne Schriftstapel werden von Webstudio nativ unterstützt

Zurück nach oben ↑