เรื่อง Font Font

วันนี้ปล่อยไก่ไปหลายตัว ตัวที่ใหญ่มากๆ คงเป็นเรื่อง font นี่ล่ะ เรื่องมันมีอยู่ว่าลูกค้าให้ requirement มาว่าอยากเปลี่ยน font เป็น Arial เราก็เอ๊ะ… ปกติเค้าใช้กันป่าววะ เพราะเราไม่ค่อยได้ใช้ Arial ก็คิดอยู่ในใจว่ามันเป็น font มาตรฐานของ windows ก็น่าจะมีคนใช้ล่ะ แต่มันเป็น font ที่ปกติเค้านำมาใช้ในเว็บกันรึเปล่า เลยหาข้อมูลดู ได้ผลออกมาว่า Arial เป็น 1 ใน 5 font ยอดนิยมที่ใช้ในเว็บ (อ้างจาก : http://www.codestyle.org/css/font-family/sampler-WindowsResults.shtml)

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

ตัวอย่าง serif

• Garamond
• Georgia
• New York
• Times
• Times New Roman

ตัวอย่าง sans-serif

• Arial
• Geneva
• Helvetica
• Lucida Sans
• Trebuchet
• Verdana

ในเว็บหนึ่งเว็บไม่ควรใช้รูปแบบ font มากเกินไป ในหน้า 1 หน้าไม่ควรจะมี font มากกว่า 3-4 แบบ ส่วนใหญ่จึงกำหนด font-family ไว้ที่ body เลย ยกเว้นว่าถ้าอยากให้หัวข้อพวก h1-h6 เป็น font ที่ต่างกันออกมาก็ค่อยกำหนดเพิ่มใน tag นั้นๆ เช่น

เนื้อหาส่วนใหญ่ภายในเว็บ font-family ที่เหมาะกับการอ่าน และใช้กันบ่อยๆ ก็จะเป็น

body { font-family: Verdana, Arial, Helvetica, sans-serif }

** Verdana เป็น sans-serif ที่มีขนาดใหญ่กว่า sans-serif ทั่วไปประมาณ 1-2 size

แต่ถ้าอยากให้ h1, h2, h3 มี font ที่ต่างออกไป ก็กำหนดแยกต่างหาก

h1,h2,h3 {font-family: “Franklin Gothic Demi”, Verdana, Arial, sans-serif;}