วิธีกำหนด font-size ใน Responsive Web Design

จากบทความ “Em vs. Px vs. Percent : Font-Size เลือกใช้แบบไหนถึงจะดี?” ทำให้เรารู้แล้วว่าควรกำหนด font-size โดยใช้หน่วยแบบ relative (%, em, rem) ไม่ใช่หน่วยแบบ absolute (px, pt) แต่ถึงกระนั้น การกำหนด font-size ในการทำเว็บก็ยังคงเป็นปัญหาสำหรับหลายๆ คน อยู่ดี

ทบทวนความรู้

ลักษณะที่เหมือนกันอย่างหนึ่งของหน่วยแบบ relative ก็คือ ค่าของมันจะขึ้นอยู่กับ element ที่เป็น parent อย่างไรก็ตาม  ทั้ง %, em, rem ก็ยังคงมีความแตกต่างกันอยู่ดี

  • Percentใช้ได้กับ property ทั่วๆ ไป อย่าง width, height, line-height รวมไปถึง font-size สมมติเรากำหนด width:50%; จะได้ว่า element นี้ จะมีความกว้างเพียงแค่ครึ่งเดียวของ element ที่เป็น parent ของมัน
  • Emคล้ายกับ % เพียงแต่ค่าของ em จะถูกนำไปเทียบกับค่า font-size ของ element ที่เป็น parent ของมันเสมอ โดย 1em จะมีค่าเท่ากับ 1เท่า หรือ 100% นั่นเอง สมมติว่าเรากำหนด font-size ของ element ที่เป็น parent ให้เป็น 15px จะได้ว่า width:10em; มีค่าเท่ากับ 15×10 = 150px อย่างไรก็ตาม เราอาจพบปัญหาหากมี element ซ้อนกันเยอะๆ เพราะ 1em ของ element หนึ่ง อาจมีค่าไม่เท่ากับ 1em ของอีก element หนึ่ง ที่อยู่คนละระดับชั้นกัน
  • Remคล้ายกับหน่วย em เพียงแต่มันจะไปเทียบขนาดกับ font-size ของ <html> เสมอ ซึ่งต่างจาก em ที่จะเทียบกับ element ที่เป็น parent ของมัน ข้อดีของการใช้ rem ก็คือ เราจะไม่เจอปัญหาเหมือนกับการใช้ em แต่การใช้ rem ก็มีข้อเสียเหมือนกันเวลานำไปใช้กับส่วนย่อยต่างๆ ภายในกล่องเนื้อหาเพราะหากเรามีการเปลี่ยน font-size ที่กล่องนั้นๆ แล้วล่ะก็ ส่วนย่อยต่างๆที่กำหนด font-size ด้วย rem ก็จะไม่เปลี่ยนขนาดตาม

กำหนด font-size อย่างไรให้เหมาะสม ?

จากคุณสมบัติของทั้ง 3 หน่วย ข้างต้น ทำให้เราสามารถนำมาประยุกต์ใช้ในการทำเว็บได้ดังนี้

  • 1. ใช้หน่วย % ที่ htmlจริงๆ แล้วเราจะเลือกใช้หน่วย % หรือ em ก็ได้ ที่ html แต่ที่แนะนำให้ใช้เป็น % ก็เพราะว่าจะได้ไม่มีปัญหาขนาดตัวอักษรผิดเพี้ยนใน IE เวอร์ชันเก่าๆ ส่วนสาเหตุที่ต้องมากำหนด font-size ที่ html เลยก็เพื่อที่จะรองรับการใช้หน่วย rem นั่นเอง
  • 2. ใช้หน่วย em ที่ bodyต่อมาให้เรากำหนด font-size ที่ body โดยใช้หน่วย em ในส่วนนี้ให้เรากำหนดเป็นขนาดที่เราใช้เยอะที่สุดในหน้าเว็บเพื่อที่จะลดการเขียนโค้ดให้น้อยที่สุด (หากเป็นหน่วย px ก็มักจะเป็น 13px หรือ 14px สำหรับเว็บภาษาไทย)
  • 3. ใช้หน่วย rem ที่กล่องต่างๆมาถึงจุดนี้ ตัวหนังสือทั่วๆ ไป ก็จะมีขนาดตามที่เรากำหนดไว้ที่ body สมมติว่าเราจะสร้างกล่องอะไรขึ้นมาสักกล่องหนึ่ง เช่น กล่องข่าวล่าสุด กล่องข่าวยอดนิยม หรือ กล่องค้นหา แล้วเราอยากให้กล่องดังกล่าว มีขนาดตัวหนังสือที่ต่างจาก body ให้เรากำหนด font-size ของกล่องๆ นี้ โดยใช้หน่วย rem ไม่ใช่ em เพราะเราไม่อยากมาพะวงกับปัญหาของ em หากมีการนำกล่องนี้ไปใส่ไว้ในกล่องอื่นๆ อีกที
  • 4. ใช้หน่วย em ที่ ส่วนย่อยต่างๆ ภายในกล่องสำหรับส่วนต่างๆ ภายในกล่องไม่ว่าจะเป็น header, footer หรือ p ให้เราใช้หน่วย em เสมอ เพราะขนาดของมันจะได้เทียบกับ font-size ที่เรากำหนดเอาไว้ที่ตัวกล่อง หากเราต้องการให้กล่องไหนมีตัวหนังสือใหญ่ขึ้นหรือเล็กลง เราก็แค่ปรับ font-size ของตัวกล่องนั้นๆ แล้วขนาดตัวหนังสือขององค์ประกอบต่างๆ ภายในกล่องก็จะปรับเปลี่ยนตามในสัดส่วนเดิมโดยอัตโนมัติ

Workshop

เพื่อให้เห็นภาพมากขึ้น เราลองมาทำตามขั้นตอนดังกล่าวตั้งแต่เริ่มกันเลยดีกว่า

1. กำหนด font-size ที่ html ให้เป็น %

ในขั้นตอนแรก เราจะต้องกำหนด font-size ให้กับ html โดยใช้หน่วยเป็น % ก่อน ในที่นี้จะขอกำหนดให้เป็น 62.5%

การกำหนด font-size ให้เป็น 62.5% นั้นมีข้อดีตรงที่จะทำให้การใช้หน่วย rem นั้นง่ายขึ้นมาก เพราะโดยปกติแล้ว ขนาดตัวอักษรแบบ default นั้นจะอยู่ที่ประมาณ 16px ซึ่ง 62.5% ของ 16px จะมีค่าเท่ากับ 10px พอดี เลยทำให้ 1rem มีค่าเท่ากับ 10px ไปโดยปริยาย

2. กำหนด font-size ที่ body ด้วย em

ต่อมาให้เรากำหนด font-size ให้เป็นขนาดที่เราใช้บ่อยที่สุดในหน้าเว็บ สมมติเราชอบขนาด 14px ก็ให้เรากำหนดเป็น 1.4em ได้เลย (จริงๆ แล้วในส่วน body นี้เราจะใช้ em หรือ rem ก็ได้ แต่แนะนำให้ใช้ em เพราะจะเขียนโค้ดสั้นกว่า)

สาเหตุที่ต้องกำหนด font-size ที่ body ให้ตรงตามขนาดที่เราใช้บ่อยที่สุดก็เพื่อที่จะทำให้เราเขียนโค้ดน้อยที่สุด เราจะเขียนโค้ด font-size เพิ่มอีกก็ต่อเมื่อเราต้องการตัวหนังสือในขนาดที่ต่างจากนี้เท่านั้น

3. กำหนด font-size ที่กล่องเนื้อหาด้วย rem

ในการกำหนดขนาดตัวหนังสือให้กับกล่องเนื้อหา ให้เราใช้หน่วย rem เสมอ โดยขนาดที่จะกำหนดนั้นให้ยึดจากขนาดของตัวหนังสือ “ปกติ” ภายในกล่องนั้นๆ เป็นหลัก เช่น เนื้อหาที่ mark up ด้วย <p> เป็นต้น สมมติว่ากล่องนี้เป็นกล่องค้นหาธรรมดาๆ ไม่ได้ต้องการให้โดดเด่นอะไร เราอาจกำหนดให้มีค่าขนาดเป็น 1.4rem เท่ากับ body ไปเลยก็ได้

