5 ฟอนต์ที่ปลอดภัยบนเว็บที่คุณสามารถใช้ได้ในเว็บไซต์ของคุณ

เผยแพร่แล้ว: 2020-10-07

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

แสดง สารบัญ
  • Web Safe Font คืออะไร?
  • เหตุใดแบบอักษรที่ปลอดภัยบนเว็บจึงมีความสำคัญ
  • ตระกูลฟอนต์ห้าตระกูลคืออะไร?
    • 1. เล่นหาง (เช่น Zapf-Chancery)
    • 2. แฟนตาซี (เช่น Star Wars)
    • 3. Serif (เช่น Times New Roman)
    • 4. Sans-serif (เช่น เฮลเวติกา)
    • 5. Monospace (เช่น Courier)
  • แบบอักษรบนเว็บยอดนิยม:
    • 1. แอเรียล
    • 2. ไทม์นิวโรมัน
    • 3. เฮลเวติกา
    • 4. จัดส่ง
    • 5. คาลิบริ
  • เครื่องมือแบบอักษรเพื่อเช็คเอาท์
    • คู่อักษร
    • Wordmark.it
    • WhatTheFont
  • วิธีเพิ่มแบบอักษรที่ปลอดภัยสำหรับเว็บลงในเว็บไซต์ของฉัน

Web Safe Font คืออะไร?

typography-แบบอักษร-ตัวอักษร-ตัวอักษร-design

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

แนะนำสำหรับคุณ: 20 ฟอนต์ออกแบบโลโก้อันน่าทึ่งที่นักออกแบบที่ยอดเยี่ยมทุกคนต้องการ

เหตุใดแบบอักษรที่ปลอดภัยบนเว็บจึงมีความสำคัญ

โลโก้-ออกแบบ-ฟอนต์-สเก็ตช์

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

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

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

ตระกูลฟอนต์ห้าตระกูลคืออะไร?

แบบอักษร Photoshop ฟรี! แนะนำ

ในวิชาการพิมพ์ ฟอนต์ทั้งหมดจะถูกจัดประเภทเป็นหนึ่งในห้าตระกูลฟอนต์ตามความคล้ายคลึงกันในการออกแบบ เหล่านี้มีดังนี้:

1. เล่นหาง (เช่น Zapf-Chancery)

Web Safe Fonts - จุดที่ 1

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

2. แฟนตาซี (เช่น Star Wars)

Web Safe Fonts - จุดที่ 2

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

3. Serif (เช่น Times New Roman)

Web Safe Fonts - จุดที่ 3

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

4. Sans-serif (เช่น เฮลเวติกา)

Web Safe Fonts - จุดที่ 4

ซึ่งแตกต่างจากแบบอักษรจากตระกูล Serif แบบอักษรของตระกูล Sans-serif ไม่มีเส้นเล็กติดอยู่ที่ตัวอักษรทุกตัว แบบอักษรส่วนใหญ่ในตระกูลนี้มีความกว้างของเส้นขีดใกล้เคียงกัน จึงทำให้เป็นแบบมินิมอลและทันสมัย

5. Monospace (เช่น Courier)

Web Safe Fonts - จุดที่ 5

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

คุณอาจชอบ: 11 ฟอนต์ Photoshop สุดเจ๋งที่คุณต้องลอง (ฟรี!)

แบบอักษรบนเว็บยอดนิยม:

ออกแบบเว็บบล็อก wordpress แบบอักษรตัวพิมพ์ปรับแต่ง

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

1. แอเรียล

Arial-แบบอักษร

หนึ่งในฟอนต์ sans-serif ที่ใช้กันอย่างแพร่หลายทั้งในสื่อออนไลน์และสื่อสิ่งพิมพ์ เป็นมาตรฐานโดยพฤตินัย OpenType เวอร์ชัน 3.0 อธิบายว่า:

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

นอกจากนี้ยังเป็นแบบอักษรเริ่มต้นใน Google เอกสาร

