ความลงตัวของ Font บนเว็บไซต์

มารู้จักกับ ฟอนต์

ฟอนต์ (Font) หรือเรียกอีกอย่างหนึ่งคือ ไทป์เฟซ ( Typeface) บางคนมักเรียกสลับกัน แต่จริงๆ มันต่างกันและมีความหมายที่แตกต่างกันอยู่

ความแตกต่างระหว่าง ฟอนต์ และ ไทป์เฟซ

ฟอนต์ เป็นรูปแบบหนึ่งของไทป์เฟซ เป็นชุดตัวอักษรที่มีทั้ง ไทป์เฟซและขนาดเดียวกัน ตัวอย่างเช่น Arial Bold Italic เป็นฟอนต์หนึ่ง Arial Bold Condensed ก็เป็นฟอนต์หนึ่ง แต่ทั้ง 2 fonts นั้น อยู่ใน typeface เดียวกัน ซึ่งก็คือ “Arial”

ไทป์เฟซ คือชุดตัวอักษรที่มีรูปแบบเดียวกัน ไม่ว่าจะมีขนาดใหญ่เล็กเท่าไร เช่น Arial, Arial Bold, Arial Bold Italic ต่างเป็นไทป์เฟซคนละชนิดกัน กล่าวคือ ไทป์เฟซจะมีรูปแบบเอกลักษณ์เฉพาะตัว มีขนาด ความหนา ความกว้าง และความเอียงเท่ากัน

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

ประเภทของฟอนต์

ฟอนต์แบ่งได้สามประเภทคือหลักๆคือ Roman, Blackletter และ Gaelic ปัจจุบันประเภท Roman ถูกใช้อย่างแพร่หลายมากที่สุดและยังถูกแบ่งย่อยเป็น Serif, Sans Serif, Ornamental และ Script types

ทำความรู้จัก ระหว่างฟอนต์ Serifs กับ Sans Serifs

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

เซริฟ (Serif) คือแบบอักษรที่มีขีดเล็ก ๆ อยู่ที่ปลายอักษรเรียกว่า เซริฟ ดังที่ปรากฏในตัวอักษรตระกูล Times แบบอักษรชนิดนี้มีชื่อเรียกอีกอย่างหนึ่งว่าแบบโรมัน (roman) ซึ่งมีต้นกำเนิดมาจากอักษรที่จารึกไว้ในหินของอาณาจักรโรมัน เซริฟมีส่วนช่วยในการกวาดสายตาไปตามตัวอักษร ทำให้อ่านง่าย และนิยมใช้สำหรับพิมพ์เนื้อความ เช่น ใน Medium ก็ใช้ เซริฟ เหมือนกัน

ซานส์เซริฟ ก็มีความหมายตรงข้ามกันคือไม่มีขีดที่ปลายอักษร และมีชื่อเรียกอีกอย่างว่าแบบกอทิก (gothic) อักษรชนิดนี้ไม่เหมาะกับการเป็นเนื้อความ แต่เหมาะสำหรับใช้พาดหัวหรือหัวเรื่องที่เป็นจุดเด่นซึ่งมองเพียงครั้งเดียว อย่างไรก็ตาม ฟอนต์สมัยใหม่ที่ได้รับการออกแบบในคอมพิวเตอร์ อาจมีทั้งแบบเซริฟและซานส์เซริฟปะปนกันในฟอนต์หนึ่งๆ

ยาวไปไม่อ่าน เจ็บคอออว์

มาดูกันก่อนว่าเว็บอะไรใช้ฟอนต์อะไรบ้าง เพื่อเพิ่มความตื่นเต้นในการรับชม เราจะไปดูการใช้ใน Title เบื้องต้นนะครับ อาจจะไม่ลงลึกถึงขนาดอื่นๆ เพราะเว็บนึงอาจจะใช้หลายฟอนต์

เริ่มต้นด้วย เว็บไทยรัฐ
h1 => Font : dbozonex
Color: #4a4a4a;

เว็บกสิกรไทย
h1, h2, a = >DBThaiTextX, Helvetica, Arial, sans-serif
color: #333;

ต่อไป เว็บ Ananda development
h1-h6 => db helvethaica xbold
color: #202020;

ยกตัวอย่างซัก 3 อัน พอจะเห็นอะไรมั้ยครับ?? มีความลงตัวกันคนละแบบเลย

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

มาตรฐานอยู่ที่ไหน!!

ใช่เลยคิดอะไรไม่ออกนึกถึงมาตรฐานเอาใว้ แล้วใครกำหนดใว้หล่ะ เชื่อถือได้มากแค่ไหน … ในที่นี้เราจะมาทำตามมาตรฐาน ของ Material Design กันนะจ้าา ถือว่าเป็นมาตรฐานการออกแบบในยุคนี้เลย ดูแนวคิด และในอนาคตต่อๆไปด้วย

