แบบอักษรที่ดีที่สุดสำหรับการปรับปรุงประสบการณ์การอ่าน


13

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

http://iura.cl/cc/44

อย่างที่คุณเห็นฉันได้ถอดทุกอย่างที่ตอนนี้ฉันใช้ Telex webfont ฉันยังมีตัวเลือกสำหรับการอ่านกลางคืนที่ควรลดแสงจ้า:

http://iura.cl/cc/44?estilo=nocturno

ฉันสงสัยว่าฉันควรพิจารณาอะไรเกี่ยวกับแบบอักษรที่ฉันเลือกเพื่อให้แน่ใจว่ามันอ่านง่ายหากมีคำแนะนำใด ๆ


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

@ DA01 อาจมีคำแนะนำที่คุณอาจแนะนำหรือไม่
Dan

ไพรเมอร์ที่ดี: amazon.com/Stop-Stealing-Sheep-Works-Edition/dp/0201703394
DA01

1
คำถามดูเหมือนดีสำหรับฉัน - ไม่ใช่ "คุณแนะนำแบบอักษรอะไร" แต่เป็น "วิธีเลือกแบบอักษรที่อ่านได้ง่ายสำหรับเว็บไซต์ " - เกณฑ์มากมาย
user56reinstatemonica8

คำตอบ:


10

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

  1. คิดว่าสำคัญ ขอขอบคุณที่@font-faceคุณสามารถเลือกแบบอักษรเป็นพัน ๆ แบบได้ - แต่แบบอักษรที่ได้รับความนิยมน้อยกว่าหรือแบบใหม่มักจะมีปัญหาในการแสดงผลระหว่างเบราว์เซอร์และระบบปฏิบัติการ หากการอ่านเป็นสิ่งสำคัญของคุณและคุณไม่ต้องการทำการทดสอบข้ามเบราว์เซอร์ข้ามระบบปฏิบัติการจำนวนมหาศาลคุณอาจต้องการเล่นให้ปลอดภัยและใช้แบบอักษรที่เชื่อถือได้ลองและทดสอบ แบบอักษรบนเว็บที่ปลอดภัยแบบเก่าVerdanaและGeorgiaเป็นเดิมพันที่ปลอดภัยเนื่องจากมีการใช้กันอย่างแพร่หลายพวกเขาจะได้รับการทดสอบแม้ในการตั้งค่าเบราว์เซอร์ / ระบบปฏิบัติการที่หายาก บวกกับความคุ้นเคยช่วยในการอ่าน
  2. สูง x สูงและกว้าง คุณไม่ทราบว่าคุณภาพหรือความหนาแน่นของพิกเซลบนหน้าจอของผู้อ่านของคุณคืออะไรดังนั้นหากคุณจัดลำดับความสำคัญในการอ่านให้ตรวจสอบให้แน่ใจว่าคุณลักษณะที่แตกต่างที่สำคัญของตัวอักษรนั้นชัดเจนเป็นพิเศษ แบบอักษรที่ออกแบบมาสำหรับการอ่านเว็บเช่นVerdanaและGeorgiaใช้พิกเซลมากที่สุดเท่าที่เป็นไปได้สำหรับความสูง x ซึ่งมีรายละเอียดที่สำคัญของตัวอักษรและใช้พิกเซลขั้นต่ำบนตัวชี้ขึ้นหรือลงที่จุดหนึ่งหรือสองพิกเซล บอกbจากหรือop
  3. ไม่เบาเกินไป ประเภทแสงดูดีบนหน้าจอการพิมพ์หรือความหนาแน่นของพิกเซลสูง - แต่มีเหตุผลที่ดีว่าทำไมมันจึงไม่ค่อยถูกใช้บนหน้าจอจนกระทั่ง ios7 และเป็นที่ถกเถียงกันอยู่: ถ้าผู้ดูไม่ได้ดูในสภาพที่เหมาะสมเช่นหน้าจอคุณภาพสูง แสงในร่มมันเสี่ยงต่อการอ่าน ไปหาแบบอักษรที่มีน้ำหนักปกติดีเยี่ยม - ฉันไม่ได้พูดถึงVerdanaและGeorgia?

มีฟอนต์มากมายที่ตรงตามเกณฑ์เหล่านี้นอกเหนือจากVerdanaและGeorgiaแน่นอนและบางครั้งทั้งสองนี้ถือว่าเป็นบิตที่น่าเบื่อเพราะจนถึงปี 2009 หรือเมื่อ @fontface กลายเป็นที่นิยมใช้กันอย่างแพร่หลาย .

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