2. ไทม์นิวโรมัน

ไทมส์-นิว-โรมัน-ฟอนต์

Times New Roman เป็นรูปแบบหนึ่งของฟอนต์ Times แบบเก่าจากตระกูลฟอนต์ Serif ก่อตั้งโดยหนังสือพิมพ์ The Times ของอังกฤษในปี 1931 และออกแบบโดย Stanley Morison ที่ปรึกษาด้านศิลปะของ Monotype บริษัทอุปกรณ์การพิมพ์ และร่วมมือกับ Victor Lardent จากแผนกตัวอักษรของ Time's Advertising มันกลายเป็นหนึ่งในฟอนต์ยอดนิยมตลอดกาล และติดตั้งไว้ล่วงหน้าในอุปกรณ์ส่วนใหญ่

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

3. เฮลเวติกา

Helvetica-ฟอนต์

Helvetica หรือ Neue Haas Grotesk เป็นฟอนต์ที่ใช้กันอย่างแพร่หลายจากตระกูลฟอนต์ Sans-serif พัฒนาขึ้นในปี 1957 โดย Max Miedinger นักออกแบบฟอนต์ชาวสวิส โดยข้อมูลจาก Eduard Hoffmann ได้รับการออกแบบในรูปแบบนีโอพิสดารที่มีความสูง x สูง การสิ้นสุดของเส้นขีดในแนวนอนหรือแนวตั้ง และระยะห่างระหว่างตัวอักษรที่แน่นผิดปกติ ซึ่งรวมกันแล้วทำให้มีลักษณะที่มั่นคงและหนาแน่น เดิมทีออกแบบมาเพื่อใช้เป็นฟอนต์กลางๆ มีความชัดเจนมาก ไม่มีความหมายแฝงในรูปแบบใด และสามารถใช้กับป้ายได้หลากหลาย และตั้งชื่อว่า Neue Haas Grotesk (นิว ฮาส โกรเตสค์) ใบอนุญาตนี้ได้รับใบอนุญาตอย่างรวดเร็วจาก Linotype และเปลี่ยนชื่อเป็น Helvetica ในปี 1960 , ภาษาละตินสำหรับชาวสวิส. ฟอนต์นี้เป็นที่ชื่นชอบของนักออกแบบเนื่องจากความเป็นกลางและเป็นที่ชื่นชอบของแบรนด์ดังมากมาย เช่น Jeep, Kawasaki, Motorola และ BMW

4. จัดส่ง

Courier-แบบอักษร

ฟอนต์ Courier เป็นฟอนต์ที่อยู่ในตระกูลฟอนต์ Serif ได้รับการออกแบบโดย Howard “Bud” Kettler เดิมสำหรับเครื่องพิมพ์ดีดของ IBM มันถูกดัดแปลงเพื่อใช้เป็นแบบอักษรคอมพิวเตอร์และคอมพิวเตอร์เกือบทุกเครื่องติดตั้งมาพร้อมกับมัน เนื่องจากชุดเรียงพิมพ์แบบ Monospace ในปี 1990 จึงพบว่ามีการใช้ใหม่ในอุตสาหกรรมอิเล็กทรอนิกส์และคอมพิวเตอร์ ซึ่งคอลัมน์ของอักขระต้องเรียงกันอย่างสม่ำเสมอ ตัวอย่างเช่น ในการเขียนโค้ดซึ่งเป็นฟอนต์เริ่มต้นในการเขียนหรืออธิบายโค้ดชนิดใดก็ได้