Material Design เปรียบเสมือน ภาษาของการออกแบบ ที่รวบรวม “หลักการออกแบบที่ดี” ไว้ด้วยกัน ด้วยนวัตกรรมทางวิทยาศาสตร์และเทคโนโลยี

ขนาดการออกแบบใน Element ต่างๆ

น้ำหนักของฟอนต์จะแบ่งเป็น 5 น้ำหนักได้แก่

บางมาก (Thin)
บาง (Light)
ปกติ (Regular)
หนา (Bold)
หนามาก (Black)

จากรูปด้านบน มาดูหัวข้อต่างๆ ที่กำหนดใว้ เช่นเราจะใช้ H1 โดยหัวข้อ Typeface เป็นชื่อฟอนต์ ใช้ Roboto Font ความหนาปกติ ขนาด 96 point sentence คือในรูปแบบประโยค โดยมีระยะห่างตัวอักษร -1.5

ทำความรู้จักขนาดของหน่วยต่างๆ

1. px (Pixels) เป็นการกำหนดขนาดแบบตายตัว 1 pixel จะมีค่าเท่ากับ 1 จุดบนหน้าจอ
2. pt(Points) 1 point มีค่าเท่ากับ 1/72 นิ้ว หรือ 1 pt = 1 pixels ในหน้าจอที่ไม่ใช่ Retina Display และเมื่อเป็น Retina Display ก็แค่คูณ 2 เข้าไป
3. em เป็นหน่วยแบบ relative โดย 1em จะเท่ากับ 100% หรือคิดเป็น 1เท่า ของค่าเริ่มต้นซึ่งก็คือ 16px ถ้าเรากำหนดไว้ 2em หรือ 200% ก็จะได้เป็น 32px
4. Percent (%) เป็นหน่วยที่ใช้สำหรับกำหนดขนาดของ property ทั่วๆ ไป สามารถใช้ได้ทั้ง width, height และอื่นๆ ซึ่งรวมไปถึง font-size
5. rem(Root Em) มีคุณสมบัติเหมือนกับหน่วย em แทบทุกประการ เพียงแต่ rem จะเทียบขนาดกับ root element ซึ่งก็คือ html เสมอ
6. dp (Density-independent Pixels) เป็นหน่วยสมมติขึ้นมาโดยอ้างอิงจากขนาดหน้าจอและความหนาแน่นของหน้าจอ โดยค่าดังกล่าวนี้จะทำให้อุปกรณ์แอนดรอยด์ที่มีขนาดหน้าจอต่างกัน มีค่าที่ใกล้เคียงกัน
7. sp (Scale-independent Pixels) จะเหมือนกับ dp แต่สามารถกำหนดขนาดจากขนาดของฟอนต์ที่ผู้ใช้กำหนดไว้ได้ ซึ่งเหมาะที่จะใช้ตัวหนังสือ เพราะสามารถกำหนดจากความหนาแน่นของหน้าจอหรือจะกำหนดจากขนาดฟอนต์บนแอนดรอยด์ของผู้ใช้ก็ได้

เทียบดู Device ที่ Support แต่ละอุปกรณ์ที่นี่

Can I use... Support tables for HTML5, CSS3, etc

ขนาดของฟอนต์ที่นำไปใช้บน Android, iOS และเว็บ

ดังนั้นเราสามารถนำค่านี้ไปใช้ในรูปแบบต่างๆได้ จากรูปด้านบนเว็บเบราว์เซอร์จะคำนวณ REM จะขึ้นอยู่กับขนาดขององค์ประกอบ Root ค่าเริ่มต้นสำหรับเว็บเบราว์เซอร์ ปกติคือ 16px ดังนั้น Conversion คือ SP_SIZE / 16 = rem

การเว้นระยะห่างของตัวอักษร

ดูจากสูตรการคำนวณ เราจะมาดูในส่วนของเว็บ ส่วนแรกที่ต้องรู้จักคือ Tracking เป็นช่องว่างระหว่างกลุ่มของตัวอักษรหรือคำ ปกติเราก็สามารถดูจากไฟล์ดีไซน์ได้ แล้วหารด้วย ขนาด ฟอนต์ ก็จะได้ ระยะห่างแล้ว ค่าที่ได้จะเป็นหน่วย rem

ทำความรู้จักช่องว่างของอักษร

Kerning คือช่องว่างระหว่างตัวอักษรแต่ละตัวใน css ใช้ letter-spacing

Tracking คือช่องว่างระหว่างกลุ่มของตัวอักษรหรือคำ ใน css ใช้ word-spacing

