modern font stacks

Tumpukan Font Modern

System Font Stack CSS yang diselenggarakan oleh klasifikasi jenis huruf untuk setiap OS modern

Font tercepat yang tersedia. Tidak ada unduhan, tidak ada tata letak shift, tidak ada flash - hanya render instan.

---

Sistem UI · Transisi · Gaya Lama · Humanis · Humanis Geometris

Humanis Klasik · Neo-Grotesque · Monospace Slab Serif · Monospace Code

Industri · Sans bundar · Slab Serif · Antik · Didone · Tulisan Tangan

---

Fitur tambahan / dukungan sistem operasi / plugin dan ekstensi

Sistem UI

Font Sistem UI adalah yang asli dari antarmuka sistem operasi. Mereka sangat terbaca dan mudah dibaca dengan ukuran kecil, mengandung banyak bobot font, dan sangat ideal untuk elemen UI.

Tumpukan Font CSS

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

Lihat di browser Anda (Tampilan Artikel / Karakter)

? Pratinjau rendering di seluruh sistem operasi

✅ Bobot & Catatan Font

Bobot font	100	200	300	400	500	600	700	800	900
San Francisco	●	●	●	●	●	●	●	●	●
Segoe Ui	●	●	●	●	●	●	●	●	●
Roboto	●	●	●	●	●	●	●	●	●
Ubuntu	●		●	●	●		●
Cantarell	●		●	●			●	●
Noto sans	●	●	●	●	●	●	●	●	●

Catatan

• System UI kurang dari tumpukan font dan lebih dari nilai CSS, system-ui , mewakili font antarmuka pengguna default. Ini banyak didukung pada semua sistem operasi modern.
• Font yang ditampilkan adalah font default untuk UI di setiap OS modern.

Kembali ke atas ↑

Transisi

Jenis huruf transisi adalah campuran antara gaya lama dan tipografi modern yang dikembangkan selama Pencerahan. Salah satu contoh paling terkenal dari jenis huruf transisi adalah Times New Roman, yang dikembangkan untuk surat kabar Times of London.

Tumpukan Font CSS

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

Lihat di browser Anda (Tampilan Artikel / Karakter)

? Pratinjau rendering di seluruh sistem operasi

✅ Bobot & Catatan Font

Bobot font	100	200	300	400	500	600	700	800	900
Piagam				●			●		●
Piagam Bitstream				●			●
Teks Sitka				●			●
Cambria				●			●
Noto Serif¹				●			●

Catatan

• Charter adalah jenis huruf yang fantastis dan abadi yang dirancang oleh Matthew Carter pada tahun 1987 untuk mesin faks 300DPI resolusi rendah dan printer laser. Ini memiliki height x besar membantu dengan keterbacaan, dan bertahan dengan indah di layar saat ini.
• Piagam untuk MacOS memiliki ruang non-breaking lebar yang aneh (   ). Bug ini telah dilaporkan ke Apple.
• Sitka adalah jenis huruf indah lainnya yang dirancang oleh Matthew Carter yang sedikit menyerupai piagam. Sitka dirancang dalam kolaborasi teknologi membaca canggih Microsoft untuk mengoptimalkan keterbacaan.
• Android menggunakan Noto Serif sebagai font serif default, jadi tidak perlu menentukan dalam tumpukan.

Kembali ke atas ↑

Gaya lama

Typefaces gaya lama ditandai dengan tegangan diagonal, kontras rendah antara sapuan tebal dan tipis, dan serif bulat, dan dikembangkan pada periode Renaissance. Salah satu contoh paling terkenal dari jenis huruf gaya lama adalah Garamond.

Tumpukan Font CSS

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

Lihat di browser Anda (Tampilan Artikel / Karakter)

? Pratinjau rendering di seluruh sistem operasi

✅ Bobot & Catatan Font

Bobot font	100	200	300	400	500	600	700	800	900
Gaya lama Iowan				●			●		●
Palatino Linotype				●			●
URW Palladio l				●			●
P052				●			●
Noto Serif¹				●			●

Catatan

• Android menggunakan Noto Serif sebagai font serif default, jadi tidak perlu menentukan dalam tumpukan.

Kembali ke atas ↑

Budayawan

Jenis tipe humanis ditandai dengan bentuk organik, kaligrafi dan kontras rendah antara sapuan tebal dan tipis. Tipografi ini terinspirasi oleh tulisan tangan dari periode Renaissance dan sering dianggap lebih dapat dibaca dan lebih mudah dibaca daripada tipografi sans-serif lainnya.

Tumpukan Font CSS

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

Lihat di browser Anda (Tampilan Artikel / Karakter)

? Pratinjau rendering di seluruh sistem operasi

✅ Bobot & Catatan Font

Bobot font	100	200	300	400	500	600	700	800	900
Seravek		●	●	●	●		●
Gill Sans Nova			●	●			●	●
Ubuntu	●		●	●	●		●
Calibri			●	●			●
Dejavu sans	●			●			●
Sumber Sans Pro				●		●	●

Catatan

• Gill Sans Nova tersedia sebagai font yang dapat diunduh tambahan.
• Source Sans Pro menggunakan nama sumber-sans-pro di bawah Android, jadi font ini hanya menargetkan perangkat Android.

Kembali ke atas ↑

Humanis geometris

Jenis tipe humanis geometris ditandai dengan bentuk geometris yang bersih dan lebar stroke yang seragam. Tipografi ini sering dianggap modern dan ramping dalam penampilan, dan sering digunakan untuk tajuk utama dan tujuan tampilan lainnya. Futura adalah contoh terkenal dari klasifikasi ini.

Tumpukan Font CSS

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

Lihat di browser Anda (Tampilan Artikel / Karakter)

? Pratinjau rendering di seluruh sistem operasi

✅ Bobot & Catatan Font

Bobot font	100	200	300	400	500	600	700	800	900
Avenir			●	●	●			●	●
Montserrat	●	●	●	●	●	●	●	●	●
Corbel			●	●			●
Urw gothic			●			●
Sumber Sans Pro				●		●	●

Catatan

• Avenir dipilih daripada Avenir berikutnya untuk macOS karena berat 300 jauh lebih terbaca di web selama 200 bobot yang dimiliki Avenir selanjutnya. Jika Anda mencari ultra-ringan atau ultra-hitam, jangan ragu untuk bertukar Avenir untuk Avenir berikutnya.
• Source Sans Pro menggunakan nama sumber-sans-pro di bawah Android, jadi font ini hanya menargetkan perangkat Android.

Kembali ke atas ↑

Humanis Klasik

Jenis tipe humanis klasik ditandai oleh bagaimana stroke secara halus melebar saat mereka mencapai terminal stroke tanpa berakhir dengan serif. Tipografi ini terinspirasi oleh ibu kota Romawi klasik dan ukiran batu di atas batu nisan periode Renaissance.

Tumpukan Font CSS

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

Lihat di browser Anda (Tampilan Artikel / Karakter)

? Pratinjau rendering di seluruh sistem operasi

✅ Bobot & Catatan Font

Bobot font	100	200	300	400	500	600	700	800	900
Optima				●			●		●
Candara			●	●			●
Noto sans	●	●	●	●	●	●	●	●	●
Sumber Sans Pro				●		●	●

Catatan

• Source Sans Pro menggunakan nama sumber-sans-pro di bawah Android, jadi font ini hanya menargetkan perangkat Android.

Kembali ke atas ↑

Neo-gotesque

Jenis tipe neo-got adalah gaya sans-serif yang dikembangkan pada akhir abad ke-19 dan awal abad ke-20 dan ditandai dengan bentuk geometris yang bersih dan seragam stroke. Salah satu contoh paling terkenal dari jenis huruf neo-got adalah Helvetica.

Tumpukan Font CSS

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

Lihat di browser Anda (Tampilan Artikel / Karakter)

? Pratinjau rendering di seluruh sistem operasi

✅ Bobot & Catatan Font

Bobot font	100	200	300	400	500	600	700	800	900
Antar	●	●	●	●	●	●	●	●	●
Roboto	●	●	●	●	●	●	●	●	●
Helvetica neue	●	●	●	●	●	●	●
Arial Nova			●	●			●
Nimbus Sans				●		●	●
Arial				●		●	●

Catatan

• Arial Nova tersedia sebagai font yang dapat diunduh tambahan.
• Roboto digunakan untuk Linux (MX Linux, Elementaryos, dll) dan pemasangan manual. Ini tidak akan membuat Roboto di Android, tetapi SANS-serif generik Android akan.

Kembali ke atas ↑

Serif Slab Monospace

Tipara serif slab monospace ditandai dengan huruf lebar tetap, yang memiliki lebar yang sama terlepas dari bentuknya, dan bentuk geometris yang sederhana. Digunakan untuk meniru output mesin tik untuk laporan, pekerjaan tabel, dan dokumentasi teknis.

Tumpukan Font CSS

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

Lihat di browser Anda (Tampilan Artikel / Karakter)

? Pratinjau rendering di seluruh sistem operasi

✅ Bobot & Catatan Font

Bobot font	100	200	300	400	500	600	700	800	900
Nimbus Mono PS				●			●
Kurir baru				●			●
Mono yang manis				●

Catatan

