Type scale = ชุด font sizes ที่คัดสรรมาเพื่อ represent text elements ต่างๆ เพื่อสร้าง balanced harmonious composition ใน products การใช้ font sizes เดียวกันจาก type scale ของตัวเอง consistently จะ instill uniformity ใน design อัตโนมัติ และหลีกเลี่ยง product ที่ดู scattered ตรง hierarchy และ priorities
Type scale เรียกอีกอย่างว่า "typographic scale"
Restriction Enforces Consistency
Type scales ทำงานเหมือน spacing scales และ color palettes ยิ่ง design options จำกัด ยิ่ง enforce consistency ง่าย ตรงกับ how product looks และ feels Consistency = ส่วนสำคัญของการสร้าง trust กับ audience
Type scale = วิธี restrict ความเสรี ของคุณในฐานะ typographer/designer แลกกับ consistent UX ให้ audience
ยิ่ง audience ต้อง digest new information น้อย (visuals ทุกอย่าง = information ต้อง process) ยิ่งไม่สับสน ไม่เหนื่อย สิ่งสุดท้ายที่อยากให้เกิดเวลาเข้าเว็บ/ดู products = สับสน หรือ เหนื่อย
เลือก Type Scale สำหรับโปรเจกต์อย่างไร?
ไม่ว่าจะเขียน blog posts หรือ design wine labels จะทำงานกับ text elements หลายแบบ ทั้ง font sizes และบางครั้ง typefaces (font-families) ต่างกัน
ทำให้ง่าย สมมติทำงานกับ หนึ่ง typeface คำถามหลัก: ต้องการ font sizes กี่ขนาดเพื่อ represent text elements ต่างๆ ได้ optimal?
Common text element types:
- Title & Headings
- Paragraphs and lists (body text)
- Captions
- Subtitles
- Blockquotes/pull quotes
Writer มักใช้ทั้งหมด regularly
ปกติ pick หนึ่ง font size สำหรับแต่ละ text element type — headings เป็นข้อยกเว้น Designer มักใช้ 1-6 headings ขึ้นกับ project nature
Website-type projects ส่วนใหญ่ต้องการ minimum five font sizes สำหรับ scale
Picking Your Scale
สร้าง scale ยังไง? หา font sizes ให้เหมาะสมแต่ละ text element และ ensure แต่ละ element works กับ counterparts? 2 วิธี:
- ใช้ existing type scale template
- Eyeballing + trial and error
- Combo ของ 1 และ 2
Option 2 (eyeballing + trial error) ต้องเป็น experienced typographer
ถ้าไม่สบายใจหา font sizes เอง ใช้ existing type scales ที่ professional designers ทำไว้ เช่น Material Design:
Solid type scale สำหรับ beginners ดีกว่าเดาเอง แตะระวังตอนใช้ type scales ของคนอื่น รับรู้ว่า typefaces ต่างกันต้องการ type scales ต่างกัน
ไม่มี one size fits all ใน typography ถ้าใช้ existing scale เช่น Material Design อย่าใช้ blindly Material Design ใช้ Roboto typeface type scale ของพวกเขา work great สำหรับ Roboto
ถ้าใช้ font family อื่น สามารถใช้ Material Design template เป็น starting point แต่ขึ้นกับ typeface structure อาจต้อง tweak ให้ perfect
ใช้ Type Scale Generator
ใช้ type scale generator เช่น type-scale.com website เก่งนี้ เลือก mathematical scales (based on real musical scales) auto-generate CSS stylesheet
Test font-families หลายร้อย (via Google Fonts) และ 8 type scale templates สร้าง custom scale ได้ (ไม่สำหรับ beginners)
Scroll ลงอ่าน instructions การใช้ generator
แม้ไม่ guarantee แต่เกือบเสมอ harmonious result มากกว่า winging it ด้วย proven type scales จาก type-scale.com
เหตุผลที่แนะนำ combine suggestions 1 และ 2: pick existing template as starting point (Material Design หรือ scales จาก type-scale.com) แล้ว tweak ตามต้องการผ่าน trial and error
วิธีเดียวเป็น typographer ที่ดีกว่า = experimentation แตะใช้ collective knowledge ชี้ทางถูกต้องไม่ได้ทำอะไร
