หากไม่ระบุรูปแบบข้อความ เบราว์เซอร์จะใช้รูปแบบเริ่มต้นของตนเอง ซึ่งเรียกว่าสไตล์ชีตของ 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;
}
แบบอักษรที่ปรับเปลี่ยนได้
หากคุณใช้น้ำหนักหรือรูปแบบที่มีแบบอักษรเหมือนกันจำนวนมาก คุณอาจมีไฟล์แบบอักษรแยกกันจำนวนมาก เป็นไฟล์แบบอักษรแยกกันสำหรับแต่ละน้ำหนักหรือรูปแบบ
แบบอักษรตัวแปรแก้ไขปัญหานี้โดยใช้ไฟล์เดียวได้ แทนที่จะมีไฟล์แยกต่างหากสำหรับข้อความปกติ ตัวหนา ตัวหนาพิเศษ และต่อไปเรื่อยๆ ไฟล์แบบอักษรตัวแปรจะปรับเปลี่ยนตามอุปกรณ์ ซึ่งประกอบด้วยข้อมูลทั้งหมดที่จำเป็นในการแสดงน้ำหนักหรือรูปแบบที่แตกต่างกัน
ซึ่งหมายความว่าไฟล์แบบอักษรตัวแปรเดียวจะมีขนาดใหญ่กว่าไฟล์แบบอักษรปกติไฟล์เดียว แต่ไฟล์แบบอักษรตัวแปรเดียวอาจเล็กกว่าไฟล์แบบอักษรปกติหลายไฟล์ หากคุณใช้น้ำหนักที่ต่างกันมาก แบบอักษรที่เปลี่ยนแปลงได้อาจเพิ่มประสิทธิภาพให้คุณได้อย่างมาก
การออกแบบตัวอักษรที่ดีในเว็บไม่ใช่แค่ประเภทที่คุณเลือกในฐานะนักออกแบบเท่านั้น การพิมพ์ที่ปรับเปลี่ยนตามอุปกรณ์ยังเกี่ยวข้องกับอุปกรณ์และการเชื่อมต่อเครือข่ายของผู้ใช้ด้วย ผลลัพธ์ที่ได้คือการออกแบบที่ดูเหมาะสมไม่ว่าจะดูอย่างไร
เมื่อคุณคุ้นเคยกับข้อความที่ปรับเปลี่ยนตามพื้นที่โฆษณาแล้ว ก็ถึงเวลาเจาะลึกเรื่องรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์
ตรวจสอบความเข้าใจของคุณ
ทดสอบความรู้เกี่ยวกับการพิมพ์
ต้องเพิ่มรูปแบบสำหรับข้อความที่จะตัดภายในวิวพอร์ต
clamp()
มีประโยชน์สำหรับการพิมพ์แบบไหลเนื่องจาก
calc()
ได้ง่ายๆclamp()
สำหรับการพิมพ์clamp()
สำหรับการพิมพ์คู่มือนี้จะแนะนำค่า line-height
ประเภทใด
24px
line-height
2rem
1.5
2vw
line-height
จะทำให้เกิดปัญหาfont-display
มีหน้าที่อะไร
block
หรือ inline-block