The Proportional Web — สไตล์ชีตเว็บสำหรับงานไทโปกราฟีแบบอักษรสัดส่วน

 (owickstrom.github.io)
1 คะแนน โดย GN⁺ 3 시간 전 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • The Proportional Web เป็นงานออกแบบที่นำหลักการบางส่วนจาก 《The Elements of Typographic Style》 ของ Robert Bringhurst มาปรับใช้กับเบราว์เซอร์ โดยเป็นภาคต่อแบบอักษรสัดส่วนของ The Monospace Web และเป็นสไตล์ชีตที่นำกลับมาใช้ซ้ำได้
  • ใช้ Alegreya และ Alegreya SC สำหรับเนื้อหา และใช้ Courier Prime สำหรับโค้ด โดยยึดขนาดฟอนต์ราก 16px, rem และความสูงบรรทัด 1.2rem เพื่อให้ขนาดและจังหวะแนวตั้งสอดคล้องกันอย่างต่อเนื่อง
  • ใช้ word-break, text-wrap, hyphens ของเบราว์เซอร์สมัยใหม่เพื่อทำจัดชิดขอบทั้งสองด้าน แต่แนะนำให้ใช้ text-align: left หากการเว้นระยะคำหรือช่องว่างแบบ river ดูไม่ดี
  • จัดสไตล์ให้กับหัวเรื่อง คำคม รูปภาพ ตาราง และบล็อกโค้ดโดยยึด HTML5 เชิงความหมายเป็นหลัก และวางside note บนหน้าจอกว้างไว้ที่ระยะขอบด้านขวา ก่อนจะแปลงเป็นย่อหน้าอินไลน์แบบมีลูกเล่นบนหน้าจอขนาดเล็ก
  • เหมาะกับเอกสารที่เน้นร้อยแก้วอย่างหนังสือ วารสาร บล็อก คู่มือ และวิกิ ไม่แนะนำสำหรับเว็บแอปพลิเคชันแบบไดนามิก และสามารถดาวน์โหลดซอร์สจาก GitHub เพื่อเพิ่ม CSS และ JavaScript หรือนำไปใช้ร่วมกับ Pandoc ได้

จาก The Monospace Web สู่แบบอักษรสัดส่วน

  • The Monospace Web แพร่หลายกว่าที่คาดไว้มาก จนถูกนำไปใช้ทั้งในบล็อกส่วนตัวและอินเทอร์เฟซของแอปพลิเคชัน
  • The Proportional Web เป็นภาคต่อทางแนวคิดของโปรเจ็กต์นั้น ออกแบบมาให้ใช้ฟอนต์แบบอักษรสัดส่วนแทนฟอนต์ความกว้างคงที่ และสามารถนำกลับไปใช้ซ้ำได้อย่างอิสระ
  • หลังจากอ่าน 《The Elements of Typographic Style》 ของ Robert Bringhurst ก็เริ่มต้นจากการพยายามนำเลย์เอาต์และไทโปกราฟีของหนังสือมาแสดงผลในเบราว์เซอร์
  • ต่างจากงานพิมพ์ เว็บไม่มีขนาดหน้ากระดาษตายตัว และยังเป็นแพลตฟอร์มที่ตั้งโปรแกรมได้ด้วย จึงยากที่จะนำกฎเดียวกันมาใช้ตรง ๆ
    • จึงเปิดเผยผลงานในรูปแบบที่ให้เลือกหยิบเฉพาะองค์ประกอบที่เห็นว่ามีประโยชน์หรือดูดีไปใช้ได้
  • แม้จะใช้ Pandoc ในการสร้าง HTML แต่สไตล์ชีตก็สามารถทำงานในสภาพแวดล้อมอื่นได้เช่นกันหากปรับเพียงเล็กน้อย

