11 ฟอนต์ออกแบบเว็บไซต์ที่จะทำให้เว็บไซต์ของคุณดูใหม่

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

สิ่งที่แยก "สุดยอด" ออกจากสามัญ? เมื่อตัวละครในภาพยนตร์หัวโตสีน้ำเงินตัวหนึ่งอุทานว่า “การนำเสนอ!”

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

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

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

วิธีเลือกแบบอักษรสำหรับออกแบบเว็บ

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

1. ความชัดเจนและอ่านง่าย
2. ความสอดคล้องของแบรนด์
3. มู้ดแอนด์โทน
4. หลักเกณฑ์การเข้าถึงเว็บ
5. ความเข้ากันได้ข้ามเบราว์เซอร์
6. ความสามารถในการปรับขนาด

1. ความชัดเจนและอ่านง่าย

ความชัดเจนคือความง่ายที่ผู้ใช้ของคุณสามารถแยกแยะความแตกต่างระหว่างอักขระต่างๆ หากเครื่องอ่านของคุณมีปัญหาในการระบุว่าตัวอักษรเป็น "S" ของ "5" หรือไม่ คุณอาจต้องเลือกแบบอักษรอื่น แบบอักษรบางตัวมีรูปร่างที่แตกต่างกันสำหรับอักขระที่คล้ายกัน (เช่น "1" ตัวพิมพ์ใหญ่ "I" และตัวพิมพ์เล็ก "l") เพื่อแยกความแตกต่างออกจากกัน

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

ในเรื่องนั้น ความชัดเจนแตกต่างจากการอ่านง่าย

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

2. ความสม่ำเสมอของแบรนด์

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

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

3. มู้ดแอนด์โทน

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

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

4. หลักเกณฑ์การเข้าถึงเว็บ

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

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

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

การอ่านที่แนะนำ: แนวคิดการออกแบบเว็บไซต์ที่ให้ความสำคัญกับลูกค้าเป็นศูนย์กลาง

5. ความเข้ากันได้ข้ามเบราว์เซอร์

คุณต้องพิจารณาว่าผู้ใช้บางคนไม่ต้องการใช้เว็บเบราว์เซอร์ยอดนิยมเช่น Chrome หรือ Mozilla (ด้วยเหตุผลใดก็ตาม) ในบางกรณี เบราว์เซอร์ทางเลือกเหล่านี้ใช้แบบอักษรทดแทน เช่น Arial หรือ Times New Roman เพื่อแสดงข้อความของคุณ ใช้แบบอักษรที่สามารถแสดงได้อย่างถูกต้องโดยเบราว์เซอร์ส่วนใหญ่ หากไม่ใช่ทั้งหมด

รูปแบบตัวอักษรสี่รูปแบบที่เว็บไซต์รองรับได้แก่:

• แบบฝังตัวเปิด (EOT) รองรับเฉพาะเบราว์เซอร์ Microsoft (Internet Explorer และ Microsoft Edge)
• True Type Font/Open Type Font (TTF/OTF) ก่อตั้งโดย Apple และ Microsoft ในปี 1980 รูปแบบเหล่านี้รองรับโดยเบราว์เซอร์หลักทั้งหมด ได้แก่ Chrome, Firefox, Opera, Microsoft Edge และ Internet Explorer
• รูปแบบแบบอักษรเปิดเว็บ (WOFF) ก่อตั้งโดย Mozilla ในปี 2009 รูปแบบนี้เป็นเวอร์ชันบีบอัดของ TTF/OTF ที่ทำให้โหลดเร็วขึ้น
• รูปแบบแบบอักษรเปิดเว็บ (WOFF2) การแก้ไข WOFF ก่อนหน้านี้ ผู้เล่นหลัก ได้แก่ Chrome, Firefox และ Opera; มันถูกออกแบบมาเพื่อแทนที่ WOFF และจะทำเช่นนั้นในที่สุด

โปรดทราบว่ารูปแบบที่ใช้บ่อยที่สุด ณ เวลานี้คือ TTF/OTF และ WOFF แบบอักษรที่ใช้รูปแบบเหล่านี้สามารถแสดงได้อย่างถูกต้องในเบราว์เซอร์ที่รองรับทั้งหมด

6. ความสามารถในการปรับขนาด

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

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

ฟอนต์ออกแบบเว็บยอดนิยม

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

1. เปิด Sans

Open Sans เป็นฟอนต์แบบ "ไม่หรูหรา" ตรงประเด็นและไม่ยุ่งเกี่ยวกับข้อความของคุณ Open Sans นั้นมีความหลากหลายอย่างน่าประหลาดใจ มันดูเป็นทางการแต่ก็ยังได้รับ "รูปลักษณ์ที่เป็นกลางแต่เป็นมิตร" โดยนักออกแบบ

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

คุณสามารถดูได้ว่าเหตุใด Open Sans จึงเป็นที่นิยมใช้ทางออนไลน์ ในความเป็นจริงมีเว็บไซต์มากกว่า 84 ล้านแห่งใช้งานไม่ทางใดก็ทางหนึ่ง บางส่วนของเว็บไซต์เหล่านี้รวมถึง:

• อัพเวิร์ค
• วนา
• เอโทลดิจิตอล
• นิตยสารเซ้นส์

2. โรโบโต้

Roboto เป็นอีกหนึ่งแบบอักษรยอดนิยมที่แนะนำโดยนักออกแบบ เป็นแบบอักษรที่มีลักษณะแข็งและเป็นรูปทรงเรขาคณิต ในขณะที่มี "เส้นโค้งที่เป็นมิตรและเปิดกว้าง" ตัวอักษรดูแน่นกว่ากัน ทำให้การอ่านมีจังหวะมากขึ้น

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

ไม่น่าแปลกใจที่กว่า 630 ล้านเว็บไซต์ รวมถึง Google และ YouTube ใช้ Roboto อย่างเคร่งครัด

3. ลาโต้

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

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

ความคุ้นเคยและความอบอุ่นยังเป็นหัวข้อใหญ่ในแบบอักษร Lato (ฤดูร้อนในภาษาโปแลนด์) ได้รับการออกแบบโดยคำนึงถึงความรู้สึกของฤดูร้อนเป็นหลัก มันเข้มงวดแต่ไม่มากเกินไป ให้น้ำเสียงที่จริงจังแต่ปลอบประโลม

ตัวอย่างที่ดีของการใช้ Lato สามารถพบได้ใน Bundl ซึ่งเป็นไซต์ร่วมทุนของบริษัท

4. เฮลเวติกา

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

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

นอกจากนี้ เฮลเวติกายังมีการพัฒนาอย่างต่อเนื่องตามยุคสมัยเนื่องจากมีความยืดหยุ่น แบรนด์ในอุตสาหกรรมต่างๆ ใช้ Helvetica ไม่ทางใดก็ทางหนึ่ง ได้แก่ BMW, Motorola, Nestle, Microsoft และ Apple หน่วยงานรัฐบาลเช่น NASA และสหภาพยุโรปก็มี Helvetica เช่นกัน

5. พร็อกซิมา โนวา

Cameron Moll อดีตหัวหน้าฝ่ายออกแบบของ Facebook ได้เผยแพร่เรื่องราวเกี่ยวกับประวัติของ Proxima Nova เขาอธิบายถึงฟอนต์ว่า “ใช้งานได้หลากหลายอย่างเหลือเชื่อสำหรับอินเทอร์เฟซดิจิทัล ใช้งานได้เหมือนม้าที่ทำงานในขนาดต่างๆ มากมาย และดูโดดเด่นบนจอภาพเรตินา”

Proxima Nova เป็นฟอนต์เฟซที่ออกแบบมาเพื่อจับภาพความกลมของฟอนต์อย่าง Futura และรูปทรงเรขาคณิตของฟอนต์อย่าง Helvetica อย่างไรก็ตาม มันไม่ได้มีลักษณะเฉพาะในเรื่องนี้ เนื่องจากฟอนต์อื่นๆ ก็พยายามทำเช่นเดียวกัน Gotham ได้รับความนิยมมากกว่า Proxima Nova ในช่วงต้นยุค 2000 Moll ให้เหตุผลว่า Proxima Nova พร้อมใช้งานบนเว็บในช่วงแรกทำให้สถานะของมันกลายเป็นแบบอักษรสัญลักษณ์

ตั้งแต่นั้นมา ก็กลายเป็นฟอนต์เชิงพาณิชย์ที่ได้รับความนิยมสูงสุดทางออนไลน์

6. มอนต์เซอร์รัต

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

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

7. ราลเวย์

Raleway เป็นฟอนต์โอเพ่นซอร์สที่มีสไตล์ ซึ่งหมายความว่าใช้งานได้ฟรีและสามารถยืนหยัดในการออกแบบเว็บใดๆ ได้ โดยเฉพาะอย่างยิ่ง "W" อันเป็นเอกลักษณ์

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

8. แหล่งที่มาของ Sans Pro

Source Sans Pro เป็นตระกูลฟอนต์โอเพ่นซอร์สตระกูลแรกของ Adobe ได้รับการออกแบบมาให้ทำงานได้ดีกับส่วนต่อประสานกับผู้ใช้ รูปทรงโค้งมนช่วยให้มองเห็นตัวอักษรได้ง่าย พร้อมเพิ่มช่องว่างระหว่างตัวอักษรแต่ละตัว

คุณภาพที่โดดเด่นที่สุดของ Source Sans Pro คือความชัดเจน และคุณสามารถแยกความแตกต่างระหว่างอักขระที่คล้ายกันได้อย่างง่ายดายโดยอาศัยตัวเลือกการออกแบบที่มีสไตล์ โดยพื้นฐานแล้ว Source Sans Pro นั้นเกี่ยวกับการช่วยสำหรับการเข้าถึง อ่านง่ายและมีน้ำเสียงแบบมืออาชีพ Stanford University และ Adobe ใช้แบบอักษรสำหรับเว็บไซต์ของตน

9. ป๊อปปิ้นส์

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

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

แอนิเมชันสตูดิโอ Wonderlust เป็นหนึ่งใน 8.1 ล้านเว็บไซต์ที่ใช้ฟอนต์

10. จอร์เจีย

Georgia ออกแบบโดย Microsoft เป็นฟอนต์ที่ตั้งใจให้อ่านได้ในรูปแบบดิจิทัล ดูสวยงามและอ่านง่าย แม้บนหน้าจอความละเอียดต่ำ

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

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

11. การแสดง Playfair

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

วิธีใช้ฟอนต์ออกแบบเว็บอย่างมีประสิทธิภาพ

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

1. การจับคู่แบบอักษรและการรวมกัน

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

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

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

2. การสร้างแบบอักษรที่กำหนดเอง

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

3. สิทธิ์การใช้งานและสิทธิ์การใช้งาน

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

4. การทดสอบและการเพิ่มประสิทธิภาพ

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

การอ่านที่แนะนำ: วิธีสร้างเวิร์กโฟลว์การออกแบบและพัฒนาเว็บที่ไร้รอยต่อ

การตั้งค่าฟอนต์สำหรับใช้บนเว็บไซต์

ตอนนี้คุณทราบแล้วว่าฟอนต์ใดที่ใช้กันทั่วไปทางออนไลน์ คุณก็พร้อมที่จะเริ่มใช้ฟอนต์เหล่านั้นแล้ว ต่อไปนี้คือวิธีเริ่มต้น:

1. ดาวน์โหลดและติดตั้งฟอนต์

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

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

เมื่อคุณพบฟอนต์แล้ว เพียงดาวน์โหลดลงในคอมพิวเตอร์ของคุณ ฟอนต์ส่วนใหญ่จะอยู่ในรูปแบบ .ZIP ดังนั้นคุณต้องแตกไฟล์ออกมา เพียงคลิกขวาที่ไฟล์ แล้วเลือก “แตกไฟล์ที่นี่” คุณจะได้ไฟล์ฟอนต์ที่พร้อมติดตั้ง

เพียงคลิกสองครั้งที่ไฟล์แล้วกด "ติดตั้ง" บนหน้าจอแสดงตัวอย่างที่ปรากฏขึ้น

2. ฝังแบบอักษรบนเว็บไซต์ของคุณ

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

โปรดทราบว่ามีรายการตรวจสอบการออกแบบเว็บก่อนที่คุณจะเผยแพร่หน้าเว็บสู่สาธารณะ

3. ตรวจสอบความเข้ากันได้ข้ามเบราว์เซอร์

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

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

เคล็ดลับการเพิ่มประสิทธิภาพแบบอักษรบนเว็บ

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

1. อย่าใช้ฟอนต์มากเกินไป

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

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

2. ใช้แบบอักษรที่ปรับให้เหมาะสมสำหรับแต่ละเบราว์เซอร์

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

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

ประเด็นที่สำคัญ

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

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

ติดต่อกับ Propelrr วันนี้เพื่อทราบข้อมูลเพิ่มเติมเกี่ยวกับแนวคิดการออกแบบเว็บไซต์ เรายินดีเป็นอย่างยิ่งที่จะช่วยเหลือคุณ หากคุณต้องการความช่วยเหลือหรือข้อมูลเพิ่มเติม ติดต่อเราผ่านทาง Facebook, Twitter หรือ LinkedIn

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