การพิมพ์

หากคุณไม่ระบุรูปแบบสำหรับข้อความ เบราว์เซอร์จะใช้รูปแบบเริ่มต้นของตัวเอง สิ่งเหล่านี้เรียกว่าสไตล์ชีตของ User Agent และอาจแตกต่างกันไปในแต่ละเบราว์เซอร์ ผู้ใช้สามารถตั้งค่ากำหนดสำหรับแสดงข้อความด้วยตนเองได้เช่นกัน

หากคุณไม่ระบุความยาวของบรรทัด เบราว์เซอร์จะตัดบรรทัดข้อความที่ขอบของหน้าจอ ดังนั้นข้อความในเว็บจะปรับเปลี่ยนตามอุปกรณ์โดยค่าเริ่มต้น ซึ่งจะปรับขนาดให้พอดีกับวิวพอร์ตของผู้ใช้

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

ขนาดข้อความ

การที่จะรู้ว่าข้อความในเว็บควรมีขนาดเท่าใดนั้นเป็นเรื่องยาก

ถ้ามีคนใช้หน้าจอขนาดเล็ก หน้าจอเล็กๆ ก็อาจจะปลอดภัยพอๆ กับระยะมือที่ห่างกัน

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

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

คุณใช้คิวรี่สื่อเพื่อเปลี่ยนพร็อพเพอร์ตี้ font-size ได้เมื่อหน้าจอมีขนาดกว้างขึ้น

@media (min-width: 30em) {
  html {
    font-size: 125%;
  }
}

@media (min-width: 40em) {
  html {
    font-size: 150%;
  }
}

@media (min-width: 50em) {
  html {
    font-size: 175%;
  }
}

@media (min-width: 60em) {
  html {
    font-size: 200%;
  }
}

ปรับขนาดข้อความ

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

หน่วย vw ใน CSS ย่อมาจาก "ความกว้างวิวพอร์ต" การเชื่อมโยงขนาดแบบอักษรกับ ความกว้างของวิวพอร์ตหมายความว่าข้อความจะขยายและหดลงตามสัดส่วนความกว้างของเบราว์เซอร์ ซึ่งทำให้คาดการณ์ขนาดข้อความบนความกว้างที่เจาะจงใดๆ ได้ยาก แต่คุณทราบว่าขนาดข้อความจะเหมาะสมกับความกว้างเบราว์เซอร์ของผู้ใช้

สิ่งสำคัญคืออย่าใช้ vw อย่างเดียวในการประกาศขนาดแบบอักษร

html {
  font-size: 2.5vw;
}

หากทำเช่นนี้ ผู้ใช้จะปรับขนาดข้อความไม่ได้ ข้อความจะปรับขนาดได้หากคุณผสมผสานหน่วยที่เกี่ยวข้อง เช่น em, rem หรือ ch ฟังก์ชัน CSS calc() นั้นเหมาะอย่างยิ่งสำหรับเรื่องนี้

html {
  font-size: calc(0.75rem + 1.5vw);
}

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

แต่ตอนนี้มีความเป็นไปได้ว่าข้อความจะเล็กเกินไปในหน้าจอแคบและใหญ่เกินไปบนหน้าจอกว้าง

การตัดข้อความ

คุณอาจไม่ต้องการให้ข้อความย่อและขยายใหญ่สุด คุณควบคุมตำแหน่งที่การปรับขนาดเริ่มต้นและสิ้นสุดได้โดยใช้ฟังก์ชัน CSS clamp() ซึ่งจะ "ปรับ" การปรับขนาดให้เป็นช่วงที่เฉพาะเจาะจง

ฟังก์ชัน clamp() เหมือนกับฟังก์ชัน calc() แต่ต้องมี 3 ค่า ค่าตรงกลางจะเท่ากับค่าที่คุณส่งไปยัง calc() ค่าเปิดจะระบุขนาดขั้นต่ำ ในกรณีนี้คือ 1rem เพื่อไม่ให้ต่ำกว่าขนาดแบบอักษรที่ผู้ใช้ต้องการ ค่าปิดจะระบุขนาดสูงสุด

html {
  font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);
}

ตอนนี้ขนาดข้อความจะย่อลงและใหญ่ขึ้นตามสัดส่วนของหน้าจอของผู้ใช้ แต่ขนาดข้อความจะไม่ต่ำกว่า 1rem หรือสูงกว่า 2rem

ความยาวของบรรทัด

เว็บไม่ใช่สิ่งพิมพ์ แต่เราเรียนรู้บทเรียนจากโลกแห่งการพิมพ์และนำมาประยุกต์ใช้บนเว็บได้

ในหนังสือคลาสสิก The Elements of Typographic Style ของ Robert Bringhurst ได้พูดถึงความยาวบรรทัด (หรือมาตรวัด) ดังนี้

ตัวอักษรทั้งหมดตั้งแต่ 45 ถึง 75 ตัวได้รับการยกย่องอย่างกว้างขวางว่าเป็นความยาวบรรทัดที่น่าพอใจสำหรับหน้าที่คอลัมน์เดียวมีหน้าข้อความแบบ Serif ในขนาดตัวอักษร เส้นจำนวน 66 อักขระ (นับทั้งตัวอักษรและเว้นวรรค) ได้รับการยกย่องอย่างกว้างขวางว่าอุดมคติ สำหรับงานหลายคอลัมน์ ค่าเฉลี่ยที่ดีกว่าคือ 40 ถึง 50 อักขระ