• Nimbus mono PS ditentukan terlebih dahulu karena banyak distro linux membuat nama alias untuk kurir baru dan tidak selalu mewakili serif lempengan
• Mono CITIVE tidak perlu diwakili dalam tumpukan saat Android membuat nama alias untuk Courier New.
• Sayangnya, mono, sayangnya hanya memiliki satu berat badan

Kembali ke atas ↑

Kode Monospace

Tipara kode monospace dirancang khusus untuk digunakan dalam pemrograman dan aplikasi teknis lainnya. Tipografi ini ditandai dengan desain monospaced mereka, yang berarti bahwa semua huruf dan karakter memiliki lebar yang sama, dan bentuknya yang jelas dan dapat dibaca.

Tumpukan Font CSS

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

Lihat di browser Anda (Tampilan Artikel / Karakter)

? Pratinjau rendering di seluruh sistem operasi

✅ Bobot & Catatan Font

Bobot font	100	200	300	400	500	600	700	800	900
SF Mono			●	●	●	●	●	●
Kode Cascadia	●	●	●	●		●	●
Kode Sumber Pro		●	●	●	●	●	●	●
Menlo				●			●
Konsolas				●			●
Dejavu sans mono				●			●
Droid sans mono				●

Catatan

• SF Mono hanya tersedia melalui ui-monospace di MacOS 10.15+ dan iOS 13.3+ saat menggunakan Safari
• Droid sans mono untuk android tidak perlu ditentukan dalam tumpukan karena monospace adalah nama alias untuk itu

Kembali ke atas ↑

Industri

Tipulat industri berasal dari akhir abad ke -19 dan sangat dipengaruhi oleh kemajuan teknologi dan industri selama waktu itu. Tipulat industri ditandai dengan bentuk hurufnya yang berani, sans-serif, penampilan sederhana dan langsung, dan penggunaan garis lurus dan bentuk geometris.

Tumpukan Font CSS

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

Lihat di browser Anda (Tampilan Artikel / Karakter)

? Pratinjau rendering di seluruh sistem operasi

✅ Bobot & Catatan Font

Bobot font	100	200	300	400	500	600	700	800	900
Bahnschrift	●	●	●	●	●	●	●	●	●
DIN alternatif							●
Media Franklin Gothic					●
Nimbus tidak sempit				●			●
Roboto kental	●	●	●	●	●	●	●	●	●

Catatan

• Karena tumpukan ini terbatas pada bobot di seluruh sistem operasi, yang terbaik untuk digunakan sebagai font layar sedang/tebal
• Bahnschrift adalah salah satu font variabel pertama yang ditambahkan ke Windows.
• Roboto Condensed menggunakan nama sans-serif-condensed di bawah Android, jadi font ini hanya menargetkan perangkat Android.

Kembali ke atas ↑

Sans bulat

Jenis huruf bundar ditandai oleh bentuk huruf melengkung bulat dan memberikan penampilan yang lebih lembut dan lebih ramah. Tepi bulat memberikan jenis huruf yang lebih organik dan menyenangkan, membuatnya cocok untuk digunakan dalam desain informal atau ramah anak. Gaya Sans-Serif bulat telah populer sejak tahun 1950-an, dan terus banyak digunakan dalam iklan, branding, dan bentuk desain grafis lainnya.

Tumpukan Font CSS

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

Lihat di browser Anda (Tampilan Artikel / Karakter)

? Pratinjau rendering di seluruh sistem operasi

✅ Bobot & Catatan Font

Bobot font	100	200	300	400	500	600	700	800	900
SF Pro Rounded	●	●	●	●	●	●	●	●	●
Hiragino Maru Gothic				●
Pasir apung			●	●			●
Comportaa			●	●			●
Manjari	●			●			●
Arial Rounded Mt							●
Arial Rounded Mt Bold							●
Calibri			●	●			●
Sumber Sans Pro				●		●	●

Catatan

• SF Pro Rounded hanya tersedia melalui ui-rounded di MacOS 10.15+ dan iOS 13.3+ saat menggunakan Safari
• Hiragino Maru Gothic secara teknis adalah jenis huruf Jepang tetapi memiliki dukungan untuk semua karakter Latin. Font Mac tidak termasuk tebal sehingga tebal palsu akan ditampilkan di layar.
• Arial Rounded Mt diperlukan untuk windows, sementara Mt Bold bundar Arial diperlukan untuk iOS, Mac, dan pemasangan windows yang lebih lama
• Source Sans Pro menggunakan nama sumber-sans-pro di bawah Android, jadi font ini hanya menargetkan perangkat Android. Ini bukan jenis huruf bulat, tapi lebih baik daripada Roboto di sini.

Kembali ke atas ↑

SERIF SLAB

Slab Serif Typefaces ditandai dengan adanya serif tebal, seperti blok di ujung setiap bentuk huruf. Serif ini biasanya tidak terkendali, artinya mereka tidak memiliki transisi melengkung atau meruncing ke stroke utama surat itu.

Tumpukan Font CSS

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

Lihat di browser Anda (Tampilan Artikel / Karakter)

? Pratinjau rendering di seluruh sistem operasi

✅ Bobot & Catatan Font

Bobot font	100	200	300	400	500	600	700	800	900
Rockwell				●			●
Rockwell Nova			●	●			●	●
Roboto Slab	●		●	●			●
Dejavu Serif				●			●
Sitka kecil				●			●
Noto Serif				●			●

Catatan

• Rockwell disertakan dengan Windows Office
• Rockwell Nova tersedia sebagai font yang dapat diunduh tambahan.
• Android menggunakan Noto Serif sebagai font serif default, jadi tidak perlu menentukan dalam tumpukan.

Kembali ke atas ↑

Antik

Tipefas antik, juga dikenal sebagai Mesir, adalah subset dari tipografi serif yang populer di abad ke -19. Mereka ditandai dengan serif seperti blok dan berat stroke seragam tebal.

Tumpukan Font CSS

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

Lihat di browser Anda (Tampilan Artikel / Karakter)

? Pratinjau rendering di seluruh sistem operasi

✅ Bobot & Catatan Font

Bobot font	100	200	300	400	500	600	700	800	900
Superclarendon			●	●			●		●
Bookman gaya lama				●			●
Bookman URW			●			●
Georgia Pro			●	●		●	●		●
Georgia				●			●
Noto Serif¹				●			●

Catatan

• Georgia Pro tersedia sebagai font yang dapat diunduh tambahan.
• Android menggunakan Noto Serif sebagai alias untuk Georgia , jadi tidak perlu menentukan dalam tumpukan.

Kembali ke atas ↑

Didone

Typefaces didone, juga dikenal sebagai tipografi modern, ditandai dengan kontras tinggi antara sapuan tebal dan tipis, stres vertikal, dan serif garis rambut tanpa braket. Gaya didone muncul pada akhir abad ke -18 dan mendapatkan popularitas selama abad ke -19.

Tumpukan Font CSS

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

Lihat di browser Anda (Tampilan Artikel / Karakter)

? Pratinjau rendering di seluruh sistem operasi

✅ Bobot & Catatan Font

Bobot font	100	200	300	400	500	600	700	800	900
Didot				●			●
Bodoni MT				●			●		●
Tampilan Noto Serif	●	●	●	●	●	●	●	●	●
URW Palladio l				●			●
P052				●			●
Sylfaen				●
Noto Serif¹				●			●

Catatan

• Android menggunakan Noto Serif sebagai font serif default, jadi tidak perlu menentukan dalam tumpukan.
• Sylfaen tidak termasuk tebal sehingga tebal palsu akan ditampilkan di layar.

Kembali ke atas ↑

Tulisan tangan

Typefaces tulisan tangan dirancang untuk meniru tampilan dan nuansa tulisan tangan. Terlepas dari beragam gaya tulisan tangan, tumpukan font ini cenderung mengadopsi gaya tulisan tangan yang lebih informal dan sehari -hari.

Tumpukan Font CSS

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

Lihat di browser Anda (Tampilan Artikel / Karakter)

? Pratinjau rendering di seluruh sistem operasi

✅ Bobot & Catatan Font

Bobot font	100	200	300	400	500	600	700	800	900
Segoe Print				●			●
Tangan Bradley							●
Chilanka				●
Tscu_comic				●
Segera hadir				●

Catatan

• Segera menggunakan nama kasual di bawah Android, jadi font ini hanya menargetkan perangkat Android.

Kembali ke atas ↑

Fitur tambahan

Dukungan emoji

Ingin menambahkan emoji asli ke halaman Anda? Tambahkan font ini di ujung tumpukan font Anda:

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

Anti-aliasing

Mulailah teks Anda dengan anti-aliasing dengan menggunakan sifat CSS ini:

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

Dukungan Sistem Operasi

• Windows 7 atau lebih baru
• Android 10 atau lebih baru (sangat terbatas dengan 8 font)
• iOS 9.3 atau lebih baru
• MacOS 10.9 (Mavericks) atau yang lebih baru
• Linux (sampel 12 distro populer)

Kembali ke atas ↑

Plugin dan ekstensi

• Tumpukan Font Modern untuk CSS Tailwind oleh Borisanthony
• Tumpukan Font Modern untuk WordPress oleh LittleBigthing
• Tumpukan font modern didukung secara asli oleh Webstudio

Kembali ke atas ↑