การพิมพ์เว็บที่ตอบสนอง

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

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

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

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

1. การใช้แบบอักษรอย่างรอบคอบช่วยให้มั่นใจได้ว่าการพิมพ์จะตอบสนองได้ดีแต่มีประสิทธิภาพ

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

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

กรณีศึกษา : ชำระเงิน vox.com. ไซต์นี้รวมแบบอักษร Sans-Serif สองแบบเข้าด้วยกันและทำได้อย่างง่ายดาย พวกเขาใช้ Balto สำหรับพาดหัวข่าวทั้งหมด Alright Sans สำหรับข้อความเนื้อหา นอกเหนือจาก Harriet ซึ่งกระจายไปทั่วเว็บไซต์ภายใน ผลลัพธ์ที่ได้คือรูปลักษณ์ที่สะอาดและสง่างาม

ในทางกลับกัน ให้ลองดูไซต์ angelfire ไซต์นี้มีแบบอักษรหลายแบบและดูโทรมและไม่เป็นมืออาชีพ

2. เน้นหัวข้อข่าวของคุณ

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

อักษรควบคือตัวอักษรที่ดูเหมือนเชื่อมเข้าด้วยกัน ตัวอย่างเช่น ตัวอักษร f และ i ซึ่งเป็นส่วนแรกของคำว่า fish จะรวมกันเป็น 'fi' ในแบบอักษร คุณสามารถเพิ่มตัวอักษรควบได้อย่างง่ายดายผ่านการตั้งค่าแบบอักษรของเบราว์เซอร์ของคุณ หรือโดยการทำงานกับคุณลักษณะ “การแสดงข้อความ- OptimiseLegibility” Firefox มีอักษรควบเริ่มต้นอยู่แล้ว การใช้ตัวอักษรควบรวมกันเฉพาะในแบบอักษรบางประเภทสามารถเพิ่มความสวยงามและสไตล์ให้กับการออกแบบเว็บของคุณได้ อักษรควบสามารถเปิดหรือปิดได้ในเมนู Text, Type หรือ Open Type ของซอฟต์แวร์เค้าโครงหน้า ซอฟต์แวร์จะรับรองการแทรกอักษรควบโดยอัตโนมัติเมื่อตัวอักษรที่เกี่ยวข้องมารวมกัน

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

3. ให้เว็บไซต์ของคุณพูดคุยกับผู้ชมผ่านการใช้แบบอักษรขนาดและสีต่างๆ อย่างเหมาะสม

ดังที่เห็นได้จากภาพด้านบน เราต้องเลือกแบบอักษรที่สามารถอ่านและมองเห็นได้ชัดเจนบนหน้าจอมือถือและหน้าจอเดสก์ท็อป สไตล์ที่แบบอักษรแสดงบนสื่อสิ่งพิมพ์จะแตกต่างจากที่แสดงบนสื่อดิจิทัล เราจำเป็นต้องเข้าใจตระกูลฟอนต์ สไตล์ และเอฟเฟกต์ ข้อกำหนดสำหรับแบบอักษรเว็บมีอยู่ในข้อกำหนด CSS โดย W3C ซึ่งระบุว่า Serif, Sans-Serif, Monospace, Fantasy และ Cursive เป็นตระกูลแบบอักษร

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

4. การปรับการวัดเป็นสิ่งสำคัญสำหรับการพิมพ์ที่ตอบสนอง

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

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

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

ในทางกลับกัน เว็บไซต์ gatesnfences มีอักขระอย่างน้อย 120 ตัวต่อบรรทัด เป็นผลให้มันดูน่ารังเกียจและจะห้ามไม่ให้อ่านเนื้อหา

5. การใช้ขนาดตัวอักษรต่างๆ จะช่วยเพิ่มความสามารถในการอ่านในระยะต่างๆ จากหน้าจอ นี่เป็นข้อกำหนดสำหรับการพิมพ์แบบโต้ตอบ

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

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

6. การพิมพ์ที่ตอบสนองต้องการให้เว็บเบราว์เซอร์สามารถรองรับแบบอักษรต่างๆ ได้

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

กรณีศึกษา : เราสามารถอนุมานได้จากข้างบนว่าเราจำเป็นต้องใช้ฟอนต์มาตรฐานหรือใช้ “ฟอนต์สแต็ค” ขั้นตอนแรกคือ “การทดสอบฟอนต์” เพื่อดูว่าฟอนต์นั้น 'ปลอดภัยบนเว็บ' หรือไม่ โดยพื้นฐานแล้ว เบราว์เซอร์จะพิจารณาลำดับฟอนต์แต่ละลำดับเป็นตัวเลือกฟอนต์แรก ตัวเลือกฟอนต์ที่สอง ตัวเลือกฟอนต์ที่สาม และอื่น ๆ หากเบราว์เซอร์ไม่พบแบบอักษรใดๆ ในลำดับ เบราว์เซอร์จะเปลี่ยนกลับเป็นค่าเริ่มต้น Serif, Sans Serif หรือ Monospace ขึ้นอยู่กับการจัดประเภทแบบอักษรที่ใช้

ตัวอย่างเช่น ระบบปฏิบัติการส่วนใหญ่มีแบบอักษร Century Gothic ดังนั้น คุณสามารถสร้างกองแบบอักษรที่เริ่มต้นด้วย Century Gothic เป็นตัวเลือกแบบอักษรแรกของคุณ ตามด้วย Arial, Helvetica และสุดท้ายคือการจัดประเภททั่วไปของ Sans-Serif ใน CSS โปรดทราบว่าฟอนต์ที่มีหลายคำในชื่อต้องอยู่ในเครื่องหมายคำพูด ตัวอย่างเช่น ตระกูลแบบอักษร: “Century Gothic”, Arial, Helvetica, Sans-Serif

สิ่งนี้จะบอกเบราว์เซอร์ให้ค้นหาฟอนต์ Century Gothic ก่อน เนื่องจากระบบส่วนใหญ่มีแบบอักษรนี้ ผู้ดูส่วนใหญ่จะเห็นไซต์ที่แสดงโดยใช้ Century Gothic สำหรับผู้ชมที่ไม่มี Century Gothic เบราว์เซอร์จะถอยกลับไปเป็น Arial ก่อน ตามด้วย Helvetica และสุดท้ายเป็นทางเลือก Sans-Serif

7. ปัจจัยที่เกี่ยวข้องกับลักษณะทางกายภาพของแบบอักษรสามารถมีอิทธิพลต่อความยืดหยุ่นของการใช้แบบอักษรสำหรับการออกแบบ

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

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

กรณีศึกษา : ตรวจสอบประเภทการไหล ลากแถบเลื่อนแล้วคุณจะเห็นว่ารูปแบบตัวอักษรตอบสนองเป็นอย่างไร ต้องขอบคุณเครื่องมืออย่าง Superpolator และ FlowType.js

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