คุณไม่สามารถกำหนดความยาวบรรทัดใน CSS โดยตรง ไม่มีพร็อพเพอร์ตี้ line-length แต่คุณสามารถป้องกันไม่ให้ข้อความกว้างเกินไปได้ด้วยการจำกัดความกว้างของคอนเทนเนอร์ พร็อพเพอร์ตี้ max-inline-size เหมาะอย่างยิ่งสำหรับเรื่องนี้

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

article {
  max-inline-size: 700px;
}

article {
  max-inline-size: 66ch;
}

การใช้หน่วย ch สำหรับความกว้างจะทำให้บรรทัดใหม่ตัดไปที่อักขระที่ 66 ในขนาดแบบอักษรนั้น

ช่องว่างระหว่างบรรทัด

แม้ว่าจะไม่มีพร็อพเพอร์ตี้ line-length ใน CSS แต่ก็มีพร็อพเพอร์ตี้ line-height

บรรทัดที่สั้นลงอาจมีค่า line-height ที่มากกว่า แต่หากคุณใช้ค่า line-height ขนาดใหญ่สำหรับบรรทัดข้อความยาว สายตาของผู้อ่านจะย้ายจากท้ายบรรทัดไปยังจุดเริ่มต้นของบรรทัดถัดไปได้ยาก

article {
  max-inline-size: 66ch;
  line-height: 1.65;
}
blockquote {
  max-inline-size: 45ch;
  line-height: 2;
}

ใช้ค่าที่ไม่มีหน่วยสำหรับการประกาศ line-height เพื่อให้แน่ใจว่าความสูงของเส้นจะสัมพันธ์กับ font-size

line-height: 24px;

line-height: 1.5;

ชุดค่าผสมและมาตราส่วน

อย่าลืมจัดลำดับความสำคัญในการสร้างอินเทอร์เฟซผู้ใช้เพื่อเพิ่มความชัดเจนและลำดับหน้าเว็บ วิธีที่ดีในการทำเช่นนี้คือการใช้สเกลการออกแบบตัวอักษรที่มีอยู่ในระบบการออกแบบของคุณ

แบบอักษรเว็บ

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

ใช้ @font-face เพื่อบอกเบราว์เซอร์ว่าจะหาไฟล์แบบอักษรของเว็บได้จากที่ใด ใช้ woff2 เป็นรูปแบบแบบอักษรของเว็บ ซึ่งได้รับการสนับสนุนเป็นอย่างดีและมีประสิทธิภาพสูงสุด

@font-face {
  font-family: Roboto;
  src: url('/fonts/roboto-regular.woff2') format('woff2');
}
body {
  font-family: Roboto, sans-serif;
}

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

กำลังโหลดแบบอักษร

คุณสามารถขอให้เบราว์เซอร์เริ่มดาวน์โหลดไฟล์แบบอักษรโดยเร็วที่สุดได้ เพิ่มเอลิเมนต์ link ลงใน head ของเอกสารที่อ้างอิงไฟล์แบบอักษรของเว็บ แอตทริบิวต์ rel ที่มีค่า preload จะบอกให้เบราว์เซอร์จัดลำดับความสำคัญของไฟล์นั้น แอตทริบิวต์ as ที่มีค่า font จะบอกเบราว์เซอร์ว่าไฟล์นี้เป็นไฟล์ประเภทใด โดยแอตทริบิวต์ type จะช่วยให้คุณระบุได้เจาะจงยิ่งขึ้น

<link href="/fonts/roboto-regular.woff2" type="font/woff2" 
  rel="preload" as="font" crossorigin>

คุณต้องระบุแอตทริบิวต์ crossorigin แม้ว่าคุณจะโฮสต์ไฟล์แบบอักษรด้วยตนเองก็ตาม

ใช้พร็อพเพอร์ตี้ CSS font-display เพื่อบอกเบราว์เซอร์ถึงวิธีจัดการการเปลี่ยนจากแบบอักษรของระบบเป็นแบบอักษรของเว็บ คุณสามารถเลือกไม่แสดงข้อความใดๆ เลยจนกว่าแบบอักษรของเว็บจะโหลด คุณสามารถเลือกที่จะแสดงแบบอักษรระบบทันที แล้วสลับไปที่แบบอักษรเว็บเมื่อโหลดแล้ว ทั้ง 2 กลยุทธ์นี้มีข้อเสีย หากรอจนกว่าแบบอักษรของเว็บจะถูกดาวน์โหลดเสร็จก่อนที่จะแสดงข้อความใดๆ ผู้ใช้อาจพบว่าตัวเองจ้องไปที่หน้าว่างเปล่าเป็นเวลานานจนน่าหงุดหงิด ถ้าคุณแสดงข้อความในแบบอักษรของระบบก่อน จากนั้นเปลี่ยนไปใช้แบบอักษรเว็บ ผู้ใช้อาจพบว่าเนื้อหาบนหน้าเว็บมีการเปลี่ยนแปลงที่กระตุก

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

ใช้ค่า font-display เป็น swap หากคุณยังคงต้องการให้แบบอักษรเว็บแทนที่แบบอักษรของระบบเมื่อเว็บฟอนต์โหลดขึ้นมาในที่สุด

body {
  font-family: Roboto, sans-serif;
  font-display: swap;
}

ใช้ค่า font-display เป็น fallback หากต้องการใช้แบบอักษรของระบบต่อไปเมื่อมีการแสดงข้อความ

body {
  font-family: Roboto, sans-serif;
  font-display: fallback;
}

แบบอักษรที่ปรับแต่งได้

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

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

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

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

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

ตรวจสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับการพิมพ์