การพิมพ์

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

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

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

ขนาดข้อความ

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

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

แต่เมื่อหน้าจอมีขนาดใหญ่ขึ้นเรื่อยๆ การเชื่อมต่อก็ยากขึ้น หน้าจอขนาดแล็ปท็อปจะอยู่ใกล้กับผู้ชมพอสมควร แต่จอภาพเดสก์ท็อปแบบจอกว้างจะมีขนาดใกล้เคียงกับหน้าจอทีวี ผู้คนนั่งอยู่ห่างจากหน้าจอเดสก์ท็อปประมาณ 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;
}

แบบอักษรที่ปรับเปลี่ยนได้

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

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

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

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

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

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

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