Modern Font Stacks - สแตกฟอนต์ที่ใช้ฟอนต์ระบบ

• มี CSS ของสแตกฟอนต์ที่ใช้ 'ฟอนต์ระบบ' ของระบบปฏิบัติการสมัยใหม่ให้ใช้งาน
• เนื่องจากเป็นฟอนต์ที่มีมาในระบบอยู่แล้ว จึงไม่ต้องดาวน์โหลดเว็บฟอนต์ ทำให้สร้างหน้าเว็บที่โหลดได้รวดเร็ว
• มีแบบอักษร 15 ประเภท
  • System UI : ฟอนต์ UI พื้นฐานของระบบปฏิบัติการ
    • font-family: system-ui, sans-serif;
    • บน Mac/iOS จะใช้ San Francisco, บน Windows ใช้ Segoe UI, บน Android ใช้ Roboto, บน Linux ใช้ Ubuntu เป็นต้น
  • Transitional : การผสมผสานระหว่างความใหม่และความเก่า
    • font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
  • Old Style : ฟอนต์ยุคเรอเนซองส์ที่มีจุดเด่นเป็น serif ทรงโค้งมน
    • font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
  • Humanist : รูปทรงคัลลิกราฟีที่เป็นธรรมชาติ ได้แรงบันดาลใจจากลายมือยุคเรอเนซองส์ อ่านง่ายกว่าซานส์เซอริฟหลายแบบ
    • font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
  • Geometric Humanist : มีลักษณะเด่นคือความหนาของเส้นที่สม่ำเสมอ จึงมักใช้กับพาดหัว
    • font-family: Avenir, 'Avenir Next LT Pro', Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
  • Classical Humanist : ไม่ได้จบเส้นด้วย serif แต่จะค่อยๆ กว้างขึ้นเล็กน้อยที่ปลายเส้น
    • font-family: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
  • Neo-Grotesque : สไตล์ซานส์เซอริฟที่พัฒนาขึ้นช่วงปลายศตวรรษที่ 19 ถึงต้นศตวรรษที่ 20
    • font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
  • Monospace Slab Serif : ตัวอักษรความกว้างคงที่ เรียบง่าย ใช้จำลองงานพิมพ์ดีดในรายงาน ตาราง และเอกสารเทคนิค
    • font-family: 'Nimbus Mono PS', 'Courier New', 'Cutive Mono', monospace;
  • Monospace Code : สำหรับการเขียนโปรแกรม เป็นฟอนต์ความกว้างคงที่และอ่านง่าย
    • font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  • Industrial : เริ่มขึ้นในช่วงปลายศตวรรษที่ 19 เป็นซานส์เซอริฟตัวหนา รูปทรงเรียบง่ายและตรงไปตรงมา
    • font-family: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
  • Rounded Sans : เส้นโค้งมน ให้ความรู้สึกนุ่มนวลและเป็นมิตร เหมาะกับเด็ก
    • font-family: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
  • Slab Serif : มี serif หนาเป็นทรงบล็อกที่ปลายตัวอักษร
    • font-family: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
  • Antique : เคยได้รับความนิยมในศตวรรษที่ 19 มีจุดเด่นเป็น serif แบบบล็อกและความหนาเส้นที่หนาและสม่ำเสมอ
    • font-family: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
  • Didone : ฟอนต์สมัยใหม่ เส้นหนา และมี serif แบบเส้นผมที่ไม่มี bracketing
    • font-family: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;
  • Handwritten : ลายมือ
    • font-family: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive;

[xguru]

ถ้าดูจากหน้า GitHub ก็สามารถเปรียบเทียบได้อย่างง่ายดายว่าแต่ละ OS แสดงผลอย่างไร
https://github.com/system-fonts/modern-font-stacks