ตามมาตรฐานอุตสาหกรรม บทภาพยนตร์ทั้งหมดจะต้องเขียนด้วย 12-point Courier กระทรวงการต่างประเทศของสหรัฐอเมริกาใช้เป็นแบบอักษรมาตรฐานสำหรับเอกสารทั้งหมดจนถึงเดือนมกราคม 2547 ด้วยการใช้งานที่เพิ่มขึ้นในอุตสาหกรรมดิจิทัล Courier ได้พัฒนารูปแบบต่างๆ ที่มีคุณสมบัติ เช่น เครื่องหมายวรรคตอนที่ใหญ่ขึ้น ความแตกต่างที่ชัดเจนยิ่งขึ้นระหว่างอักขระที่คล้ายกัน (เช่น ตัวเลข 0 / O ตัวพิมพ์ใหญ่และตัวเลข 1 / L ตัวพิมพ์เล็ก) ฯลฯ เพื่อความชัดเจนของหน้าจอที่มากขึ้น

5. คาลิบริ

Calibri-แบบอักษร

ฟอนต์ Calibri เป็นสมาชิกของตระกูลฟอนต์ Sans-serif ที่ออกแบบโดย Lucas de Groot ในปี 2545-2547 เปิดตัวสู่สาธารณะในปี 2550 โดยมาพร้อมกับ Microsoft Office 2007 และ Windows Vista เริ่มจาก Office 2007 โดยแทนที่ Times New Roman เป็นฟอนต์เริ่มต้นใน MS Word และ Arial เป็นฟอนต์เริ่มต้นสำหรับ MS Powerpoint, MS Excel, Microsoft Outlook และ WordPad เป็นส่วนหนึ่งของ ClearType Fonts Collection ที่ออกแบบมาเพื่อทำงานร่วมกับระบบการเรนเดอร์ข้อความ ClearType โดย Microsoft เพื่อทำให้ข้อความชัดเจนขึ้นเมื่ออ่านบนจอแสดงผลคริสตัลเหลว (LCD)

เครื่องมือแบบอักษรเพื่อเช็คเอาท์

เครื่องมือการกำหนดค่าการตั้งค่าชิ้นส่วนความต้องการ

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

คู่อักษร

Web Safe Fonts - จุดที่ 1

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

Wordmark.it

Web Safe Fonts - จุดที่ 2

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

WhatTheFont

Web Safe Fonts - จุดที่ 3

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

คุณอาจชอบ: 3 วิธีในการเพิ่มแบบอักษรที่กำหนดเองในธีมเว็บไซต์ WordPress ของคุณ

วิธีเพิ่มแบบอักษรที่ปลอดภัยสำหรับเว็บลงในเว็บไซต์ของฉัน

ถามตัวเองสามคำถามเพื่อประเมินผลลัพธ์

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

1. เปิดไฟล์ header.php ของคุณ

2. คัดลอกแหล่งที่มาของฟอนต์/รหัสมาตรฐาน โดยปกติคุณสามารถค้นหาได้ทาง Google

รหัส-1

3. วางรหัสที่ด้านบนของไฟล์ส่วนหัวของคุณ

4. โหลด style.css ของคุณ ใส่โค้ดฟอนต์เพื่อเปลี่ยนข้อความฟอนต์ที่คุณต้องการ

รหัส-2

ในตอนท้าย สไตล์ชีตของคุณควรมีลักษณะดังนี้:

รหัส-3
ผู้เขียน-ภาพ-อภัยงค์-ศรีเนตร
บทความนี้เขียนโดย Abhyank Srinet Abhyank สำเร็จการศึกษาระดับปริญญาโทด้านการจัดการจาก ESCP Europe และมีปริญญาด้านวิศวกรรมที่มีความเชี่ยวชาญด้านเครื่องมือวัดและการควบคุม ความสนใจของเขาเกี่ยวกับภูมิทัศน์ทางดิจิทัลเป็นแรงบันดาลใจให้เขาสร้างการเริ่มต้นออนไลน์สำหรับการให้คำปรึกษาด้านการสมัคร (MiM-Essay) โดยมุ่งเน้นที่การเผยแพร่ข้อมูลที่มีคุณภาพเกี่ยวกับปริญญาโทสาขาอาชีพในช่วงต้น