Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

เหตุใดข้อความตัวพิมพ์ใหญ่/ตัวพิมพ์ใหญ่ของคุณอาจต้องมีระยะห่างระหว่างตัวอักษร [วิชาการพิมพ์]

เรียนรู้ว่าเหตุใดคุณจึงมักจะได้รับประโยชน์จากการใช้การเว้นวรรคระหว่างตัวอักษรกับองค์ประกอบข้อความตัวพิมพ์ใหญ่ และวิธีดำเนินการด้วย CSS

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

การเว้นวรรคตัวอักษร เรียกอีกอย่างว่า การติดตาม พวกเขาเป็นคำพ้องความหมาย ทั้งสองหมายถึงจำนวนช่องว่างระหว่างกลุ่มตัวอักษร (คำ) ในการสื่อสาร คำว่า letterpacing มักถูกใช้ในเว็บมากกว่า ในขณะที่การติดตามจะใช้มากกว่าในการพิมพ์ตัวพิมพ์

มาดูตัวอย่างกัน

ปกติกับตัวพิมพ์ใหญ่

เปรียบเทียบองค์ประกอบข้อความ ตัวพิมพ์เล็ก และตัวพิมพ์ใหญ่/ตัวพิมพ์ใหญ่ทั้งหมดต่อไปนี้:

การพิมพ์

การพิมพ์

คุณพบปัญหาหรือไม่

ไม่เป็นไรถ้าคุณไม่ทำ เมื่อใช้ฟอนต์น้ำหนักปกติ/ค่าเริ่มต้น มักจะไม่มีปัญหา ขึ้นอยู่กับการออกแบบแบบอักษรและวิธีการใช้งาน

ใน CSS สามารถประกาศน้ำหนักแบบอักษรปกติได้โดยใช้ font-weight: normal; หรือ font-weight: 400; — ก็เหมือนเดิม

ตัวพิมพ์ปกติกับตัวพิมพ์ใหญ่ (ตัวหนา)

ตอนนี้เรามาเปรียบเทียบตัวอย่างเดียวกัน แต่คราวนี้เราเพิ่มน้ำหนักแบบอักษรตัวหนา:

การพิมพ์

การพิมพ์

คุณเห็นว่าข้อความตัวพิมพ์ใหญ่ทั้งหมดดูแน่นแค่ไหนเมื่อเราใช้การขีดตัวอักษรที่หนาขึ้น (ตัวหนา)? ตอนนี้คุณจะเห็นว่าตัวอักษรบางตัวสัมผัสกัน

ใน CSS สามารถประกาศ font-weight ตัวหนาได้โดยใช้ font-weight: bold; . คุณยังสามารถใช้ค่าตัวเลขได้ แต่ต้องแน่ใจว่าคุณทราบจำนวนตัวเลือกน้ำหนักแบบอักษรที่มีให้เลือกจากตระกูลแบบอักษรที่คุณเลือก 700 มักจะเทียบเท่ากับตัวหนา — แต่ไม่เสมอไป

Letterspacing (aka tracking)

มาทำสำเนาของตัวอย่างองค์ประกอบข้อความตัวพิมพ์ใหญ่ก่อนหน้านี้และกำหนดระยะห่างตัวอักษร 4px แล้วดูว่าทั้งสองเปรียบเทียบกันอย่างไร:

วิชาการพิมพ์

การพิมพ์

ว้าว ช่างแตกต่างอะไรเช่นนี้! ตัวอย่างแรกเกือบจะกระตุ้นปฏิกิริยาที่อึดอัด ในขณะที่ตัวอย่างที่สองให้ผลตรงกันข้าม

ใน CSS การเว้นวรรคตัวอักษรถูกประกาศด้วย letter-spacing คุณสมบัติ เช่น:letter-spacing: 4px; สามารถสะกดโดยมีหรือไม่มียัติภังค์ (- ) ในภาษาปกติ แต่ใน CSS จะเป็น กับ . เสมอ ยัติภังค์

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

หนึ่งในเครื่องมือที่ทรงพลังที่สุดในการแสดงและส่งเสริมธีมของภาพยนตร์บนโปสเตอร์คือการออกแบบตัวอักษร นักพิมพ์ดีดที่มีทักษะจะตัดสินใจอย่างรอบคอบเกี่ยวกับ:

  • แบบอักษร/แบบอักษรตระกูล
  • การจัดประเภทแบบอักษร (serif, sans-serif เป็นต้น)
  • ขนาดตัวอักษร
  • ตัวพิมพ์ใหญ่ (ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก ฯลฯ)***
  • font-weights (ปกติ ตัวหนา ฯลฯ)
  • รูปแบบตัวอักษร (ปกติ/ปกติ/ตัวเอียง)

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

การเว้นวรรคตัวอักษรเป็นเพียงองค์ประกอบเดียว แต่เป็นองค์ประกอบที่มีประสิทธิภาพของการพิมพ์:

CAPTIVITY

อิสระ

คุณรู้สึกถึงความแตกต่างไหม

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

โดยสรุป:

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

มันไม่ใช่ขาวดำ บริบทคือสิ่งสำคัญ