อย่าลืมว่า rem นั้น จะไช้ได้ตั้งแต่ IE เวอร์ชัน 9 เป็นต้นไป ดังนั้นก่อนที่จะใช้ rem ให้เราใส่ font-size ในหน่วย px เอาไว้ด้วยเสมอ แต่ถ้าใครใช้ Sass อยู่แล้ว เราก็อาจเขียน mixin ง่ายๆ ขึ้นมาช่วยก็ได้ แบบนี้

แต่ถ้ากล่องที่เราจะสร้างนั้น เป็นกล่องไฮไลท์ที่เราอยากให้ตัวหนังสือมีขนาดใหญ่กว่าปกติ ก็ให้เรากำหนดขนาดที่ต้องการไปที่ตัวกล่องเหมือนเดิม

4. กำหนด font-size ที่ส่วนย่อยภายในกล่องด้วย em

สำหรับองค์ประกอบต่างๆ ภายในกล่องเนื้อหา ให้เราใช้ em เสมอ จากตัวอย่างก่อนหน้านี้ ที่เราจะสร้างกล่องไฮไลท์ ให้เรากำหนด font-size ในส่วนของ headings, paragraph และ footer ด้วย em แบบนี้

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

ต่อไปนี้ เวลาเราจะสร้างกล่องอะไรขึ้นมาให้เราใส่ class “block” เอาไว้ด้วยเสมอ

หากเราอยากให้ขนาดโดยรวมของกล่องนั้นมากกว่า 14px เราก็แค่เขียนสไตล์เพิ่มเข้าไปแบบนี้

จัดการ font-size โดยรวมด้วย Sass

หากงานของเรามีขนาดใหญ่พอสมควรหรือมีคนทำร่วมกันหลายคน เราอาจพบปัญหาเกี่ยวกับการกำหนด font-size ที่มีความหลากหลายจนควบคุมได้ลำบาก ในกรณีนี้ เราอาจใช้ Sass เข้ามาช่วย ลองดูตัวอย่างโค้ดต่อไปนี้

จากนี้ไป เวลาเราจะกำหนด font-size ให้กับกล่องอะไรก็ตาม ให้เราทำผ่าน function ที่ใช้ดึงค่า font-size ที่เราได้กำหนดไว้เสมอ แบบนี้

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

(Visited 28,953 times, 17 visits today)

8 Responses to “วิธีกำหนด font-size ใน Responsive Web Design”

  1. fox says:

    แล้ว line-height ไม่จำเป็นต้องกำหนดใน body หรอครับ

    • Siam HTML says:

      เราสามารถใส่ line-height ที่ใช้มากที่สุดเอาไว้ที่ body ได้เลยครับ
      เช่น body { line-height: 1.5; } เป็นต้น
      ส่วนกล่องไหนที่ไม่อยากใช้ค่านี้ ค่อยไปกำหนดเพิ่มเอาครับ
      ( พอดีบทความนี้เน้นแต่เรื่อง font-size เลยไม่ได้กล่าวถึง line-height ครับ )

  2. ้Po says:

    ใน iphone 5s แนวนอน font จะใหญกว่าปกติ เป็นเพราะอะไรค่ะ แล้วมีวิธีแก้ไข ให้ font ในแต่ละ device มีค่าเริ่มต้นเท่ากันหรือป่าวค่ะ ขอบคุณค่ะ

    • Siam HTML says:

      ผมคิดว่าน่าจะเกิดจากการที่ค่า device-width ของ iphone ในแนวตั้งและแนวนอนมันเท่ากันครับ ดังนั้นเวลาเราตะแคงไปมา เนื้อหามันจะยังคงเหมือนเดิม เพียงแต่มี scale ที่ใหญ่ขึ้นเท่านั้นเอง
      ให้เราแก้ปัญหานี้โดยการกำหนด viewport meta tag แบบนี้ครับ

      รายละเอียดเพิ่มเติมสามารถอ่านได้ที่บทความนี้นะครับ
      http://www.siamhtml.com/html-viewport-meta-tag/

  3. Tom Tom says:

    เนื้อหาดีมากครับ เหมาะทั้งทำงานคนเดียวหรือแบบทีมก็ได้ ขอบคุณครับ

  4. ขอบคุณครับ

  5. Zaichone says:

    อ่านเพลินเลย เขียนดีมากครับ

Leave a Reply