สร้างสเกลตัวพิมพ์แบบโมดูลาร์ที่กลมกลืนด้วยอัตราส่วนทองคำ เมเจอร์เทิร์ด และอัตราส่วนคลาสสิกอื่นๆ ดูตัวอย่างขนาดด้วยภาพและคัดลอก CSS ทั้งหมด
ขนาดตัวอักษรคือชุดขนาดตัวอักษรที่เป็นไปตามอัตราส่วนทางคณิตศาสตร์ที่สอดคล้องกัน แทนที่จะเลือกขนาดแบบสุ่ม แต่ละขั้นตอนจะถูกคูณด้วยอัตราส่วนเดียวกัน โดยสร้างจังหวะและลำดับชั้นของภาพสำหรับส่วนหัว ข้อความเนื้อหา และคำบรรยาย
เลือกขนาดพื้นฐาน (16px คือค่าเริ่มต้นของเบราว์เซอร์และเป็นจุดเริ่มต้นที่ชัดเจน) จากนั้นเลือกอัตราส่วน อัตราส่วนที่น้อยกว่า เช่น 1.125 จะสร้างมาตราส่วนที่ละเอียดอ่อนและสวยงามสำหรับไซต์บรรณาธิการ อัตราส่วนที่มากขึ้น เช่น 1.618 จะสร้างความแตกต่างอย่างมากให้กับเพจทางการตลาด
สเกลตัวอักษรคือชุดขนาดฟอนต์คงที่ที่เดินตามอัตราส่วนคณิตศาสตร์เดียวกัน แต่ละขั้นเชื่อมกับขั้นถัดไปด้วยสัดส่วนเดียวกัน แทนที่จะเลือกขนาดด้วยสายตา — 14, 17, 22, 31... — คุณเลือกขนาดฐานแล้วคูณ (หรือหาร) ด้วยอัตราส่วนซ้ำไปเรื่อย ๆ: 16 × 1.25 = 20, × 1.25 = 25 ต่อไปเรื่อย ๆ ผลลัพธ์คือลำดับชั้นที่ดูตั้งใจ: หัวเรื่อง เนื้อหา คำบรรยาย และป้ายกำกับล้วนดูเป็นสมาชิกของระบบออกแบบเดียวกัน ไม่ใช่กองขนาดสุ่ม
อัตราส่วนที่นิยมมีบุคลิกต่างกัน 1.125 และ 1.2 ให้ขั้นละเอียดสง่างาม — เหมาะกับอินเทอร์เฟซแน่นข้อความ 1.25 และ 1.333 คือม้าศึกของเว็บ: เห็นลำดับชั้นชัดโดยไม่โอเวอร์ และ 1.333 บังเอิญตรงกับคู่สี่สมบูรณ์ในดนตรีคลาสสิก 1.5 ให้การกระโดดที่เด่นชัดสำหรับเว็บเนื้อหา 1.618 — อัตราส่วนทองคำ — สะดุดตาแต่แรงเกินไป: สวยสำหรับหัวเรื่องแสดงผลและหน้าโปรโมชัน แต่โดยมากแรงเกินสำหรับการอ่านยาว
16px คือค่าเริ่มต้นของเบราว์เซอร์และจุดเริ่มต้นที่ถูกต้องสำหรับเนื้อหาบนเดสก์ท็อป: เทียบเท่าความสบายในการอ่านหนังสือจริง อ่านง่ายสำหรับคนส่วนใหญ่ และสอดคล้องกับแนวทางความเข้าถึงได้ อินเทอร์เฟซมือถือเริ่มเล็กลงเล็กน้อย (15px) ได้ หรือคง 16px ไว้ เมื่อฐานถูกกำหนดแล้ว อย่างอื่นล้วนมาจากฐาน — หัวเรื่องคูณขึ้นไป คำบรรยายและป้ายหารลงมา — เปลี่ยนฐานเพียงค่าเดียวก็ปรับลำดับชั้นทั้งชุดได้อย่างสม่ำเสมอ
สเกลไม่ใช่แค่ขนาดฟอนต์ ความสูงบรรทัดควรโตขึ้นเมื่อข้อความเล็กลง: เนื้อหา 1.5–1.6 หัวเรื่อง 1.2–1.4 สำหรับจังหวะแนวตั้ง เอาขนาดฐานคูณอัตราส่วนสเกลเพื่อสร้างขั้นระยะห่าง — ถ้าสเกลคือ 16/20/25/31 ตัวเลขชุดเดียวกันก็ใช้เป็นส่วนเพิ่มของมาร์จินและแพดดิงได้ เมื่อขนาดฟอนต์และระยะห่างใช้อัตราส่วนเดียวกัน ทุกองค์ประกอบจะเข้าล็อกกับกริดที่มองไม่เห็น และหน้าดูถูกจัดวาง ไม่ใช่ถูกประกอบขึ้น
ข้อความควรไล่ขนาดอย่างลื่นไหลระหว่างมือถือและเดสก์ท็อป CSS สมัยใหม่จบในบรรทัดเดียว: font-size: clamp(1rem, 0.7rem + 1.2vw, 1.75rem) — ค่าต่ำสุด ตรงกลางลื่นไหล ค่าสูงสุด เอาค่าต่ำสุด-สูงสุดมาจากสเกลของคุณ (เช่น 16px ถึง 28px) ส่วนพจน์ viewport จัดการที่เหลือ — หัวเรื่องย่อตัวอย่างงดงามบนมือถือและขยายบนจอ โดยไม่ต้องเขียน media query สักตัว
จากสีธงไตรรงค์ถึงสีจีวรพระ สีไทยสะท้อนพุทธศาสนา พระมหากษัตริย์ และธรรมชาติเขตร้อน สีแต่ละสีมีความหมายเชิงสัญลักษณ์ที่ลึกซึ้งในวัฒนธรรมไทย
สีแดงของธงไตรรงค์ — ชาติ ศาสนา พระมหากษัตริย์
สีขาวของธง — ศาสนาและความบริสุทธิ์
สีน้ำเงินของธง — พระมหากษัตริย์
สีทองของวัดและพระบรมมหาราชวัง
ความอุดมสมบูรณ์ของธรรมชาติเมืองร้อน
ดอกบัวสีชมพู — สัญลักษณ์ของพุทธศาสนา
สีจีวรของพระสงฆ์ — ความเรียบง่ายและการละวาง
ท้องทะเลอันดามันและอ่าวไทย
สีของดอกอัญชัน — ใช้ย้อมขนมไทยโบราณ
สีพระแก้วมรกต — พระพุทธรูปศักดิ์สิทธิ์