Kerning: คืออะไรและปรับระยะห่างระหว่างตัวอักษรอย่างไร

Kerning ในการพิมพ์คืออะไร

Kerning คือกระบวนการปรับระยะห่างระหว่างคู่ตัวอักษรเฉพาะด้วยตนเองหรือโดยอัตโนมัติเพื่อกำจัดสิ่งรบกวนทางการมองเห็น ปัญหาเกิดขึ้นเนื่องจากตัวอักษรแต่ละตัวมีรูปทรงเรขาคณิตเฉพาะตัว: A มียอดแหลม, V มีความเอียงขวา, T มีคานขวางกว้าง เมื่อตัวอักษรเหล่านี้อยู่ติดกัน ระยะห่างระหว่างเส้นขอบของมันดูไม่สม่ำเสมอ แม้ว่า set width จะเท่ากัน

ตาราง Kerning ของแบบอักษรประกอบด้วยคู่ตัวอักษรที่มีค่าการปรับที่ตั้งไว้ล่วงหน้า แบบอักษรที่ดีอาจมีคู่ Kerning ตั้งแต่ 300 ถึง 2000 คู่ แบบอักษรมืออาชีพ — เช่น SF Pro จาก Apple หรือ Roboto จาก Google — มีตาราง Kerning ที่ถูกสร้างขึ้นอย่างพิถีพิถันครอบคลุมการรวมกันของตัวอักษรละตินและซีริลลิกที่เป็นไปได้ทั้งหมด ตาม Fontshop Guide to Kerning คุณภาพของตาราง Kerning เป็นหนึ่งในตัวบ่งชี้หลักของแบบอักษรมืออาชีพ

ผลกระทบทางสายตา ของ Kerning จะเห็นได้ชัดเจนโดยเฉพาะในหัวเรื่อง โลโก้ และข้อความขนาดใหญ่ (24 pt ขึ้นไป) ในข้อความขนาดเล็ก (12–14 pt) ระยะห่างระหว่างตัวอักษรจะแคบลงและ Kerning จะสังเกตเห็นได้น้อยลง แม้ว่าจะยังคงทำงานอยู่ เบราว์เซอร์เว็บและระบบปฏิบัติการมือถือใช้ Kerning ในตัวตามค่าเริ่มต้น แต่นักพัฒนาสามารถปิดหรือปรับเปลี่ยนตามการออกแบบเฉพาะได้

Kerning กับ Tracking: ความแตกต่างหลัก

นักพัฒนามือใหม่มักสับสนระหว่าง Kerning กับ Tracking แต่สิ่งเหล่านี้เป็นพารามิเตอร์การพิมพ์ที่แตกต่างกันโดยพื้นฐาน Kerning ทำงานในระดับคู่ตัวอักษรและปรับระยะห่างเฉพาะระหว่างชุดค่าผสมที่รูปทรงของตัวอักษรสร้างความไม่สมดุลทางการมองเห็น Tracking (letter-spacing) เปลี่ยนระยะห่างระหว่างตัวอักษรทั้งหมดในส่วนที่เลือกอย่างเท่าเทียมกัน — เพิ่มหรือลดอย่างสม่ำเสมอ

เมื่อใดที่ใช้ Tracking: เพื่อปรับปรุงการอ่านข้อความขนาดเล็ก (Tracking บวก), เพื่อสร้างหัวเรื่องที่เน้น (Tracking ลบ), เพื่อจัดรูปแบบข้อความในการออกแบบอินเทอร์เฟซ Tracking ถูกกำหนดเป็นค่าตัวเลขและใช้กับตัวอักษรทุกตัว รวมถึงคู่ที่ถูก Kerning แล้ว — การแก้ไข Kerning จะถูกเก็บรักษาไว้ แต่มีการเพิ่มการเลื่อนโดยรวมเหนือสิ่งเหล่านั้น

กฎสำคัญ: ด้วย Tracking ลบ (การบีบอัด) ให้สังเกตคู่ Kerning — สิ่งเหล่านี้อาจสร้างการซ้อนทับของตัวอักษรที่ไม่พึงประสงค์ ใน CSS คุณสมบัติ letter-spacing ถูกใช้บนตาราง Kerning ของแบบอักษร และเมื่อมีการบีบอัดสูง (letter-spacing: -1px) การแก้ไข Kerning อาจทำให้ตัวอักษรผสานกัน

การใช้งาน Kerning บน iOS ผ่าน NSAttributedString

บน iOS Kerning ถูกจัดการผ่านแอตทริบิวต์ .kern ใน NSAttributedString ค่าของแอตทริบิวต์เป็น Float โดยที่จำนวนบวกเพิ่มระยะห่าง จำนวนลบลดลง และ 0 ปิดใช้งาน Kerning ค่าเริ่มต้นคือ nil ซึ่งหมายถึงการใช้ตาราง Kerning ของแบบอักษร API หลักสำหรับการทำงานกับ Kerning คือ NSMutableAttributedString โดยการเพิ่มแอตทริบิวต์ลงในช่วงข้อความ