แก้ไข:เมื่อผู้ขาย webtype และ foundaries จะไปที่ปัญหาของการทดสอบสำหรับการอ่านที่ดีที่พวกเขามีแนวโน้มที่จะตะโกนเกี่ยวกับมันในตลาดของพวกเขา ตัวอย่างเช่นซีรี่ส์ "Reading Edge"ของwebtype (ปลายหมวกของChris Burton ที่พูดถึงเรื่องนี้ที่นี่ ) ยังทำแบบทดสอบอย่างกว้างขวาง


1
ฉันไม่ใช่นักออกแบบและฉันมีปัญหากับตาของฉัน ฉันชอบอ่านข้อความสภานิติบัญญัติ แต่ฉันคิดว่าเว็บไซต์ของชาวบราซิลเจ็บบางครั้งดังนั้นฉันจึงใช้คำแนะนำของคุณ (Verdana) และใส่ปลั๊กอินที่เรียกว่าStylishมีความสูง 1.5 บรรทัดขนาดตัวอักษร 16px และสีดำ ตอนนี้ฉันรู้สึกสะดวกสบายมาก
Fabio Montefuscolo

5

ตกลงฉันจะไปข้างหน้าและให้ความคิดของฉันเกี่ยวกับเรื่องนี้ ไม่มีแบบอักษรที่ดีที่สุด 'สุดยอด' และไม่สามารถทำได้เนื่องจากการเลือกแบบอักษรนั้นขึ้นอยู่กับแง่มุมที่แตกต่างกันมากมาย สิ่งที่อาจมีคือ 'วิธีที่ดีที่สุดสำหรับการเลือกแบบอักษร'

ดังนั้นสิ่งที่ควรพิจารณาเพื่อช่วยเลือกแบบอักษรที่ดีที่สุดสำหรับโครงการของคุณ

สื่อ:วิธีแสดงแบบอักษร, กระดาษ, ผ้าใบ, ออนไลน์, อุปกรณ์พกพา ฯลฯ คุณต้องการให้แน่ใจว่าคุณกำลังเลือกแบบอักษรที่เหมาะสมกับสื่อที่จะใช้แสดงตัวอย่างเช่นบล็อกของ Times New Roman อาจดีสำหรับเอกสารที่พิมพ์ แต่บนหน้าจอ (โดยเฉพาะหน้าจอขนาดเล็ก) บล็อกของ Times New Roman อาจอ่านยาก นอกจากนี้คุณยังต้องการดูว่ามีอะไรให้คุณบ้างหากคุณถูก จำกัด ให้ใช้แบบอักษรบนเว็บแหล่งข้อมูลเช่นแบบอักษรของ Googleสามารถช่วยคุณได้ที่นี่ (จาก Wikipedia: "Web Safe Fonts แบบอักษร Web-safe เป็นแบบอักษรที่น่าจะมีอยู่ในระบบคอมพิวเตอร์ที่หลากหลายและใช้โดยผู้เขียนเนื้อหาเว็บเพื่อเพิ่มโอกาสที่เนื้อหาจะแสดงในแบบอักษรที่เลือกหากผู้เข้าชมเว็บ ไซต์ไม่มีแบบอักษรที่ระบุเบราว์เซอร์ของพวกเขาพยายามเลือกทางเลือกที่คล้ายกันโดยขึ้นอยู่กับแบบอักษรสำรองที่ผู้เขียนและตระกูลทั่วไปหรือใช้แทนแบบอักษรที่กำหนดไว้ในระบบปฏิบัติการของผู้เยี่ยมชม ")

ผู้ชม:คิดว่าใครจะอ่าน เด็กหนุ่มสาวอาจจะทำได้ดีกว่าโดยไม่ต้องมีตัวอักษร serif ตามหรือเรื่องเดียว 'a'เมื่อเทียบกับเรื่องคู่ 'a' อย่างไรก็ตามหากมีการกล่าวคำเชิญงานแต่งงานแล้วตัวอักษรเช่นEdwardian Scriptเป็นสิ่งที่ได้รับความนิยมอย่างมากในบริบทนั้นเพราะเราต้องเผชิญกับ Serif มากขึ้นการตกแต่งที่ดีกว่า - ตามที่เจ้าสาวบางคนนั้น;) แม้ว่าจะยังคงเป็นของตกแต่ง ใช้เป็นหลักสำหรับชื่อเรื่องแทนที่จะเป็นเนื้อหาทั้งหมด ในฐานะที่เป็นเฒ่าฉลาด