Leading คือ ช่องว่างระหว่างบรรทัดด้านบนและล่าง ถ้าใน css ก็คือ line-height นั่นเอง

Headlines หรือหัวข้อ

คือ text ที่ใหญ่ที่สุดบนหน้าจอ ปกติจะใช้ H1-H6 สามารถเลือกแบบอักษร เช่นตัวเขียนที่ ดูดึงดูดสายตาได้ ส่วนการจัดวางหรือขนาดก็ดูตามหัวข้อด้านบน

Body

เป็นข้อความยาว มีขนาดเล็กแนะนำให้ใช้ serif หรือ sans serif typeface ข้อควรระวังคืออย่าใช้ อักษรที่เป็นตัวเขียนในการใช้ในส่วนนี้

Button

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

Baseline

Baseline ข้อกำหนดที่สำคัญในการวัดระยะห่างแนวตั้งระหว่างข้อความและ Element อื่นๆ

4dp grid

การคำนวณ คือ ความสูง ( Line-height) มาหารด้วย 4 เพื่อที่จะได้ระยะที่ห่างจากด้านบน เช่นระยะแรกความสูง คือ 44dp หาร 2 เหลือ 11 ระยะห่างจากด้านบนเท่ากับ 11 ช่อง ส่วนหัวข้อหลัก สูง 40 dp หาร 4 ก็คือ 10 ช่องนั่นเอง

โทนสี

ในส่วนนี้เราจะมาพูดถึงเรื่องของ Accessible Styles ในหัวข้อ Color and contrast พูดง่ายๆคือ เป็นการวัด อัตราส่วนของสีและความคมชัด ขององค์ประกอบโดยรวม

เราสามารถเลือกโทนสี ตามลิ้งนี้ ซึ่งเป็นเฉดที่คัดมาแล้วว่าดีที่สุดแก่ผู้มอง

ทำไมเราจึงนำ Base line มาใช้

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

ความสำคัญของฟอนต์

ปัจจุบันการพัฒนาระบบหรือเว็บไซต์นั้น ฟอนต์มีบทบาทสำคัญมาก ที่จะทำให้เว็บนั้นๆ หรือระบบนั้นๆ ดูดี ทั้งในเรื่องของ UX และ UI ที่ต้องมีความสมดุลกันระหว่าง ความหนา, ความกว้าง, ความสูง, ขนาด, ระยะห่าง และสี ทั้งนี้ก็ต้องรวมไปถึง Performance ในการโหลดฟอนต์ด้วย ยกตัวอย่าง หาก ดีไซน์ออกแบบเว็บไซต์มา มีฟอนต์ 10 แบบ คนเข้ามาเว็บ ก็คงปิดหนีไปก่อน T_T

ปัจจุบันบนเว็บไซต์สามารถเลือกใส่ Font ที่หลากหลายได้โดยผ่าน CSS3 @FONT-FACE ซึ่งกลายเป็นมาตรฐานบนเว็บไซต์ อ่านความเป็นมาของ Web typography ก่อนที่ Font จะมาเริ่มใช้

ฟอนต์มาตรฐานราชการไทย

ฟอนต์แห่งชาติ มีทั้งหมด 13 แบบ สามารถใช้งาน ทำซ้ำ ดัดแปลง แจกจ่ายได้โดยไม่คิดค่าใช้จ่าย และสามารถนำมาใช้บนเว็บเราได้ด้วย อย่างเช่น ฟอนต์ TH SarabunPSK สามารถนำมาใช้เป็นส่วนของรายละเอียดได้

ทำความรู้จักไฟล์ฟอนต์

TTF (TrueType Font)

เป็นไฟล์มาตรฐานมานานเกือบ 30 ปี ข้อดีคือทุกโปรแกรมในปัจจุบันสามารถใช้ฟอนต์ประเภทนี้ได้ ทำให้มีฟอนต์มากมายให้เลือกใช้ในฟอร์แมตนี้

OTF (OpenType Font)

เป็นมาตรฐานใหม่ มีความสามารถบางอย่างเหนือกว่า TTF เช่น เวลาตัว Th เขียนต่อกัน ตัวฟอนต์สามารถเชื่อม Th เข้าด้วยกันทำให้ดูสวยงามขึ้น

WOFF, WOFF2 (Web Open Font Format)

เป็นมาตรฐานฟอนต์ที่ใช้บนเว็บไซต์ จุดเด่นคือไฟล์มีขนาดเล็กมาก

EOT (Embedded Open Type)

เป็นไฟล์ฟอนต์ที่ใช้บนเว็บไซต์ รองรับเฉพาะ Internet Explorer ปัจจุบันไม่นิยมใช้แล้ว

SVG (Scalable Vector Graphics)