let text = "Kerning in mobile interfaces"
let attributedText = NSMutableAttributedString(
    string: text
)

// เปิดใช้งาน Kerning (ใช้ตารางแบบอักษร)
attributedText.addAttribute(
    .kern,
    value: 0.5,
    range: NSRange(
        location: 0,
        length: text.count
    )
)

// นำไปใช้กับ UILabel
label.attributedText = attributedText

ค่าเริ่มต้น .kern = nil เปิดใช้งาน Kerning จากตารางแบบอักษร หากคุณต้องการปิดใช้งาน Kerning โดยสมบูรณ์ ให้ตั้งค่า .kern = 0 ค่า 0.0 และ nil เป็นสถานะที่แตกต่างกัน: nil ใช้ตาราง, 0 บังคับให้คู่ Kerning ทั้งหมดเป็นศูนย์ ตาม Apple Text Programming Guide การตั้งค่า 0 อย่างชัดเจนมีประโยชน์สำหรับข้อความแบบเว้นระยะเท่ากันหรือกรณีที่ Kerning รบกวน — เช่น ในปุ่มที่มีความกว้างคงที่

SwiftUI มีตัวปรับแต่ง .kerning() สำหรับ Text ต่างจาก UIKit ใน SwiftUI Kerning ถูกตั้งค่าในระดับวิว ไม่ใช่บนสตริงที่ถูกกำหนดแอตทริบิวต์ ตัวปรับแต่งรับ CGFloat และใช้กับข้อความทั้งหมดภายในบล็อก Text สำหรับ Kerning บางส่วนใน SwiftUI ใช้การรวมกันของตัวดำเนินการ + บน Text และตัวปรับแต่งแต่ละตัว

struct KerningView: View {
    var body: some View {
        Text("หัวเรื่องที่มี Kerning")
            .kerning(1.0)
            .font(.title)
    }
}

ประสิทธิภาพ: NSAttributedString ที่มีแอตทริบิวต์ Kerning จะคำนวณตำแหน่งตัวอักษรใหม่ระหว่างการเรนเดอร์ สำหรับข้อความคงที่ สิ่งนี้เกิดขึ้นครั้งเดียว สำหรับข้อความไดนามิก (ข้อความที่เปลี่ยนแปลงใน UICollectionView) — ทุกครั้งที่มีการเปลี่ยนแปลง การใช้ช่วงขนาดใหญ่กับ Kerning ในสตริงยาว (มากกว่า 500 ตัวอักษร) อาจลด FPS ระหว่างการเลื่อน

การกำหนดค่า Kerning บน Android ผ่าน letterSpacing

บน Android Kerning ถูกจัดการผ่านคุณสมบัติ letterSpacing ใน TextView และเค้าโครง XML แอตทริบิวต์เป็นชนิด Float และทำงานเป็นตัวคูณของขนาด em ของแบบอักษร ค่า 0 สอดคล้องกับ Kerning เริ่มต้น ค่าบวกระยะห่างเพิ่มขึ้น ค่าลบลดลง letterSpacing ใช้งานได้ตั้งแต่ API Level 21 (Android 5.0 Lollipop)

การใช้งานผ่าน SpannableString ช่วยให้สามารถใช้ Kerning กับบางส่วนของสตริงแทนที่จะเป็นข้อความทั้งหมด คลาส ScaleXSpan หรือ ReplacementSpan ที่กำหนดเองถูกใช้เพื่อการควบคุมที่แม่นยำ ตาม Android Developer Guide ScaleXSpan จะปรับขนาดตัวอักษรในแนวนอน เลียนแบบการเปลี่ยนแปลงระยะห่างระหว่างตัวอักษร แต่ไม่ได้ให้การควบคุมคู่ Kerning โดยตรง

// ในเค้าโครง XML
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text with kerning"
    android:letterSpacing="0.05" />

// โดยการเขียนโปรแกรมใน Kotlin
val textView = findViewById<TextView>(R.id.myTextView)
textView.letterSpacing = 0.05f

ข้อจำกัด: Android ไม่รองรับตาราง Kerning โดยตรง — letterSpacing ทำงานเป็น Tracking สำหรับตัวอักษรทั้งหมด สำหรับ Kerning แบบคู่บน Android จะใช้แบบอักษรที่มีตาราง Kerning ในตัว (OpenType GPOS feature kern) การรองรับขึ้นอยู่กับรุ่นของระบบปฏิบัติการและเอนจินการเรนเดอร์: บน Android 10+ ใช้ Minikin พร้อมรองรับฟีเจอร์ OpenType อย่างเต็มที่ ในรุ่นก่อนหน้า HarfBuzz พร้อมข้อจำกัด คำแนะนำ: ทดสอบการแสดง Kerning บนอุปกรณ์ที่ใช้ Android ต่ำกว่า 8.0

