ในการวางเค้าโครงการออกแบบเว็บฉันมักจะพยายามทำให้แน่ใจว่าการพิมพ์ของฉันมีสัดส่วนและสอดคล้องกัน อย่างไรก็ตามฉันไม่สามารถค้นหาบทความหรือแหล่งข้อมูลที่ชัดเจนเกี่ยวกับอัตราส่วนและขนาดที่ควรใช้ โดยเฉพาะสิ่งที่แนะนำหรือแนวทางปฏิบัติมาตรฐานสำหรับ:
โปรดพิจารณาทั้งย่อหน้าและข้อความส่วนหัวในคำตอบของคุณ นอกจากนี้การศึกษาใด ๆ เกี่ยวกับประสิทธิภาพของอัตราส่วนหรือตัวชี้วัดต่างๆจะมีประโยชน์มาก
คำตอบ:
องค์ประกอบสไตล์ Typographic ของ Robert Bringhurst เป็นการอ้างอิงที่ละเอียดและยอดเยี่ยมสำหรับสิ่งต่าง ๆ เช่นนี้ มันยาว แต่มีค่ามาก
นักออกแบบจำนวนมากแนะนำให้ใช้เส้นกริดมาตรฐานเพื่อให้เส้น + ช่องว่างภายในพอดีเสมอเช่น 16 พิกเซล อะไรก็ตามที่น้อยกว่านั้นจะมีความสูงของเส้น 16, ทุกอย่างที่อยู่เหนือจะมีความสูงของเส้น 32
ความยาวในอุดมคติของบรรทัดสำหรับการอ่านข้อความมีความยาว 45 ตัวอักษรสำหรับบางคนและ 55-75 แหล่งอื่น
มีค่าเฉลี่ยทั่วไปของเว็บไซต์อยู่ที่นี่: รูปแบบการออกแบบตัวอักษรและแนวปฏิบัติที่ดีที่สุด
ฉันจะบอกว่าเริ่มต้นด้วยย่อหน้าที่ 16px และใช้ลำดับ Fibonacci เพื่อคำนวณส่วนที่เหลือ ดูเหมือนว่าเบราว์เซอร์หลักใช้ตรรกะนี้ ในช่วงหลายปีที่ผ่านมา (สำหรับการวิจัยในอนาคตโดยใช้“ องค์ประกอบของรูปแบบตัวอักษร: เวอร์ชัน 4.0” ของ Robert Bringhurst, Hartley และ Marks) ผู้นำถูกตั้งค่าเป็น 12 พอยต์สำหรับแบบอักษร 10 พอยต์
การแปลง 12 พอยต์เป็นพิกเซลเราได้รับฟอนต์ฐาน 16px
สไตล์ชีตเริ่มต้นของเบราว์เซอร์ส่วนใหญ่ใช้ 16 พิกเซลสำหรับข้อความในย่อหน้าในขณะที่คุณสามารถตรวจสอบ DOM ด้วยตัวคุณเองหรืออ่านhttps://www.w3.org/TR/CSS21/sample.htmlและhttp: // รายการ w3.org/Archives/Public/www-style/2008Jul/att-0124/defaultstyles.html
ปัญหาที่เราประสบอยู่ในวันนี้คือการที่เรากำลังพูดถึงรูปแบบตัวอักษรใหม่ การพิมพ์เว็บในปัจจุบันที่ต้องการให้พอดีกับอุปกรณ์ที่แตกต่างกันนั้นแตกต่างจากแนวคิดที่ผ่านมาอย่างสิ้นเชิงเช่นที่อธิบายไว้ในองค์ประกอบของสไตล์ของ Typographic ที่นำมาแสดงของ Robert Bringhurst แม้จะเป็นหนังสือที่ยอดเยี่ยม แต่ความจริงก็คือนักออกแบบสมัยใหม่ต้องการรหัส ฉันมักจะพิจารณาเมทริกซ์มาตรฐานจากสไตล์ชีตเบราว์เซอร์ที่สำคัญโดยการสร้างโครงกระดูกของไฟล์ HTML ที่มีพื้นฐาน h1, h2, h3, h4, h5, h6, ย่อหน้าท้ายกระดาษ ฉันตรวจสอบสไตล์ชีทของเบราว์เซอร์เพื่อทำความเข้าใจขนาดของขนาดพิกเซลมาตรฐานที่ใช้ความสูงบรรทัดและลำดับชั้นบนส่วนหัว ก่อนที่ขนาดเว็บของตัวอักษรจะถูกควบคุมโดยประเภทที่เคลื่อนย้ายได้ของโลหะ / ไม้ แต่จากปี 1985 โดยมีข้อตกลงระหว่าง Adobe และ Apple เริ่มเปลี่ยนแปลง ฉันคิดว่าวันนี้ผู้ควบคุมหลักของแนวคิดการพิมพ์คือ Apple, Safari, Windows, กับ Internet Explorer, Chrome, Firefox ... คุณจะต้องดูสไตล์เบราว์เซอร์ของพวกเขาเพื่อรองรับการพิมพ์ของคุณกับสิ่งที่จะแสดงจริง อุปกรณ์ที่แตกต่าง คุณควรปฏิบัติตามองค์ประกอบของ Typographic Style ของ Robert Bringhurst ซึ่งเป็นหนังสือที่ยอดเยี่ยมหรือทำตามระบบลำดับ Fibonacci ฉันมักจะติดตามการเปลี่ยนแปลงในสไตล์ชีตของเบราว์เซอร์และอ่านข้อมูลจำเพาะของ w3 ที่นี่: คุณควรปฏิบัติตามองค์ประกอบของ Typographic Style ของ Robert Bringhurst ซึ่งเป็นหนังสือที่ยอดเยี่ยมหรือทำตามระบบลำดับ Fibonacci ฉันมักจะติดตามการเปลี่ยนแปลงในสไตล์ชีตของเบราว์เซอร์และอ่านข้อมูลจำเพาะของ w3 ที่นี่: คุณควรปฏิบัติตามองค์ประกอบของ Typographic Style ของ Robert Bringhurst ซึ่งเป็นหนังสือที่ยอดเยี่ยมหรือทำตามระบบลำดับ Fibonacci ฉันมักจะติดตามการเปลี่ยนแปลงในสไตล์ชีตของเบราว์เซอร์และอ่านข้อมูลจำเพาะของ w3 ที่นี่:https://www.w3.org/TR/html401/struct/global.html#h-7.5.5ฉันคิดว่าสาขาการออกแบบต้องได้รับการพิจารณาและฉันพบว่าการศึกษาสู่การปฏิบัติไม่ได้รับการอัพเดตด้วย ความเป็นจริงในปัจจุบัน คุณสามารถอ่านเพิ่มเติมได้ที่นี่ในบล็อกของฉัน: https://road-to-resilience.blog/2019/11/21/the-typographic-thing/