กำหนด 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

html {
    font-size: 62.5%; /* เพื่อให้ 1rem มีค่าประมาณ 10px */
}

การกำหนด 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 เพราะจะเขียนโค้ดสั้นกว่า)

body {
    font-size: 1.4em; /* มีค่าประมาณ 14px */
}

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

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

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

.search {
    font-size: 14px; /* กรณียังไม่รองรับ rem */
    font-size: 1.4rem;
}

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


@mixin font-size ($size) {
    font-size: $size + px; 
    font-size: ($size / 10) + rem; 
}
.search {
    @include font-size(14);
}
แต่ถ้ากล่องที่เราจะสร้างนั้น เป็นกล่องไฮไลท์ที่เราอยากให้ตัวหนังสือมีขนาดใหญ่กว่าปกติ ก็ให้เรากำหนดขนาดที่ต้องการไปที่ตัวกล่องเหมือนเดิม

.highlight {
    font-size: 20px;
    font-size: 2.0rem;
}​
4. กำหนด font-size ที่ส่วนย่อยภายในกล่องด้วย em

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

.highlight {
    font-size: 20px;
    font-size: 2.0rem;
}
.highlight > h2 {
    font-size: 1.5em; /* 20x1.5 = 30px */
}
.highlight > p {
    font-size: 1em; /* 20x1 = 20px */
}
.highlight > footer {
    font-size: 0.8em; /* 20x0.8 = 16px */
}

แต่เพื่อความสะดวกในการเขียนโค้ด เราอาจสร้างสไตล์กลางๆ สำหรับกล่องเนื้อหาขึ้นมารอไว้เลย เราจะได้เขียนสไตล์เพิ่มเฉพาะเวลาที่กล่องนั้นๆ มีอะไรพิเศษจริงๆ เท่านั้น แบบนี้
.block {
    font-size: 14px;
    font-size: 1.4rem; /* ขนาดตัวหนังสือโดยรวมของกล่อง */
}
.block > h2 {
    font-size: 1.5em; /* ใหญ่กว่าปกติครึ่งหนึ่ง */
}
.block > p {
    font-size: 1em; /* ขนาดปกติ */
}
.block > footer {
    font-size: 0.8em; /* เล็กกว่าปกติเล็กน้อย */
}

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

<div < class="highlight block"></div>

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

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

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

/* รวบรวม font-size ของทุกๆ กล่องเนื้อหาเอาไว้ที่ส่วนนี้ พร้อมกับตั้งชื่อให้สื่อความหมาย */
$fontSize: (
    'highlight': 20,
    'search': 14
);

/* สร้าง function สำหรับใช้ดึงค่า font-size ตามชื่อกล่องที่ระบุ */
@function getFontSize($block) {
    @return map-get($fontSize, $block);
}

/* สร้าง mixin สำหรับการกำหนด font-size โดยใช้หน่วย rem */
@mixin font-size ($size) {
    font-size: $size + px;
    font-size: ($size / 10) + rem;
}

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

.highlight{
    @include font-size(getFontSize('highlight'));
}
.search{
    @include font-size(getFontSize('search'));
}

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

ที่มา  ::  http://www.siamhtml.com/how-to-define-font-size-in-responsive-web-design/