การพิมพ์

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

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

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

ขนาดข้อความ

การรู้ว่าข้อความบนเว็บควรมีขนาดเท่าใดไม่ใช่เรื่องง่าย

หากมีคนใช้หน้าจอขนาดเล็ก คุณอาจมั่นใจได้ว่าหน้าจอจะอยู่ใกล้กับดวงตาในระยะห่างประมาณ 1 ฝ่ามือ

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

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

คุณใช้ Media Query เพื่อเปลี่ยนพร็อพเพอร์ตี้ 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);
}

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

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

การจำกัดข้อความ

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

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

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

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

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

เว็บไม่ใช่สื่อสิ่งพิมพ์ แต่เราสามารถเรียนรู้จากโลกของสื่อสิ่งพิมพ์และนำมาใช้บนเว็บได้

ในหนังสือคลาสสิก The Elements of Typographic Style โรเบิร์ต บริงเฮิร์สต์กล่าวถึงความยาวบรรทัด (หรือการวัด) ไว้ดังนี้

โดยทั่วไปแล้ว ความยาวบรรทัดที่ 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 ในขนาดแบบอักษรนั้น

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

แม้ว่า CSS จะไม่มีพร็อพเพอร์ตี้ line-length แต่ก็มีพร็อพเพอร์ตี้ 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 แม้ว่าคุณจะโฮสต์ไฟล์แบบอักษรด้วยตนเองก็ตาม

ใช้พร็อพเพอร์ตี้ font-display ของ CSS เพื่อบอกเบราว์เซอร์ว่าจะจัดการการเปลี่ยนจากแบบอักษรของระบบเป็นแบบอักษรบนเว็บอย่างไร คุณอาจเลือกไม่แสดงข้อความเลยจนกว่าจะโหลดแบบอักษรบนเว็บ คุณเลือกที่จะแสดงแบบอักษรของระบบทันที แล้วเปลี่ยนไปใช้แบบอักษรบนเว็บเมื่อโหลดเสร็จแล้วได้ ทั้ง 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 ไฟล์จะมีขนาดใหญ่กว่าไฟล์ฟอนต์ปกติ 1 ไฟล์ แต่ไฟล์ฟอนต์ตัวแปร 1 ไฟล์อาจมีขนาดเล็กกว่าไฟล์ฟอนต์ปกติหลายไฟล์ หากคุณใช้ความหนาหลายแบบ แบบอักษรแบบแปรผันจะช่วยเพิ่มประสิทธิภาพได้อย่างมาก

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

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

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับตัวอักษร