สําหรับเว็บไซต์มืออาชีพ ให้เลือกแบบอักษรข้อความที่อ่านง่าย และอย่างมากที่สุดคือตระกูลที่สองที่จะระบุอักขระให้กับชื่อเรื่อง sans-serif แบบธรรมดาเหมาะสําหรับไซต์ส่วนใหญ่ serif สามารถเสริมภาพลักษณ์ด้านบรรณาธิการ พรีเมี่ยม หรือมรดกได้
คู่มือที่เขียนโดย SiteQuiVend ผู้เชี่ยวชาญด้านการสร้างและออกแบบเว็บไซต์และร้านค้า Shopify ใหม่ ข้อมูลอัปเดตในเดือนสิงหาคม 2569
วิธีการรับรู้แบบอักษรมืออาชีพ?
ความเป็นมืออาชีพมาจากระบบการพิมพ์ที่สอดคล้องกัน ก่อนที่จะเลือกชื่อที่รู้จักให้ประเมินสภาพการใช้งานจริง
ความสามารถในการอ่าน
ตัวอักษรจะต้องคงความแตกต่างไว้ในเนื้อหาขนาดเล็ก: สังเกตโดยเฉพาะอย่างยิ่ง "i", "l", "I", ตัวเลขและสําเนียง ทดสอบย่อหน้าจริงไม่ใช่แค่ชื่อแบรนด์
ความสม่ําเสมอกับการวางตําแหน่ง
เรขาคณิตที่คมชัดสามารถทําให้เกิดเทคโนโลยีหรือความทันสมัยเซอริฟที่ตัดกันสามารถแนะนําการเผยแพร่หรือระดับไฮเอนด์ เอฟเฟกต์จะต้องสนับสนุนข้อเสนอโดยไม่ต้องล้อเลียน
ครอบครัวที่สมบูรณ์เพียงพอ
ตรวจสอบไขมันที่มีอยู่จริงตัวเอียงสําเนียงฝรั่งเศสสัญลักษณ์ยูโรและภาษาของตลาดเป้าหมาย ตัวแปรที่หนาขึ้นเทียมไม่ค่อยให้ผลลัพธ์ที่สะอาด
ใบอนุญาตและความพร้อม
แบบอักษรเชิงพาณิชย์ต้องมีใบอนุญาตที่เป็นมิตรกับเว็บ บน Shopify ตัวเลือกที่มีจะขึ้นอยู่กับธีม; แบบอักษรที่กําหนดเองอาจต้องมีการบูรณาการทางเทคนิค
Serif, sans-serif, จอแสดงผล: เลือกตระกูลไหน?
| ครอบครัว | การใช้งานที่แนะนํา | ผลกระทบบ่อยครั้ง | จุดเฝ้าระวัง |
|---|---|---|---|
| แซนส์-เซอริฟ | ตัวเครื่อง เมนู ปุ่ม อินเทอร์เฟซ | ชัดเจน ทันสมัย ตรงไปตรงมา | รูปทรงเรขาคณิตบางอันมีความเย็นหรือแน่นในย่อหน้า |
| เซริฟ | ชื่อเรื่อง บทบรรณาธิการ แบรนด์ระดับพรีเมียม | สง่างาม มีวัฒนธรรม ก่อตั้งขึ้น | คอนทราสต์ละเอียดจะสูญเสียความคมชัดบนหน้าจอขนาดเล็ก |
| แสดง | ตะขอสั้นมาก | โดดเด่นแสดงออก | หลีกเลี่ยงย่อหน้า การนําทาง และแบบฟอร์ม |
| มินิแวน | รหัส ข้อมูล หรือรายละเอียดทางเทคนิค | แม่นยําทางเทคนิค | เหนื่อยเป็นฟอนต์หลักบนเว็บไซต์เชิงพาณิชย์ |
| ระบบ | ไซต์ที่รวดเร็วและอินเทอร์เฟซที่เงียบขรึม | คุ้นเคย มีประสิทธิภาพ | การเรนเดอร์จะแตกต่างกันไปตามระบบปฏิบัติการ |
ในโครงการส่วนใหญ่ sans-serif สําหรับร่างกายก็เพียงพอแล้ว เพิ่มครอบครัวที่สองเฉพาะในกรณีที่สร้างลําดับชั้นที่มีประโยชน์ การคูณแบบอักษรไม่ได้ทําให้การออกแบบสมบูรณ์ยิ่งขึ้น: มันแยกส่วนหน้า
ฉันควรใช้การเชื่อมโยงแบบอักษรใดในทางปฏิบัติ?
ชุดค่าผสมเหล่านี้เป็นทิศทางในการทดสอบไม่ใช่ใบสั่งยา ความพร้อมใช้งานของพวกเขาขึ้นอยู่กับธีมใบอนุญาตและวิธีการโฮสต์ของคุณ
มีสติและหลากหลาย
อินเตอร์สําหรับชื่อเรื่องและข้อความ ขนาดและจาระบีสร้างลําดับชั้นโดยไม่ต้องคูณไฟล์ โซลูชันนี้เหมาะสําหรับบริการ SaaS และร้านค้าร่วมสมัย
ทันสมัยและเข้าถึงได้
Manrope สําหรับชื่อเรื่อง Source Sans 3 สําหรับร่างกาย ความแตกต่างยังคงรอบคอบ โดยมีลักษณะเฉพาะอยู่ในตะขอและการอ่านที่สะดวกสบาย
พรีเมี่ยมและบรรณาธิการ
Playfair Display สําหรับชื่อเรื่อง Inter หรือ Lato สําหรับร่างกาย เซอริฟนําตัวละคร; sans-serif รักษาความสามารถในการอ่าน สํารอง Playfair สําหรับข้อความสั้น
คุ้นเคยและเชิงพาณิชย์
มอนต์เซอร์รัตสําหรับตําแหน่ง Open Sans สําหรับร่างกาย สมาคมที่รู้จักกันดีนี้ชัดเจน บุคลิกของเขาจะมาจากสี รูปภาพ และเลย์เอาต์เป็นหลัก
system-ui, -apple-system, "Segoe UI", sans-serif. Shopify แนะนําให้พิจารณาแบบอักษรของระบบที่มีอยู่แล้วในเครื่องเพื่อหลีกเลี่ยงการดาวน์โหลดที่อาจทําให้ร้านค้าช้าลงขนาด จาระบี และระยะห่าง: แบบอักษรไม่เพียงพอ
การพิมพ์แบบมืออาชีพอาศัยลําดับชั้นมากกว่าชื่อสกุล นี่คือค่าเริ่มต้นเพื่อปรับให้เข้ากับการออกแบบแบบอักษรจริง
ข้อความทั่วไป
เริ่มต้นประมาณ 16 px หรือ 1 rem โดยมีความสูงของบรรทัด 1.5 ถึง 1.7 แบบอักษรขนาดเล็กที่มองเห็นได้อาจต้องการมากกว่านี้
ชื่อเรื่อง
สร้างช่องว่างที่ชัดเจนระหว่างระดับ บนมือถือมาตราส่วนของเหลวจะหลีกเลี่ยงคําที่ถูกตัดและบล็อกที่สูงเกินไป
ไขมัน
น้ําหนักสองหรือสามน้ําหนักก็เพียงพอแล้ว: ปกติสําหรับข้อความ กึ่งตัวหนาสําหรับการอ้างอิง และแข็งแกร่งสําหรับชื่อเรื่อง
ความกว้างในการอ่าน
หลีกเลี่ยงย่อหน้าที่จะวิ่งผ่านหน้าจอขนาดใหญ่ทั้งหมด เส้นปานกลางทําให้ง่ายต่อการย้ายไปยังหน้าจอถัดไป
คําแนะนําในการเข้าถึงของ Shopify ระบุขนาดร่างกายขั้นต่ํา 16 px และเตือนว่าแบบอักษรสองตัวที่มีขนาดเท่ากันอาจปรากฏแตกต่างกัน W3C ยังกําหนดให้เนื้อหารองรับการขยายข้อความโดยไม่สูญเสียหรือทับซ้อนกัน
วิธีการรักษาความเร็วและการเข้าถึง?
จํากัดไฟล์
โหลดเฉพาะครอบครัวน้ําหนักรูปแบบและตัวอักษรที่ใช้ แบบอักษรของโลโก้ในภาพไม่จําเป็นทุกที่
เลือกรูปแบบเว็บ
สําหรับการบูรณาการส่วนบุคคล โดยทั่วไปจะเลือก WOFF2 และจัดให้มีครอบครัวบรรเทาทุกข์อย่างใกล้ชิด
หลีกเลี่ยงข้อความที่มองไม่เห็น
font-display ตรวจสอบการเปลี่ยนตํารวจฉุกเฉิน ทางเลือกระหว่าง swap, fallback หรือ optional ขึ้นอยู่กับการประนีประนอมด้านภาพและประสิทธิภาพ
ทดสอบเนื้อหาจริง
ควบคุมสําเนียง ราคา ปุ่ม แบบฟอร์ม และการแปล จากนั้นขึ้นบรรทัดใหม่ที่ 375 px และซูม
บน Shopify จะมีการปรับการพิมพ์โดยรวม ร้านค้าออนไลน์→ธีม→แก้ไขธีม→การตั้งค่าธีม→การพิมพ์. แบบอักษรที่มีจะถูกกําหนดโดยผู้พัฒนาธีม ทําซ้ําธีมก่อนการเปลี่ยนแปลงครั้งใหญ่และยังควบคุมหน้าชําระเงินซึ่งมีการตั้งค่าของตัวเอง
การอ้างอิงที่เป็นประโยชน์: เลือกใช้การตั้งค่าการพิมพ์, การเข้าถึงธีม และ แนวทางปฏิบัติด้านประสิทธิภาพเว็บที่ดี.
ข้อผิดพลาดในการพิมพ์ที่ทําให้ดูไม่ชํานาญ
ครอบครัวที่แตกต่างกันมากเกินไป
สามหรือสี่แบบอักษรที่แข่งขันกันทําให้เราไม่สามารถเข้าใจลําดับชั้นได้ เริ่มต้นด้วยครอบครัวเดียวจากนั้นให้เหตุผลในการบวกแต่ละครั้ง
แบบอักษรตกแต่งสําหรับร่างกาย
ลายมือ แคบหรือตัดกันมาก สามารถใช้งานได้ในตะขอ แต่จะติดยางอย่างรวดเร็วในคําอธิบาย คําถามที่พบบ่อย หรือแบบฟอร์ม
ความแตกต่างที่อ่อนแอเกินไป
จาระบีเนื้อละเอียดสีเทาอ่อนบนพื้นหลังสีขาวดูหรูหราในโมเดล แต่จะอ่านได้ยากบนหน้าจอที่สว่างหรือสําหรับผู้มีความบกพร่องทางการมองเห็น
เปลี่ยนโดยไม่ต้องตรวจสอบธีมทั้งหมด
แบบอักษรใหม่เปลี่ยนความกว้างของปุ่มความสูงของการ์ดและบรรทัดใหม่ ตรวจสอบบ้านคอลเลกชันผลิตภัณฑ์ตะกร้าสินค้าแบบฟอร์มและมือถือ
หากตัวพิมพ์ของคุณเป็นเพียงหนึ่งในสัญญาณของการออกแบบที่เก่าแล้ว ลองดูด้วย สัญญาณที่บ่งบอกว่าร้าน Shopify ขาดความเป็นมืออาชีพ และคู่มือสําหรับ อัพเกรดร้านค้า Shopify เก่า.
คุณควรเลือกบริการ SiteQuiVend ใด?
คําแนะนําสามประการมุ่งเน้นไปที่ความชัดเจนของไซต์ความไว้วางใจและประสบการณ์ การวินิจฉัยครั้งแรกนี้ไม่ได้แทนที่การตรวจสอบที่สมบูรณ์
3 คําของ่ายๆภายในขีด จํากัด ของหนึ่งชั่วโมงโดยมีการประกาศการตอบสนองครั้งแรกภายใน 48 ถึง 72 ชั่วโมงการทํางาน ความเป็นไปได้ขึ้นอยู่กับธีมและขอบเขต
5 หน้าหรือรุ่นสําคัญ สูงสุด 10 ผลิตภัณฑ์และ 3 คอลเลกชัน โดยมีกําหนดเวลา 5 ถึง 7 วันทําการหลังจากได้รับองค์ประกอบที่จําเป็น
การออกใบอนุญาต การรวมไฟล์แบบกําหนดเอง การพัฒนาที่ซับซ้อน และการแทรกแซงนอกแพ็คเกจมีค่าใช้จ่ายแยกต่างหาก
รายการตรวจสอบก่อนตรวจสอบแบบอักษรไซต์ของคุณ
การควบคุมที่จําเป็น 12 ประการ
- สูงสุดหนึ่งหรือสองครอบครัว
- มีสําเนียงและสัญลักษณ์ให้เลือก
- ใบอนุญาตอนุญาตให้ใช้เว็บ
- ร่างกายยังคงสบายประมาณ 16 px ขึ้นไป
- ระดับชื่อเรื่องมีความแตกต่างกัน
- ไขมันไม่ได้แทนที่ลําดับชั้น
- ปุ่มยังคงอ่านได้และค่อนข้างกว้าง
- ความแตกต่างก็เพียงพอแล้วในแต่ละพื้นหลัง
- ย่อหน้าไม่กว้างเกินไป
- ไม่ได้โหลดไฟล์และไขมันที่ไม่จําเป็น
- ไซต์นี้ดําเนินงานโดยมีกองกําลังตํารวจสํารอง
- บ้าน ผลิตภัณฑ์ รถเข็น และมือถือ ได้รับการตรวจสอบแล้ว
คําถามที่พบบ่อย: การเลือกแบบอักษรจากเว็บไซต์มืออาชีพ
แบบอักษรที่ดีที่สุดสําหรับไซต์มืออาชีพคืออะไร?
ไม่มีที่เป็นสากล Inter, Manrope, Source Sans 3, Open Sans หรือสแต็กระบบเป็นฐานที่อ่านได้เพื่อปรับให้เข้ากับแบรนด์และธีม
คุณควรใช้แบบอักษรกี่แบบบนเว็บไซต์?
ครอบครัวที่สมบูรณ์มักจะเพียงพอ สองงานถ้าหนึ่งโครงสร้างชื่อเรื่องและอีกคนหนึ่งอํานวยความสะดวกในร่างกาย นอกเหนือจากนั้นความสม่ําเสมอจะกลายเป็นเรื่องซับซ้อน
serif font เป็นมืออาชีพหรือไม่?
ใช่โดยเฉพาะอย่างยิ่งสําหรับจักรวาลบรรณาธิการหรือพรีเมี่ยม เลือกภาพวาดที่อ่านได้และสงวนรูปทรงที่ดีสําหรับข้อความที่ค่อนข้างใหญ่
ขนาดตัวอักษรที่จะใช้บนมือถือ?
สําหรับตัว 16 px หรือ 1 rem เป็นจุดเริ่มต้นที่ปลอดภัย ปรับให้เข้ากับความสูงของภาพของตัวอักษร
Google แบบอักษรทําให้ไซต์ช้าลงหรือไม่?
แบบอักษรเว็บใด ๆ เพิ่มไฟล์ที่มีศักยภาพ ผลกระทบขึ้นอยู่กับโฮสติ้งจาระบีชุดย่อยและการแสดงผล
คุณสามารถเพิ่มแบบอักษรที่กําหนดเองบน Shopify ได้หรือไม่?
ใช่ ขึ้นอยู่กับธีมและใบอนุญาต แบบอักษรที่ขาดหายไปจากตัวเลือกอาจต้องใช้ไฟล์และการแก้ไขทางเทคนิค
คุณควรใช้แบบอักษรเดียวกันในการชําระเงิน Shopify หรือไม่?
ความสม่ําเสมอเป็นที่ต้องการในตัวเลือกที่มีอยู่ ตัวแก้ไขการชําระเงินช่วยให้คุณสามารถปรับชื่อเรื่องและร่างกายได้
การเปลี่ยนแบบอักษรสามารถเพียงพอที่จะทําให้ไซต์ทันสมัยได้หรือไม่?
บางครั้ง. ถ้าสี ระยะห่าง ส่วนประกอบ และลวดลาย ไม่สอดคล้องกัน ตัวอักษร เพียงอย่างเดียวจะไม่เพียงพอ
