ใน โพสต์ที่แล้วเราได้พูดคุยกันว่าในฐานะนักออกแบบ การเลือกแบบอักษรที่เหมาะสมเป็นสิ่งสำคัญในการสร้างการออกแบบที่ดึงดูดสายตาและอ่านง่าย

อย่างไรก็ตาม การเลือกขนาดฟอนต์และลำดับชั้นที่เหมาะสมอาจเป็นเรื่องยาก นั่นคือที่มาของสเกลประเภท สเกลประเภทคือระบบที่ช่วยให้คุณจัดระเบียบและจัดลำดับความสำคัญของฟอนต์ในการออกแบบของคุณ

Type Scale คืออะไร?

ขนาดตัวอักษรเป็นระบบที่ช่วยให้คุณเลือกขนาดและรูปแบบตัวอักษรที่เหมาะสมสำหรับงานออกแบบของคุณ เป็นช่วงขนาดตัวอักษรที่สัมพันธ์กันตามสัดส่วน สร้างเลย์เอาต์ที่กลมกลืนกัน ขนาดประเภทช่วยให้คุณสร้างรูปลักษณ์และความรู้สึกที่สอดคล้องกันสำหรับการออกแบบ ทำให้ผู้ใช้สามารถอ่านและนำทางผ่านเนื้อหาได้ง่ายขึ้น

จะใช้ Type Scale ในการออกแบบของคุณได้อย่างไร?

1. เลือกขนาดฟอนต์พื้นฐาน-ขั้นตอนแรกในการใช้สเกลประเภทคือการเลือกขนาดฟอนต์พื้นฐาน จุดเริ่มต้นที่ดีคือ 16 พิกเซล ซึ่งเป็นขนาดตัวอักษรเริ่มต้นสำหรับเบราว์เซอร์ส่วนใหญ่ จากขนาดพื้นฐานนี้ คุณสามารถกำหนดขนาดของฟอนต์อื่นๆ ในงานออกแบบของคุณได้
2. ใช้เครื่องมือสเกลประเภท-มีเครื่องมือสเกลประเภทมากมายทางออนไลน์ที่สามารถช่วยคุณสร้างเลย์เอาต์ที่กลมกลืนและเป็นสัดส่วน บางคนที่ได้รับความนิยม ได้แก่Grid Lover , Modular ScaleและType Scale Calculator เครื่องมือเหล่านี้ช่วยให้คุณเลือกขนาดฟอนต์ที่เหมาะสมสำหรับงานออกแบบของคุณได้อย่างง่ายดาย
3. ยึดตามจำนวนเต็ม-เมื่อเลือกขนาดฟอนต์ สิ่งสำคัญคือต้องยึดตามจำนวนเต็ม เช่น 18px, 20px และ 24px หลีกเลี่ยงการใช้ขนาดที่เป็นเศษส่วน เช่น 18.5px เนื่องจากจะทำให้การออกแบบของคุณดูไม่สม่ำเสมอและไม่สมดุล
4. คำนึงถึงระยะห่างระหว่างบรรทัด-เมื่อเลือกขนาดฟอนต์ สิ่งสำคัญคือต้องคำนึงถึงระยะห่างระหว่างบรรทัด ระยะห่างระหว่างบรรทัดอาจส่งผลต่อการอ่านข้อความของคุณ ดังนั้นโปรดเลือกระยะห่างที่เหมาะสมกับขนาดตัวอักษรของคุณ

Ems และ rems เป็นหน่วยวัดสัมพัทธ์ใน CSS ในขณะที่ px เป็นหน่วยวัดสัมบูรณ์ ซึ่งหมายความว่า ems และ rems ขึ้นอยู่กับค่าอื่นๆ ในการออกแบบ ในขณะที่ px เป็นค่าคงที่ที่ไม่เปลี่ยนแปลง

หนึ่ง em เท่ากับขนาดตัวอักษรที่ใช้ ดังนั้น หากคุณกำหนดขนาดตัวอักษรเป็น 16px ดังนั้น 1em จะเท่ากับ 16px หากคุณกำหนดขนาดตัวอักษรเป็น 20px ดังนั้น 1em จะเท่ากับ 20px ซึ่งหมายความว่าหน่วย em จะปรับขนาดตามขนาดตัวอักษรขององค์ประกอบหลัก ทำให้เป็นหน่วยที่ยืดหยุ่นและตอบสนองได้ดี

Rem (ย่อมาจาก “root em”) คล้ายกับ em แต่แทนที่จะปรับขนาดด้วยขนาดฟอนต์ขององค์ประกอบพาเรนต์ จะปรับขนาดตามขนาดฟอนต์ขององค์ประกอบรูท ซึ่งโดยทั่วไปจะเป็นองค์ประกอบ

1rem = 16px ดังนั้นคุณควรใช้ขนาดฐานแบบอักษร 16px เพื่อให้นักพัฒนาสามารถสร้างการแปลง PX เป็น REM ที่สะอาดและเป็นระเบียบ

เพียงเพราะเบราว์เซอร์ตั้งค่าเป็น 16px โดยค่าเริ่มต้น ไม่ได้หมายความว่าผู้ใช้จะไม่สามารถเปลี่ยนค่ากำหนดเป็น 24px หรือ 32px เพื่อแก้ไขสายตาเลือนรางหรือทัศนวิสัยไม่ดี (เช่น แสงจ้าจากหน้าจอ) ผู้ใช้สามารถเปลี่ยน ขนาดฟอนต์รูท นี้ ผ่านการตั้งค่าเบราว์เซอร์ หากคุณกำหนดหน่วยของคุณตาม REM ผู้ใช้ที่มีขนาดตัวอักษรสูงกว่าจะเห็นไซต์ที่ใหญ่ขึ้นตามสัดส่วน

ขอบจะใหญ่ขึ้น ช่องว่างภายในจะใหญ่ขึ้น ระยะขอบจะใหญ่ขึ้น และทุกอย่างจะขยายใหญ่ขึ้นอย่างลื่นไหล

ดังนั้น เมื่อกำหนดสเกลประเภท สิ่งสำคัญคือต้องตัดสินใจว่าขนาดฟอนต์พื้นฐานสำหรับมุมมองเดสก์ท็อปและมุมมองมือถือจะเป็นขนาดใด และกำหนดลำดับชั้นของฟอนต์เพื่อให้ง่ายต่อการจัดการในระดับกว้าง

โปรดจำไว้ว่าการออกแบบที่ยอดเยี่ยมนั้นเกี่ยวกับรายละเอียดทั้งหมด และสเกลประเภทเป็นเพียงหนึ่งในเครื่องมือมากมายที่คุณมีเพื่อยกระดับการออกแบบของคุณไปอีกขั้น มีความสุขในการออกแบบ!