ความคมชัด / สี:อีกครั้งนี่เป็นสิ่งที่ควรพิจารณาในแง่ของโครงการของคุณ แน่นอนว่าคุณไม่ต้องการที่จะทำให้คนตาบอดเพราะความคมชัดสูงมากหรือทำให้พวกเขามีรอยย่นจากการเหล่ที่สิ่งที่มีความคมชัดต่ำมาก - ส่วนนั้นชัดเจน แต่ขึ้นอยู่กับชุดสีของคุณคุณอาจต้องการเล่นกับการตั้งค่าความสว่างและความคมชัด คุณจะสังเกตเห็นว่าตัวอย่าง GD.SE ไม่ใช่สีดำสนิทและสีขาว (ตามที่ถามและตอบที่นี่ ) - มันมีความแตกต่างต่ำกว่าดังนั้นจึงค่อนข้างง่ายที่จะดูเว็บไซต์นี้เป็นเวลานานโดยการเปรียบเทียบ การมองสิ่งที่มีความเปรียบต่างสูงกว่ามาก - ดวงตาของคุณจะเหนื่อยล้า!

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

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

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

คล้ายคลึงดีก็คือว่ามันเหมือนกับการแต่งตัวแนวคิดที่เรียบง่ายที่จะกล่าวถึงที่นี่

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

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

หวังว่าฉันได้ช่วยและไม่ได้ rambled มากเกินไปฉันหลงใหลเกี่ยวกับตัวอักษรที่เหมาะสม :) ขอให้โชคดีกับโครงการของคุณ


2

ฉันเชื่อว่าแบบอักษรSerifมีแนวโน้มที่จะง่ายต่อการอ่านเป็นเวลานาน เพื่อประสบการณ์การอ่านที่ดีขึ้นฉันคิดว่าแบบอักษร serif อย่าง Adobe Garamond ทำงานได้ดี มันไม่เหมือน "blah" เหมือนครั้ง มีเส้นโค้งที่น่าสนใจบางส่วนใน serifs ที่ช่วยทำให้ "purty" เพิ่มขึ้นอีกเล็กน้อยตราบใดที่ serif font ทำงาน

ป้อนคำอธิบายรูปภาพที่นี่

นี่คือบทความเกี่ยวกับเรื่องที่ฉันมักจะเห็นด้วยกับ:

Serif vs. Sans: การต่อสู้ครั้งสุดท้าย


1
ไม่มีหลักฐานแน่ชัดว่าใบหน้า serif สามารถอ่านได้มากหรือน้อยที่ใบหน้า sans-serif ข้อยกเว้นหนึ่งข้อจะอยู่บนหน้าจอซึ่งการแสดงความละเอียดต่ำอาจทำให้การแสดงรายละเอียดของใบหน้าที่เป็นเรื่องยากขึ้น
DA01

1
Garamond อาจจะสวย แต่อัตราส่วน ex-to-em ที่ต่ำจะทำให้ความสามารถในการอ่านข้อมูลนั้นลดลงหากใช้เป็นฟอนต์บอดี้ แบบอักษร Serif ที่มีความสูงมากกว่าเดิม ได้แก่ Georgia, Bitstream Charter และ Charis SIL
Gavin R. Putland

@ GavinR.Putland คุณช่วยอธิบายเกี่ยวกับอัตราส่วน ex / em ได้ไหม? มันอาจทำให้การอ่านง่ายขึ้นหากระยะห่างบรรทัดน้อยเกินไป = ผิด แนะนำให้เว้นวรรคบรรทัดอย่างน้อย 140%
Mikhail V

@ DA01 ฉันได้สังเกตเห็นแนวโน้มที่ผู้คนพูดถึงการโต้แย้ง "หลักฐาน" ในฐานะผู้เชี่ยวชาญฉันสามารถบอกได้ว่าแบบอักษรที่เหมือนการ์มอนด์นั้นสามารถอ่านได้มากที่สุดและจะบอกผู้เชี่ยวชาญด้านการพิมพ์อื่น ๆ ให้คุณทราบ นี่ไม่ใช่ "หลักฐาน" สำหรับคุณหรือไม่
Mikhail V

@ MikailV นั่นไม่ใช่หลักฐาน นั่นคือความคิดเห็น มีหลักฐานอะไรบ้างที่มีอยู่ (ซึ่งน้อยที่สุด) โน้มตัวไปทาง "ใบหน้าที่อ่านได้มากที่สุดคือใบหน้าที่บุคคลนั้นคุ้นเคยกับการอ่านมากที่สุด"
DA01

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.