ตัวสร้างสเกลตัวอักษร (ระบบขนาดฟอนต์)

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

วิธีใช้

1. ใส่ "ขนาดฐาน" ของเนื้อหาเป็น px แล้วเลือก "อัตราส่วน" ตัวเลือก "กำหนดเอง" รับค่าใดก็ได้ตั้งแต่ 1.05 ถึง 2
2. ที่ "การปัดเศษ" เลือกเก็บทศนิยม ปัดเป็น px จำนวนเต็ม หรือจัดขนาดให้ลง "กริด 4 px"
3. ตั้ง "ความสูงบรรทัด": "หัวข้อชิดกว่า" จะลดตัวคูณสำหรับขนาดใหญ่ ส่วน "เท่ากันทั้งหมด" ใช้ค่าเดียว
4. พิมพ์ "ข้อความตัวอย่าง" ของคุณเอง และสลับ "ฟอนต์ตัวอย่าง" เพื่อดูแต่ละขั้นในขนาดจริง
5. กด "คัดลอกตัวแปร CSS" "คัดลอก CSS ขององค์ประกอบ" หรือ "คัดลอก JSON"

หลักการทำงาน

• ขนาดของขั้น n = ฐาน × อัตราส่วนยกกำลัง n ขั้นมีตั้งแต่ −2 (xs) ถึง +6 (5xl) ขั้น 0 คือเนื้อหา (p) ขั้น 1 ถึง 6 ตรงกับ h6 ถึง h1
• rem คือค่า px หารด้วยขนาดฐาน และ pt = px × 0.75 (96 px ต่อนิ้ว)
• เมื่อเลือก "หัวข้อชิดกว่า" ตัวคูณจะลดลงเป็นเส้นตรงจาก "ความสูงบรรทัดเนื้อหา" ที่ขนาดฐาน ไปยัง "ความสูงบรรทัดหัวข้อ" ที่สามเท่าของขนาดฐาน ส่วน "กริด 4 px" จะปัดกล่องบรรทัดให้เป็นพหุคูณของ 4 px ด้วย
• การตั้งค่าถูกเก็บไว้ในเบราว์เซอร์นี้สำหรับครั้งถัดไป

คำถามที่พบบ่อย

เว็บไซต์ควรใช้อัตราส่วนเท่าไร

1.2 และ 1.25 ให้หัวข้อขนาดพอดีเหมาะกับบทความยาว ส่วน 1.333 ขึ้นไปให้หัวข้อใหญ่แบบโปสเตอร์ หน้าจอเล็กมักดูดีกว่าเมื่อใช้อัตราส่วนที่เล็กลง

ตัวอักษรเนื้อหาควรมีขนาดเท่าไร

16 px เป็นค่าเริ่มต้นของเบราว์เซอร์และจุดเริ่มที่ใช้กันทั่วไป ข้อความอ่านยาวมักใช้ 17 ถึง 18 px ขั้นอื่นในสเกลจะตามขนาดฐานที่คุณใส่

จะแปลงขนาดเป็น rem อย่างไร

ตารางแสดง rem ข้าง px อยู่แล้ว เมื่อกำหนด html ให้เท่ากับขนาดฐานเป็น px ตาม CSS ขององค์ประกอบที่คัดลอกไป 1rem จะเท่ากับขนาดฐาน

หัวข้อควรมีความสูงบรรทัดเท่าไร

เนื้อหามักอยู่ราว 1.5 และหัวข้อใหญ่ราว 1.1 ถึง 1.25 เพื่อไม่ให้บรรทัดหัวข้อที่ตัดขึ้นบรรทัดใหม่มีช่องว่างกว้างเกินไป โหมดอัตโนมัติจะปรับค่านี้ให้