เทคนิคการทำ Fluid Typography สำหรับเว็บ Responsive

NSLog0
NSLog0
Sep 3 · 3 min read
Image for post
Image for post

วันนี้ผมจะมาสอนเทคนิคที่เรียกว่า Fluid Typography (แปลไทยน่าจะประมาณทำให้ตัวหนังสือเป็นของเหลวๆ ยืดหดได้ตามภาชนะครับ เพราะ Fluid แปลว่าของเหลว) มันจะไม่เหมือนกับการทำ Responsive Typography นะครับ เพราะ Responsive Typography มันคือการเอา breakpoint มาดักไว้

ลองมาดูตัวอย่างการทำ Responsive Typography นิดนึงจะได้เห็นภาพมากขึ้น

p { font-size: 15px; }

@media screen and (min-width: 480px) {
p { font-size: 16px; }
}
@media screen and (min-width: 640px) {
p { font-size: 17px; }
}
@media screen and (min-width: 1024px) {
p { font-size: 19px; }
}

ปกติเรามักจะทำกันแบบนี้นะ แบบนี้ก็จะต้องมาแก้กันหลายๆ หน้าจอหน่อยแต่ เทคนิคที่ผมกำลังจะพูดวันนี้ เราจะใช้หน่วยวัดที่เป็นแบบ Relative ก็จะมีดังนี้

Image for post
Image for post

และที่จะมาใช้กันก็คือแค่ rem, vh , vw , em

Prerequisite

viewport

ปกติแล้ว viewport คือพื้นที่ที่เรามองเห็นหน้าเว็บ เล็กใหญ่ขึ้นอยู่กับขนาดจอของ device นั้นๆ เช่น

Image for post
Image for post

ถ้าลองดูเว็บผมจากมือถือจะเห็นพื้นที่เท่านี้ ความยาวนี้อาจจะแค่ 574px ซึ่งก็คือ 100% หรือ 100 viewport แต่ถ้าดูเว็บผมจากจอคอมหน้าจอมันก็จะกว้างบางคนจอใหญ่หน่อยก็ 1440px และวิธีคิดจะกลายเป็น 100% และ 100 viewport จะเท่ากับ 1440px

แล้วจะใช้ค่าจาก viewport ได้ยังไง? ง่ายมากครับ เรามักจะเห็นมันบ่อยๆ นั้นคือ

<meta name="viewport" content="width=device-width, initial-scale=1">

Viewport unit

หน่วยวัดสำหรับ viewport มีอยู่ 2 ตัวคือ

  • ด้านกว้าง: vw
  • ด้านยาว: vh
Image for post
Image for post

How to set Fluid Typography?

การอื่นเลยเราต้องตั้งค่า root element ให้มันมีค่าเป็น vwหรือ vhก่อน แต่ปกติถ้าทำเว็บ Responsive เราจะใช่ vw จากนั้นเราก็จะใช้หน่วยวัดที่เป็น rem หรือ emให้กับตัว child

// let's say viewport is 1000pxhtml {
font-size: 2vw;
}
p {
font-size: 1.2rem;
}

สมุติว่า viewport คือ 1000px แล้วเราตั้งให้ font ทั้งเว็บเป็น 2vw ก็คือ 2% ของ 1000px จะได้เท่ากับ ~20px ในหน่วยวัดแบบ Absolute unit ปกติ จากนั้นเราก็บอกให้ p มีค่าเป็น ซึ่ง 1.2rem มันจะไปอิงกับ root element แล้วนำค่าที่ได้มาเซ็ตให้มันก็จะคำนวนได้แบบนี้

if 2vw of 1000px = 20pxthen 1.2rem = 20 * 1.2 = 24pxtherefor 1.2rem in this context will be 24px 

ก็คือได้ว่า เราจะได้ p ที่มีขนาดอักษรเป็น ~24px ครับ สูตรคิดก็จะประมาณนี้

สำหรับหน่วย em และ rem นั้นผมคงไม่ได้บอกสอนกันตรงนี้เพราะมันจะอ่านยาวไป ผมแนะนำให้ไปอ่านที่ https://j.eremy.net/confused-about-rem-and-em/ แทนนะครับ ไว้มีโอกาสผมจะแปลมาให้อ่านกัน

Set minimum font

มันจะมีกรณีที่เว็บเราไม่เหลือ viewport แล้วหรือเหลือน้อยมาก(จอที่เล็กมากๆ) เมื่อเราเซตค่าแบบ Relative ตัวขนาด font มันจะลดลงไปเรื่อยๆ ไม่สิ้นสุด จนไม่เห็นอะไรบนหน้าเว็บเลย เราเลยต้องเซตค่าให้มันมี min size โดยการใช้ calc

p {
font-size: calc(1.2rem + 1vw)
}

ตรงนี้ง่ายๆ มากคือถ้าเมื่อใดที่ viewport เราเป็น 0 คือไม่เหลือที่แล้ว อย่างน้อยๆ font เราจะมีค่า 1.2remเสมอ

A formula min/max

โดยปกติแล้วเราจะมีสูตรการใช้คิดครับ เพื่อปกป้องการ font เล็กหรือใหญ่ไป และรวมถึงการคำนวน min/max ของ viewport ด้วย สุมติว่าถ้าเราอยากจะให้ font ไม่ต่ำกว่า 16px ในจอที่เล็กๆ หรือถ้าจอกว้างมากๆ เราต้องการไม่ให้มันใหญ่กว่า 23px เราเลย ลองมาดูสูตรกัน

html {
font-size: calc([min font] + ([max font] - [min font]) *
((100vw - [min vw]) / ([max vw] - [min vw])));
}

ผมพยายามเขียนให้พอแล้วแต่มันยาวมาก ก็อบไปเปิดดูในจอกว้างๆ เอานะครับ

จะเห็นว่าสูตรมันต้องใส่ขนาด max viewport และ min viewport ด้วยเพราะบอกให้มันรู้ว่าจอกว้างเท่าไร เพื่อให้ขนาด font ที่ได้สัมพันธ์กับจอของเรา

มาดูตัวอย่างการใช้งานกัน

base.scss @media screen and (min-width: 320px) and (max-width: 1440px) {
html {
font-size: calc(16px + (23 - 16) *
((100vw - 320px) /
(1440 - 320)));
}
}

ลองมาดูตารางเปรียบเทียบกัน

Viewport WidthBase             Font Size| < 640px |                    | 16px      |
| 700px | | 16.5167px |
| 750px | | 16.95px |
| 1200px | | 20.9px |
| > 1440px| | 23px |

จากในโค้ดจะเห็นว่าผมมีการใส่หน่วย px และไม่ใส่ ไม่ใช้เพราะลืมนะครับ แต่สูตรมันไม่ต้องใส่ครับ ตอนเอาไปใช้ดูดีๆ ว่าตรงไหนใส่หน่วยไม่ใส่หน่วยนะ

และเท่านี้เราก็จะได้การทำให้ font บนเว็บของเรามีขนาดพอเหมาะกับหน้าจอแล้วครับ ง่ายมากๆ เลยครับ

ลองเอาตัวอย่างไปเล่นกันดูครับ เปิดเต็มจอนะแล้วเลือนๆ หน้าจอดูครับ

AlgorithmTut

May the force be with you. **Tut stand for Tutorial**

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store