Typeset

เมื่อไรควรใช้

ใช้ /impeccable typeset เมื่อข้อความบนหน้าดูเหมือนตัวอักษรดีฟอลต์แทนที่จะเป็นตัวอักษรที่ออกแบบมา ลำดับชั้นไม่ชัดเจน สามขนาดที่ดูเหมือนกัน เนื้อหาที่ 14px ฟอนต์แสดงผลที่แท้จริงคือแค่ Inter bold หัวข้อข่าวไม่มีการใส่ใจเรื่องเคอร์นิง

ทริกเกอร์ทั่วไป: “ลำดับชั้นรู้สึกแบน” “ความอ่านง่ายไม่ถูกต้อง” “ฟอนต์ดูธรรมดา”

วิธีการทำงาน

สกิลประเมินตัวอักษรในห้ามิติ:

1. การเลือกฟอนต์: คุณใช้ดีฟอลต์ที่มองไม่เห็น (Inter, Roboto, Arial, Open Sans) ไหม ตัวอักษรตรงกับแบรนด์ไหม มีมากกว่า 2-3 ตระกูลไหม
2. ลำดับชั้น: หัวข้อ เนื้อหา และแคปชันแตกต่างกันชัดเจนเมื่อมองครั้งแรกไหม คอนทราสต์ขนาดอย่างน้อย 1.25 เท่าระหว่างขั้น คอนทราสต์น้ำหนักอ่านได้ไหม
3. ขนาดและสเกล: มีสเกลตัวอักษรที่สอดคล้องกันไหม ข้อความเนื้อหาถึงขั้นต่ำ 16px ไหม สเกลเป็น fixed-rem สำหรับ UI แอปหรือ fluid-clamp สำหรับหน้าการตลาด
4. ความอ่านง่าย: ความยาวบรรทัด 45-75 ตัวอักษร line-height ปรับตามฟอนต์และบริบท คอนทราสต์
5. ความสม่ำเสมอ: อิลิเมนต์เดียวกันใช้การจัดการเดียวกันทุกที่ ไม่มีการ override font-size แบบ ad-hoc

จากนั้นมันแก้ไขสิ่งที่พบ: เลือกฟอนต์ที่โดดเด่น สร้างสเกลแบบโมดูลาร์ ขยายคอนทราสต์ลำดับชั้น กำหนดความยาวบรรทัดและ line-height ที่เหมาะสม

ลองใช้งาน

/impeccable typeset the article layout

ผลลัพธ์ที่คาดหวัง:

• ฟอนต์แสดงผลเปลี่ยนจาก Inter 700 เป็นฟอนต์แสดงผลจริง
• สเกลตัวอักษรสร้างใหม่: 3rem / 2rem / 1.25rem / 1rem / 0.875rem อัตราส่วน 1.333
• ข้อความเนื้อหาเพิ่มจาก 14px เป็น 16px
• ความยาวบรรทัดจำกัดที่ 68ch บนคอลัมน์บทความ
• Line-height 1.6 สำหรับเนื้อหา 1.1 สำหรับแสดงผล
• ลบค่า font-size แบบ ad-hoc สี่ค่าที่กระจายอยู่ในสไตล์คอมโพเนนต์

ข้อควรระวัง

• ขอฟอนต์ใหม่โดยไม่มีบริบท Typeset จะเลือกตามเสียงแบรนด์จาก PRODUCT.md หากคุณยังไม่ได้รัน /impeccable teach คำแนะนำจะเป็นแบบทั่วไป
• ใช้ typeset เมื่อปัญหาคือเลย์เอาต์ หากย่อหน้าปกติแต่หน้ารู้สึกแออัด คุณต้องการ /impeccable layout
• คาดหวังสเกล fluid clamp บน UI แอป Typeset ใช้สเกล fixed rem สำหรับอินเทอร์เฟซแอป ตัวอักษรแบบ fluid มีไว้สำหรับหน้าการตลาดและเนื้อหาที่ความยาวบรรทัดเปลี่ยนแปลงมาก