ระบบแบบอักษร

  • ยึดหลักของ Bringhurst ที่ให้เลือกใช้แบบอักษรอเนกประสงค์เพียงชุดเดียวแทนการผสมหลายฟอนต์ มาเป็นฐานของการออกแบบ
  • ตระกูล Alegreya ถูกแบ่งใช้ตามหน้าที่
    • Alegreya Regular ใช้กับเนื้อหาและหัวข้อระดับ 3
    • Alegreya SC ใช้กับหัวข้อระดับ 1 ที่เป็นตัวพิมพ์ใหญ่แบบชื่อเรื่อง, หัวข้อระดับ 2 ที่แสดงเป็นตัวพิมพ์ใหญ่ขนาดเล็ก และตัวย่ออินไลน์อย่าง HTML
  • ใช้ Courier Prime กับโค้ดแบบความกว้างคงที่

หน่วยสัมพัทธ์และจังหวะแนวตั้ง

  • ทุกขนาดถูกกำหนดด้วยหน่วย rem โดยอิงจากขนาดฟอนต์ราก 16px
  • ขนาดมาตรฐานคือ 0.75·0.875·1·1.125·1.25·1.375·1.5·2·2.5·3·4rem ซึ่งเทียบเท่ากับ 12·14·16·18·20·22·24·32·40·48·64px
  • หากเปลี่ยนเพียงขนาดฟอนต์ราก ก็สามารถขยายหรือย่อทั้งดีไซน์ได้พร้อมกัน
    • ตัวอย่างเช่น เมื่อความกว้างหน้าจอไม่เกิน 480px สามารถเปลี่ยน font-size ของ :root เป็น 14px ได้
  • ความสูงบรรทัดคือ 1.2rem และพยายามจัดแนวแนวตั้งของทุกองค์ประกอบให้เป็นจำนวนเท่าของค่านี้
  • แม้จะไม่สุดโต่งเท่า The Monospace Web แต่ยังคงรักษาจังหวะการจัดแนวร่วมกันตลอดทั้งเอกสาร

การจัดชิดขอบทั้งสองด้านในเบราว์เซอร์สมัยใหม่

  • จัดวางเนื้อหาแบบชิดขอบทั้งสองด้านตามหนังสือของ Bringhurst แทนการปล่อยขอบขวาไม่เสมอ
  • แม้บนเว็บจะมีแนวคิดแพร่หลายว่าควรหลีกเลี่ยงการจัดชิดขอบทั้งสองด้าน แต่เห็นว่าสามารถลองใหม่ได้โดยอาศัยความสามารถของเบราว์เซอร์ที่ดีขึ้น
  • การตัดคำขึ้นบรรทัดใหม่และการใส่ยัติภังค์ควบคุมด้วยคุณสมบัติ CSS ต่อไปนี้
    • word-break
    • text-wrap
    • hyphens
    • hyphenate-limit-chars สำหรับควบคุมช่วงที่ใช้ยัติภังค์
  • การจัดชิดขอบทั้งสองด้านมีความเสี่ยงที่ระยะห่างระหว่างคำจะกว้างเกินไป หรือเกิด river ของช่องว่างในย่อหน้า
  • ในเอกสารปัจจุบัน การผสมกันของความยาวบรรทัด ขนาดฟอนต์ และเนื้อหาให้ผลลัพธ์ที่ค่อนข้างดี และมีการใส่ soft hyphen เองในบางคำที่จัดการยาก
  • หากไม่เหมาะกับเนื้อหา การเปลี่ยนเป็น text-align: left จะเหมาะสมกว่า

การย่อหน้าย่อหน้าและสี

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

HTML เชิงความหมายและหัวเรื่อง·การเน้น

  • นอกจากคลาสเพิ่มเติมบางส่วนแล้ว องค์ประกอบส่วนใหญ่ใช้เพียงมาร์กอัป HTML5 เชิงความหมาย
  • หัวเรื่องถูกจัดสไตล์เป็นสามระดับ
    • h1: หัวเรื่องสูงสุดระดับบท
    • h2: หัวข้อของส่วน
    • h3: หัวข้อย่อย
  • องค์ประกอบ <em> แสดงเป็นตัวเอียงตามความคาดหวังทั่วไป

