ทำความเข้าใจเกี่ยวกับการเขียนตัวอักษรสำหรับเว็บ

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

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

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

วัดย่อหน้าของคุณ

คุณไม่จำเป็นต้องหยุดยั้งหลาสำหรับการวัดแบบนี้ จริงๆแล้วการวัดที่เกี่ยวข้องกับการพิมพ์หมายถึงความกว้าง (แนวนอน) ของย่อหน้าที่ให้ไว้ในหน้าของคุณ ไม่ใช่หัวข้อที่กล่าวถึงเสมอ แต่จะมีผลต่อความสามารถในการอ่านเนื้อหาของคุณ ตามกฎทั่วไปของหัวแม่มือคุณต้องการ จำกัด บรรทัดเดียวที่มีความยาวประมาณ 75-85 อักขระ (ไม่รวมถึงการเว้นวรรค).

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

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

ชั้นนำอธิบาย

ในการออกแบบพร้อมกับการวัดย่อหน้าของคุณคุณควรพิจารณาความคิดของ ชั้นนำ. คำที่ออกเสียง “ledd ไอเอ็นจี”, เช่นตะกั่วที่ใช้ในดินสอ ชื่อนี้มีต้นกำเนิดมาจากวันที่เก่ากว่าของการเรียงพิมพ์เชิงกลโดยมีการวางแถบตะกั่วในระหว่างบรรทัดข้อความ.

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

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

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

ใช้ขนาดตัวอักษรธรรมชาติ

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

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

ตอบสนองต่อสภาพแวดล้อมของผู้ใช้

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

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

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

สไตล์ตามบริบท

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

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

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

เล่นกับการเว้นวรรคจดหมาย

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

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

ฉันมักจะใช้ตัวอักษรพิกเซล / จุดของระยะห่างตัวอักษรในหัวกับเมืองหลวงทั้งหมด สิ่งนี้จะแบ่งตัวละครแต่ละตัวด้วยพื้นที่พิเศษบางส่วนและยังปรากฏตามที่กำหนดไว้มาก “หัวข้อ” ดู. การเว้นวรรคตัวอักษรเชิงลบใช้งานได้ดีในบริบทที่เหมาะสม ฉันมักจะติดกับหน่วยที่เล็กกว่าอาจ -0.03em หรือ -0.1em ที่มากที่สุด.

การรวมและการจับคู่ Typefaces

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

โดยการรวมกันที่นิยมมากที่สุดของ typefaces รวมถึงการแยก serif / sans-serif สำหรับเนื้อหาส่วนหัวและย่อหน้า ฉันต้องการสลับทั้งสองอย่าง แต่ส่วนใหญ่ฉันจะใช้แบบอักษร serif ในส่วนหัว เครื่องหมายพิเศษและลายเส้นบนตัวอักษรแต่ละตัวทำให้ดูเด่นชัดยิ่งขึ้นเมื่อเป็นข้อความของหน้า.

นอกจากนี้ฟอนต์ sans-serif นั้นสะอาดและง่ายกว่าในการรวมประโยค ไม่ได้หมายความว่าแบบอักษร serif จะไม่ทำงานในย่อหน้า อันที่จริงมีตัวอย่างที่ดีมากมาย! แต่แนวคิดที่รู้จักกันน้อยชื่อ x ความสูงนั้นสำคัญอย่างยิ่งสำหรับการจำแนกความซับซ้อนของแบบอักษร จากการดูพื้นฐานของคำสองคำคุณจะเข้าใจว่าฟอนต์ดังกล่าวจะเป็นอย่างไร “พอดี” กับแต่ละอื่น ๆ.

นอกจากนี้ยังควรคำนึงถึงความสำคัญของช่องว่างระหว่างองค์ประกอบต่าง ๆ เหล่านี้ด้วย คุณน่าจะใช้รูปแบบส่วนหัวที่แตกต่างกัน 2 หรือ 3 รูปแบบดังนั้นรูปแบบเหล่านี้แต่ละรูปแบบจึงมีลักษณะแตกต่างกัน ฉันมักจะทำให้องค์ประกอบ h2 / h3 ของฉันอยู่ใกล้กับบล็อกย่อหน้าต่อไปนี้เล็กน้อยเนื่องจากนี่แสดงว่ามีความสัมพันธ์กันระหว่างเนื้อหา.

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

ข้อสรุป

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

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

มากกว่า…

นี่คือข้อความที่เกี่ยวข้องกับการพิมพ์เพิ่มเติม:

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