Kerning ในการพัฒนาเว็บผ่าน CSS

บนเว็บ Kerning ถูกควบคุมผ่าน คุณสมบัติ CSS font-kerning ซึ่งเปิดหรือปิดตาราง Kerning ในตัวของแบบอักษร ค่า: auto (เบราว์เซอร์ตัดสินใจ), normal (เปิด Kerning), none (ปิด Kerning) คุณสมบัตินี้รองรับโดยเบราว์เซอร์สมัยใหม่ทั้งหมดตั้งแต่ปี 2016 ตาม MDN Web Docs font-kerning ใช้เฉพาะกับแบบอักษร OpenType ที่มีตาราง Kerning

คุณสมบัติ CSS letter-spacing เป็นสิ่งที่คล้ายกับ Tracking แต่ยังใช้สำหรับเอฟเฟกต์คล้าย Kerning ด้วย ต่างจาก font-kerning ตรงที่ letter-spacing เปลี่ยนระยะห่างระหว่างตัวอักษรทั้งหมดอย่างเท่าเทียมกัน โดยไม่คำนึงถึงคู่ Kerning เมื่อใช้คุณสมบัติทั้งสอง font-kerning จะถูกใช้ก่อน จากนั้น letter-spacing จะเพิ่มการเลื่อนที่เท่าเทียมกันด้านบน

/* Enable kerning for headings */
h1 {
    font-kerning: normal;
    letter-spacing: 0.02em;
}

/* Disable kerning for monospace */
code, pre {
    font-kerning: none;
}

ยูทิลิตี้ TypeScript สำหรับการคำนวณ letter-spacing ที่เหมาะสมที่สุดโดยพิจารณาจาก Kerning สามารถวิเคราะห์ตาราง Kerning ของแบบอักษรผ่าน Canvas API แต่ในทางปฏิบัติ นักพัฒนาเว็บพึ่งพา font-kerning: normal ซึ่งในกรณีส่วนใหญ่ให้ผลลัพธ์ที่เหมาะสมที่สุด การปรับ letter-spacing เพิ่มเติมจำเป็นสำหรับการเน้นการออกแบบเท่านั้น — เช่น ในแลนดิ้งเพจที่มีการพิมพ์ขนาดใหญ่

คำแนะนำเชิงปฏิบัติสำหรับการกำหนดค่า Kerning

Kerning เป็นเครื่องมือปรับแต่งอย่างละเอียด และการใช้งานที่ไม่ถูกต้องทำให้การอ่านแย่ลง กฎข้อแรก: อย่าเปลี่ยนแปลง Kerning สำหรับข้อความเนื้อหา ตาราง Kerning ของแบบอักษรมืออาชีพมีค่าที่เหมาะสมที่สุดสำหรับขนาด 12–16pt อยู่แล้ว การแทรกแซง Kerning ของข้อความเนื้อหาทำให้เกิดความไม่สม่ำเสมอและสัญญาณรบกวนทางสายตา

กฎข้อสอง: สำหรับหัวเรื่องตั้งแต่ 24pt ขึ้นไป ให้ใช้ Kerning บวก (0.5–1.5 pt ขึ้นอยู่กับแบบอักษร) ข้อความขนาดใหญ่ต้องการระยะห่างระหว่างตัวอักษรมากขึ้นเพื่อการอ่าน แบบอักษรที่มี x-height ต่ำ (เช่น Didot) ต้องการ Kerning มากกว่าแบบอักษรที่มี x-height สูง (เช่น Helvetica) ข้อมูลอ้างอิง: ในแอป iOS Apple Music หัวเรื่องใช้ Kerning 0.8 pt

กฎข้อสาม: ทดสอบ Kerning กับสตริงจริงเสมอ ไม่ใช่ Lorem Ipsum การรวมกันของตัวอักษรที่แตกต่างกันให้ผลกระทบทางสายตาที่แตกต่างกัน ให้ความสนใจเป็นพิเศษกับคู่สระและพยัญชนะที่มีส่วนยื่น: AV, Te, To, Wa, LT ด้วย Kerning ลบ ให้สังเกตคู่ fi, fl, fj — ในบางแบบอักษร สิ่งเหล่านี้อาจผสานกันโดยไม่มี ligature

ด้านการเข้าถึง: ผู้ใช้ที่มีภาวะ dyslexia อ่านข้อความที่มี Kerning บวกเล็กน้อย (0.3–0.5 pt) ได้ดีกว่า iOS และ Android รองรับการตั้งค่าการเข้าถึงที่สามารถแทนที่ Kerning ของแอป ใช้ UIFontDescriptor กับ Dynamic Type และพิจารณา Kerning ในการตั้งค่าการเข้าถึงผ่าน UIAccessibility สำคัญ: อย่าปิดกั้นการตั้งค่า Kerning ของระบบ — สิ่งนี้ละเมิดแนวทาง WCAG 2.2 ข้อ 1.4.12 เกี่ยวกับการปรับข้อความ