เส้นคั่นและรายละเอียดแบบพับได้

  • ในหนังสือของ Bringhurst ไม่มีแนวทางชัดเจนเกี่ยวกับเส้นคั่นแนวนอน จึงนำมาใช้เป็นองค์ประกอบตกแต่ง
  • เส้นคั่นใช้สัญลักษณ์ U+2767 Rotated Floral Heart Bullet จากบล็อก Unicode Dingbats
  • หากใช้ <details> ก็สามารถซ่อนข้อมูลที่กดจากป้ายกำกับเพื่อขยายดูได้

Side note และชื่อเฉพาะ

  • side note แบบที่ Bringhurst ใช้ ถูกทำด้วย <aside> ของ HTML
  • เมื่อหน้าจอกว้างเพียงพอ จะแสดงไว้ที่ระยะขอบด้านขวา โดยจัดให้ตรงกับด้านบนของย่อหน้าก่อนหน้า
  • บนหน้าจอเล็ก จะพับเป็นย่อหน้าอินไลน์พร้อมองค์ประกอบตกแต่งเพื่อให้ตอบสนองตามขนาดหน้าจอ
  • ชื่อเฉพาะและชื่อทางการที่แยกด้วยคลาส .canonical-name จะแสดงเป็นตัวพิมพ์ใหญ่ขนาดเล็กตามตัวอย่างของ Bringhurst

คำคมและภาพประกอบ

  • บล็อกคำคมประกอบด้วยบล็อกที่ย่อหน้าเข้าไปและเครื่องหมายอัญประกาศรอบเนื้อหา
  • ส่วนท้ายวางผู้เขียน·ผลงาน·ปี
  • รูปภาพและคำบรรยายภาพอยู่ในองค์ประกอบ <figure> และ <figcaption> ตามลำดับ
  • ชื่อผู้สร้างและชื่อผลงานของภาพใช้ตัวพิมพ์ใหญ่ขนาดเล็กและตัวเอียงเช่นเดียวกับคำคม และใช้ระบบการย่อหน้าเดียวกัน

รายการและตาราง

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

การแสดงผลโค้ด

  • แม้งานออกแบบโดยรวมจะเหมาะกับเอกสารที่เน้นร้อยแก้วมากกว่าเอกสารเทคนิคที่เน้นโค้ด แต่ก็จัดให้ทั้งบล็อกโค้ดและโค้ดอินไลน์อ่านได้ง่าย
  • โค้ดใช้ Courier Prime ซึ่งให้บรรยากาศแบบเครื่องพิมพ์ดีด และเข้ากับอารมณ์ของ Alegreya รวมถึงดีไซน์โดยรวม
  • ตัวแปรสไตล์พื้นฐานประกอบด้วยฟอนต์ ความสูงบรรทัด ความหนาเส้นขอบ สีข้อความ และสีพื้นหลัง
    • --font-family: "Alegreya", serif
    • --line-height: 1.2
    • --border-thickness: 1.5px
    • --text-color: #000
    • --background-color: #fff

การใช้งานที่เหมาะสมและไลเซนส์

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

การติดตั้งและการใช้งานร่วมกับ Pandoc

  • หากต้องการเริ่มต้นอย่างรวดเร็ว ให้ดาวน์โหลด ซอร์สบน GitHub แล้ววางไว้ในไดเรกทอรี the-proportional-web ของโปรเจ็กต์
  • ใน head ของ HTML ให้เพิ่มไฟล์ต่อไปนี้
    • the-proportional-web/index.min.css
    • the-proportional-web/index.js
  • ใน Pandoc สามารถระบุอาร์กิวเมนต์อย่างความลึกของสารบัญ หมายเลขส่วน CSS JavaScript และการปิด syntax highlighting เพื่อแปลง Markdown เป็น HTML ได้
  • หากต้องการ syntax highlighting อาจพิจารณาใช้เทมเพลตแบบกำหนดเอง เช่น เทมเพลตที่ใช้กับ HTML เอาต์พุตนี้
  • ในกรณีนี้ ควรลบ CSS ที่ Pandoc ใส่มาให้โดยค่าเริ่มต้นออกจากเทมเพลตแบบกำหนดเอง

โปรเจ็กต์ไทโปกราฟีที่เกี่ยวข้อง

  • The Elements of Typographic Style Applied to the Web ของ Richard Rutter ดำเนินตามโครงสร้างของหนังสือ Bringhurst อยู่มาก พร้อมปรับคำแนะนำให้เข้ากับงานออกแบบเว็บ
    • มีขอบเขตกว้างกว่า The Proportional Web มาก และเน้นที่การสื่อสารข้อมูลเป็นหลัก
    • ขณะที่ The Proportional Web ใกล้เคียงกับการเป็นโชว์เคสที่แสดงทั้งไอเดียและสไตล์ชีตโดยตรง
    • เว็บไซต์ดังกล่าวมีความแตกต่างของขนาดฟอนต์บนมือถือมากจนอ่านยาก และเท่าที่ทราบมีอยู่มาอย่างน้อย 20 ปีและไม่ได้อัปเดตราว 8 ปี
    • The Proportional Web ทุ่มความพยายามอย่างมากในการรักษาทั้งความ responsive และความสม่ำเสมอเมื่อขนาดหน้าจอเปลี่ยนไป และทั้งสองโปรเจ็กต์ก็สามารถอยู่ร่วมกันได้เพราะมีจุดประสงค์ต่างกัน
  • Practical Typography ของ Matthew Butterick เป็นแหล่งข้อมูลเชิงปฏิบัติที่ครอบคลุมแทบทุกหัวข้อที่ผู้ใช้ทั่วไปหรือวิศวกรที่ทำงานใกล้เคียงกับไทโปกราฟีจำเป็นต้องรู้ในระดับละเอียดเพียงพอ
  • Tufte CSS เป็นผลงานที่ทรงอิทธิพลและเป็นที่รู้จักมาก ซึ่งแม้อาจไม่เห็นด้วยกับรายละเอียดด้านการจัดพิมพ์บางจุด แต่โดยรวมแล้วก็เป็นงานที่แข็งแรง

ขอบเขตการประยุกต์และเครื่องมือที่ใช้สร้าง

  • นำมาใช้เพียงบางแนวคิดจากวิธีการของ Bringhurst ทั้งหมด แล้วปรับให้เหมาะกับเว็บ
  • ใช้เครื่องมือต่อไปนี้ในการสร้างเอกสาร
  • ไอเดียของงานออกแบบและเลย์เอาต์จริงได้รับอิทธิพลอย่างมากจาก 《The Elements of Typographic Style》 ของ Robert Bringhurst

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 3 시간 전
ความคิดเห็นจาก Lobste.rs

  • ควรหลีกเลี่ยงการ กำหนดขนาดฟอนต์เป็นค่าพิกเซล แบบนี้ เพราะทำลายการเข้าถึง

    @media screen and (max-width: 480px) {  
  :root {  
    font-size: 14px;  
  }  
}
    • หน่วย px ของ CSS ไม่ได้สอดคล้องกับพิกเซลจริงแบบ 1:1 อีกต่อไป และหมายถึง max(1/96in, 1 pixel)
    • วิธีที่ฉันชอบคือกำหนด font-size ของ :root เป็น 0.625 เพื่อให้ 1rem เท่ากับ 10px แล้วกำหนด 1.6rem หรือ 2rem ให้กับ body เพื่อให้ทั้งหน้าเว็บสืบทอดค่าไป
      สำหรับฟอนต์ไม่ควรใช้ px โดยเฉพาะ wv หรือ wh แต่ควรใช้ rem หรือ em ส่วนเลย์เอาต์ที่ไม่จำเป็นต้องขยายตามขนาดฟอนต์ก็ค่อยใช้ px, wv, wh เป็นต้น
      ขอแนะนำอย่างยิ่งให้ใช้ em หรือ rem กับฟอนต์แทน px เพื่อให้ผู้ใช้ที่สายตาไม่ดีสามารถใช้ ฟังก์ชันเปลี่ยนขนาดตัวอักษร ของเบราว์เซอร์ได้
      ถ้าใช้ wv หรือ wh กับขนาดฟอนต์ เวลาซูมด้วย Ctrl-+ บนเดสก์ท็อป innerWidth และ innerHeight ก็จะหดลงตามสัดส่วนเดียวกัน ทำให้ขนาดข้อความเท่าเดิม จึงควรหลีกเลี่ยง อย่างไรก็ตาม การผสมแบบพอประมาณอย่าง font-size: calc(1.6rem + 2wv) เพื่อขยายขึ้นเล็กน้อยเฉพาะบนจอใหญ่ก็พอรับได้
    • ทางที่ดีไม่ควรเปลี่ยน ขนาดฟอนต์เริ่มต้น ของเบราว์เซอร์ แม้จะใช้ได้กับเอกสารข้อความล้วน แต่กับเว็บส่วนใหญ่เลย์เอาต์อาจพังได้
      ในทางปฏิบัติแทบเป็นไปไม่ได้ที่จะออกแบบเว็บไซต์ที่ซับซ้อนให้รองรับขนาดฟอนต์ตามใจผู้ใช้ทุกแบบ และข้อจำกัดด้านดีไซน์ก็จะเพิ่มขึ้นมหาศาล
      หากต้องการการเข้าถึง เช่น สำหรับผู้พิการทางสายตา ควรเปลี่ยน ระดับการซูมเริ่มต้น ของเบราว์เซอร์แทน แบบนั้นตัวเว็บไซต์ก็เพียงต้องรับมือกับขนาด viewport ที่หลากหลายตามหลัก responsive design ทั่วไป ซึ่งทำได้จริงมากกว่า
      ในอดีตเบราว์เซอร์เคยให้ผู้ใช้ปรับขนาดฟอนต์โดยตรง แต่ประสบการณ์ใช้งานไม่ดี จึงเปลี่ยนมาใช้การซูมทั้งหน้าตั้งแต่หลายสิบปีก่อน

  • ยังสงสัยว่าเขาทำให้มันอ่านได้บนมือถือด้วยหรือเปล่า

  • น่าประทับใจที่ถ่ายทอด งานไทโปกราฟี จากหนังสือของ Bringhurst ออกมาได้ค่อนข้างดี
    แต่ก็ยังหลุดจากกริดที่มีระยะบรรทัดคงที่และสม่ำเสมออยู่บ้างเป็นบางครั้ง ตัวอย่างเช่น ถ้ามีข้อความที่ตั้งเป็น Courier ปะปนอยู่ในบรรทัดเดียวกัน ระยะบรรทัดจะสูงขึ้นเล็กน้อย

    • ถ้าจะป้องกันเรื่องนี้ ควรกำหนด line-height: 1 ให้กับ <code> ส่วนเรื่อง 0 จะดีกว่าหรือไม่ ฉันไม่แน่ใจว่ามีฉันทามติหรือเปล่า
      อีกทั้งถ้าจะทำตาม 『The Elements of Typographic Style』 ก็ควรวางสัญลักษณ์ของรายการหัวข้อย่อยและรายการลำดับเลขไว้ในระยะขอบ แต่จำไม่ได้ว่านี่เป็นข้อกำหนดที่ระบุไว้ชัดเจนหรือไม่

  • เป็นผลลัพธ์ที่ยอดเยี่ยมจากการสำรวจหนังสือไทโปกราฟีแบบคลาสสิก และก็ดีใจที่ได้เห็น การออกแบบแบบอิงข้อจำกัด ลักษณะนี้บนออนไลน์มากขึ้น

  • ในสายนี้สำหรับฉันแล้ว http://lamb.cc/typograph/ จากปี 2009 ก็ยังดีที่สุดอยู่ดี

  • การปรับขนาดแบบสัมพัทธ์นั้นยอดเยี่ยม แต่การ เขียนทับขนาดฟอนต์ของ root เป็นความผิดพลาด
    เว็บไซต์ควรเคารพการตั้งค่าขนาดฟอนต์ของผู้ใช้ และระบบขนาดแบบสัมพัทธ์ที่ออกแบบจากสัดส่วนและความสัมพันธ์ก็เข้ากันได้ดีกับแนวคิดนี้

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