บนเว็บไซต์จะมีความคมชัด ไม่ว่าจะดูบนจอธรรมดาหรือหน้าจอที่ความละเอียดสูง

แนะนำ Noto Font คืออออ อนาคต

Noto เป็นโครงการฟอนต์โอเพ่นซอร์สของกูเกิล สามารถแสดงผลได้เกือบทุกภาษาทุกเผ่าพันธุ์บนโลกนี้ “Beautiful and free fonts for all languages” WOW!!

จริงๆเป็นโครงการที่ทำมานานแล้วหล่ะ นับจาก Date released ก็ปี 2013
5 ปีมาแล้ว สามารถติดตามการอัพเดตบน Github ได้ที่นี่ ใครที่ชอบลองก็ลองนำไปใช้ดูนะครับ

ทำความรู้จักบริษัทที่ออกแบบฟอนต์ในไทย

1. Cadsondemak นับว่าเป็นบริษัทเดียวที่ทำฟอนต์ขึ้น google font ให้ใช้ฟรี และมีองค์กรใหญ่ๆ เช่น Apple, AIS, Grab, IKEA, Kasikorn, PTT, Dtac ฯลฯ เป็นลูกค้าด้วย ดูรายชื่อลูกค้าเพิ่มเติม
2. DBfont ( บริษัทดีบีดีไซน์ จำกัด) เป็นฟอนต์ที่นิยมและแพร่หลายมาก สำหรับราคาจะถูกมาก ถ้าเทียบกับจ้าวอื่น ราคาทำสื่อโฆษณากับทำเว็บไซต์ราคาก็ต่าง กันลองเข้าไปเช็คดูราคาที่นี่
3. PSL (บริษัทพีเอสแอล สมาร์ทเล็ตเตอร์) จ้าวนี้ลิขสิทธิ์มาแรง แต่รูปแบบ ฟอนต์แต่ละตัวก็น่าสนใจ และคนนิยมมากเช่นกัน

รวมเว็บฟอนต์ฟรี

1. Google Font ทั้งหมด 878 Font ของไทยแท้ มีอยู่ 12 ฟอนต์ (ต้องขอขอบคุณ บริษัท คัดสรร ดีมาก ที่ให้ฟอนต์ไทยสวยๆใช้ ) ฟอนต์ Kanit ใช้มากสุดสัปดาห์ละ 100 ล้านครั้ง คิดจาก API คิดดูว่าฮิตขนาดไหนน ~~

2. ฟอนต์.คอม มีประมาณ 400 กว่า ฟอนต์ให้ดาวน์โหลด บางตัวจะนำมาใช้บนเว็บก็แปลงก่อนนะ เว็บแปลงฟอนต์เลือกเลยยย

3. Designil รวมบทความ และมีแจกฟอนต์ฟรีเรื่อยๆ

4. Awwwards เว็บรวมผลงานการประกวดเว็บไซต์ระดับโลกรวมทั้งฟอนต์ด้วย

5. RSU Fonts เป็น ฟอนต์จากทางมหาวิทยาลัยรังสิตได้ทำฟอนต์แจกฟรี 2 ตัว

6. Fontekkamai เป็นฟอนต์ที่น่ามีติดเครื่องใว้เลยตัวนี้มีฟรีและไม่ฟรี ส่วนเสียเงินก็ประมาณกาแฟ 1 แก้วเอง สายเปย์อย่ารออ!!

7. รวมฟอนต์ฟรี ตระกูล JS, DS, PLE และอื่น ๆ

5. Behance รวม Font free ของค่าย Adobe และการออกแบบอื่นๆ

6. Dribble เว็บรวมผลงานและ นัก Design ระดับโลก รวมทั้งการออกแบบ Font ด้วย

7. FontFabric เป็น ฟอนต์แนว Experimental แปลกๆ ประมาณนั้น

รวมคลัง Font ที่ไม่ฟรี และน่าเสียตังซื้อมากๆ (รวมไทย-อังกฤษ)

1. creativemarket เป็นตลาดใหญ่มากสุดๆเลย รวมหลายแสนรายการ
2. elements.envato (เสียรายเดือนโหลดได้ไม่จำกัด)
3. Typekit Adobe (ต้องโหลดมาใช้ในโปรแกรม)
4. superstorefont (เป็นฟ้อนต์ไทย มีฟรีด้วย)

จบแล้วครับ สำหรับการนำไปใช้กับ Element อื่นๆ ในหน้าเว็บติดตามได้ในภาค 2 ครับ

Ref.

Em vs. Px vs. Percent : Font-Size เลือกใช้แบบไหนถึงจะดี?

- CSS: Cascading Style Sheets | MDN

Web Design for Kids: Typography

The type system