ตวอกษรกบเวบไซต

สวนประกอบของตวอกษร

การออกแบบเวบไซตนอกเหนอจากโครงสรางของ

เ วบ เ พ จ รป ภ า พ แ ล ว ผ พ ฒ น า เ วบ ไ ซ ต ต อ ง ใ ห

ความสาคญกบตวอกษรเปนอนดบตนๆ เนองจาก

“ตวอกษร” มหนาทสงขอความถงผใชผานทางเวบเพจ

สวนประกอบของตวอกษรภาษาไทย

1. กลมทแสดงบนเสนฐาน ไดแก พยญชนะ อกขระ วรรคตอน สระ

2. กลมทแสดงเหนอพยญชนะหนงระดบไดแกสระบน

3. กลมทแสดงเหนอพยญชนะสองระดบ ไดแกวรรณยกต

4. กลมทแสดงอยใตเสนฐาน ไดแกสระอสระอ

สวนประกอบของตวอกษรภาษาองกฤษ

• ascender : สวนบนของตวอกษรพมพเลกทสงกวา x-height ของตวอกษร เชน f, h

• descender : สวนลางของของตวอกษรพมพเลก ทตากวาเสน base line ของตวอกษร

• baseline : เสนสมมตทตวอกษรสวนใหญตงอย

• cap height : ความสงจากเสน baseline ไปถงเสนสวนบนสดของตวอกษรพมพใหญ

• x-height : หมายถง ความสงของตวอกษรในแบบพมพเลก ซงมกจะใชอางถงความสงของตวอกษรทไมรวมสวนบน (ascender) และสวนลาง (descended)

• point size : ระยะความสงทงหมดวดจากสวนบนสดถงสวนลางสดของอกษร

ระบบการวดตวอกษรบนเวบไซต

การวดตวอกษรในสมยกอนจะสรางแบบตวอกษรดวย

โลหะซงใชหนวยเปน point

1 point เทากบ 1 / 72 หรอ 0.1384

12 point เทากบ 1 ไพกา

6 ไพกา เทากบ 1 นว (โสรชย นนทวชรวบรณ , 2545)

แตปจจบนระบบดงกลาวใชในระบบการพมพเทานน

ระบบการวดตวอกษรบนเวบไซต

สวนใหญมกจะกาหนดขนาดของตวอกษรบนเวบไซต

เปนหนวย Pixels

หรอคาทเปน Keyword เชน small medium larger

ภาพแสดงขนาดตวอกษรทใชหนวยวดแตกตางกน

16 point

20 point

54 pointsmall

medium

larger

ขอสงเกต

ตวอกษร ท ตางชนดกนจะมขน าดทไ ม เ ทากน

ถงแมจะกาหนดคาเทากน

54 px BrowalliaUPC

54 px Calibri54 px Lardphrao

ดงนน การเลอกชนดตวอกษรเพอแสดงขอมลบน

เวบไซตควรเลอกเปนชนดเดยวกน เพอความเปน

เอ ก ภ า พ แ ละ จ ะ ทา ใ ห ไ ม เ ก ด ค ว า มแ ต ก ต า งข อ ง

ขนาดตวอกษรหรอไมสวยงาม ยกเวนแตจะใหขอความ

นนมความเดนชดและแตกตางจากขอความอน

ชนดและกลมตวอกษรทนยมใชในเวบไซต

การเลอกชนดของตวอกษรเพอใชงานบนเวบไซต

นน ขนอยกบปจจยหลายประการ เชน เนอหาทตองการ

นาเสนอ การจดวางองคประกอบ การปรบแตง

อตราสวน และการจดสมดลในเวบเพจ

ตวอกษรทนยมใชงานบนเวบไซต

• Serif

• Sans Serif

• Monospace

• Cursive

• Fantasy

• Script

• Text Letters

Serif

กลมตวอกษรแบบลายเสนตกแตงขนาดเลกทเพมขนทสวนปลายของลายเสนหลก เชน Time New Roman Garamond

เหมาะทจะใชในสวนรายละเอยดเนอหา เพราะเสนตกแตงทเพมขนจะชวยแยกความแตกตางของแตละตวอกษร ทาใหการอานเปนไปอยางตอเนองดวยการนาสายตาจากตวอกษรตวหนงไปยงตวอกษรอกตวหนง

Serif

ตวอกษรประเภทนจะใหความร สกถงความเกา

ความขลง จงมกใชกบงานทเปนทางการ กงพธรตอง

หรอเรองราวในเชงอนรกษนยม

Sans Serif

กลมตวอกษรท ไม มลายเ สนตกแตงตดอยกบ

ตวอกษร เชน Arial, Verdana, Geneva และ Univers

เหมาะทจะใชกบหวขอหรอตวอกษรขนาดใหญแตไม

เหมาะกบลกษณะเอยง เพราะรปรางของตวอกษรจะ

เปลยนแปลงไปจากเดม

Sans Serif

ตวอกษรประเภทนไดรบความนยมในการออกแบบ

เปนอยางมากเนองจากดเรยบงาย ทนสมย

Monospace

เปนกลมตวอกษรทมลายเสนตกแตงขนาดเลก

เพมขนทสวน ปลายของเสนหลก คลายตวอกษรแบบ

Serif

Cursive

กลมตวอกษรท ไม มลายเ สนตกแตงตดอยกบ

ตวอกษร ม ลกษณะโคงมนทงตวอกษรและดเปนศลปะ

ไมนยมใชในสวนรายละเอยดเนอหาของเวบเพจ

นยมใชเปนหวขอเพอสรางความโดดเดนและดนาสนใจ

Fantasy

กลมตวอกษรทมลายเสนตกแตงตดอยกบตวอกษร

ลกษณะคลายงานศลปะ มความออนชอย

Script

กลมตวอกษรทประยกตมาจากตวเขยน แตมความ

แตกตางกนตรงทมความประณต ลกษณะตวอกษรม

ความสวยงามกวาตวเขยนทวไป และมการเขยนท

ตอเนองกน ใหความร สกทไมเปนทางการ อสระไร

กฎเกณฑ

Script

Text Letters

หรอตวอาลกษณ เปนตวอกษรทมลกษณะคลาย

ตวพมพเพยงแตจะสวยงามและประณตกวา เหมาะ

สาหรบงานราชการ เนองจากทาใหดมความนาเชอถอ

Website

Website

Website

นอกจากลกษณะลายเสนของตวอกษรแลว ยงม

รปแบบพนฐานอก 3 รปแบบ คอ ตวปกต ตวเอยง

ตวหนา

• Regular

• Italic

• Bold

ชนดของตวอกษรไทย

ตวอกษรไทยทนยมใชกนในปจจบ น แบงออกเปน 5 ประเภท ไดแก (เอกเทพ ภกดมงคล, 2550)

• แบบหวกลม

• แบบหวตด

• แบบตวอาลกษณ

• แบบหวด

• แบบประดษฐ

แบบหวกลม

นยมใชในสวนของเนอหาหรอขอความ เพอใหอาน

เขาใจ งาย สวนใหญจะเหมาะกบงานหนงสอและเอกสาร

ทเปนทางการ

บนทกขอความ

แบบหวตด

นยมใชในงานออกแบบสงพมพเชนการพาดหวหรอ

เนน ขอความ ไมนยมใชในสวนเนอหา เพราะอานยาก

ตวอกษรประเภทนทาใหงานดทนสมยมากขน

เชญเทยวงานประเพณบญบงไฟ

แบบตวอาลกษณ

หรอตวคดบรรจงเปนรปแบบตวอกษรทมกใชในงานราชการ หรองานทสอถงความเปนไทย

ป จ จ บ น ค ณ ะ รฐ ม น ต ร ล ง ม ตเหนชอบในโครงการฟอนตมาตรฐานราชการไทย จานวน ๑๓ ฟอนต เพอเปนการสงเสรมการใชเลขไทย

ประเทศไทย

แบบหวด

ลกษณะตวอกษรแบบลายมอหวด ชวยสอถง

อารมณสนกสนาน สบาย มความสข อสรเสร

ʹءʹҹ

แบบประดษฐ

เปนตวอกษรทออกแบบมาเฉพาะงาน มกสอดแทรก

ความร สก ท ตองการ ลงไปในตวอกษร เ พอ สอถง

ลกษณะเฉพาะนน เชน

ฟอนตอตลกษณสถาบนดนตรกลยาณวฒนา

ฟอนตอาทตย มหาวทยาลยรงสต

www.f0nt.com

การจดวางตวอกษรและขอความในหนาเวบเพจ

การจดวางตวอกษรและขอความในหนาเวบเพจเปน

อกสงทผพฒนาเวบไซตตองใหความสาคญ เนองจาก

การกาหนดการแสดงผลขอความทเหมาะสมจะสามารถ

สรางความดงดดใจผเขาชมเวบไซตไดเปนอยางด

1. การจดวางตวอกษร

การจดวางตวอกษรบนเวบไซตในแบบทตางกนจะ

ทาใหเกดความรสกทแตกตางกน เชน ตวอกษรทชดซาย

ทงหมดโดยทปลอยใหดานขวามลกษณะไมสมาเสมอจะ

ใหความรสกไมเปนทางการ

การจดแบบชดดานซาย

การจดแบบชดดานซาย มลกษณะเดน คอ

ตวอกษรในทกบรรทดจะชดดานซายเสมอ ซงจะพบเหน

ไดงายโดยสวนใหญนยมใชกบหนงสอทอานเพอการ

ผอนคลาย เชน หนงสอเดก

การจดแบบชดดานขวา

การจดแบบชดดานขวา การจดลกษณะนจะทาให

เกดความรสกทไมเปนธรรมชาต แตสามารถเรยกความ

สนใจไดด ซงนยมใชกบงานโฆษณาตางๆ เชน นตยสาร

โปสเตอรขนาดใหญ

การจดแบบกงกลาง

การจดแบบกงกลาง นยมใชกบงาน

ทมขอความนอยเพราะอานยาก แตกสามารถเพมความ

นาสนใจไดดพอสมควร เหมาะกบงานโปสเตอรและ

การดตางๆ

การจดแบบเสมอหนาและหลง

การจดแบบเสมอหนาและหลง เปนการจดใหขอความ

ทงหมดเปนแนวเสนตรงทงดานหนาและหลงของ

ขอบเขตขอความซงทาใหดเปนระเบยบ

การจดเสมอหนาและหลงแบบอสระ

เปนการจดเสมอหนาและหลง

โดยไมสนใจขนาดชองไฟ คอ เพยงแค

ตองการใหตวอกษรตวแรกและตว

สดทายเสมอหนา-หลง เทานน

นยมใชกบพวกคาพาดหวตางๆ

เชน ชอองคกร หรองานออกแบบทม

ขอความนอยๆ ขอด งานดมสไตล

ไมนยมใชกบตวอกษรภาษาไทย

เนองจากมวรรณยกตและสระทาให

ยากตอการอาน

การจดแบบอสระ

เปนการจดขอความทไมยดรปแบบตายตว ซงจะให

ความรสกทเปนอสระ ทนสมย ดงดดความสนใจและ

สะดดตา

นยมใชกบงานประเภทใบปลว แผนพบ บรรจภณฑ

เวบไซต

ไมควรใชกบขอความทมากเกนไป

การจดแบบอสระ

การจดแบบอสระ

2. ชองวางระหวางตวอกษร และชองวางระหวางคา

ตวอกษรถกออกแบบมาใหมระยะหางทเหมาะสมอย

แลว แตในบางสถานการณ อาจมความตองการให

ตวอกษรดแนนหรอหางเปนพเศษ

เชนตวอกษรภาษาองกฤษตวใหญทงหมดจะด

คอนขางแนนเพราะถกออกแบบมาใหใชรวมกบตวเลก

ดงนน ควรเพมชองวางระหวางตวอกษร

ชองวางระหวางตวอกษร และชองวางระหวางคา

3. ระยะหางระหวางบรรทด

ระยะหางระหวางบรรทด

เปนปจจยหนงทควรคานง

ซ ง ห า ก ก า ห น ด ช อ ง ว า ง

ระหวางบรรทดไดเหมาะสมก

จะสงผลตอการอานขอความ

ไดงาย

แตหากกาหนดชองวาง

ระหวางบรรทดทแนนหรอ

ห าง เ กนไปกอาจส ง ผลใ ห

ขอความนนไมนาอาน

4. ความยาวของบรรทด

ผพฒนาเวบไซตสามารถควบคมความกวางและยาว

ของของบรรทดอกษรไดดวย “ตาราง”

จากการศกษา พบวา สายตามนษยสามารถกวาด

สายตาไปในพนท 4 นว โดยไมตองขยบศรษะ

ดงนน แตละบรรทดควรมอกษรประมาณ 50-70 ตว

หรอ 7-15 คา ภาษาองกฤษ หรอเทยบเปนพนทกจะกวาง

ประมาณ 350-500 px (ธวชชย ศรสเทพ, 2544)

5. ความยาวของหนาเวบ

หนาเวบเพจไมควรยาวจนเกนไปเพราะหนาเวบท

ยาวมากๆ จะทาใหผใชรสกเหนอยลาทจะอาน

ดงนน ควรแบงเนอหาออกเปนหนาเวบเพจตางๆ ให

เหมาะสม

อยางไรกตาม ไมมขอกาหนดตายตวสาหรบความ

ยาวของเวบเพจ ขนอยกบการออกแบบเวบไซต

6. แบงเนอหาออกเปนยอหนา

การแบงเนอหาออกเปนยอหนาเหมาะสาหรบเวบ

เพจทมเนอหามากๆ และคนระหวางยอหนาดวยบรรทด

วาง

6. แบงเนอหาออกเปนยอหนา

6. แบงเนอหาออกเปนยอหนา

7. ขนาดตวอกษร

ขนาดของตวอกษรมผลตอการดงความสนใจของ

ผใชเวบไซตไปยงขอมลทตองการ รวมทงสงผลตอการ

นาทางใหผใชคลกไปยงสวนตางๆ ได

แนวทางทนยมใชเพอชวยเพมประสทธภาพของ

เนอหาเวบเพจ มดงน

สรางจดสนใจดวยตวอกษรขนาดใหญ

ตวอกษรขนาดใหญอาจเปนสวนหนงทจะนาสายตา

ของผอานใหมงไปยงเปาหมายทตองการ เชน

โลโก

หวขอหลก

บรเวณทตองการใหสนใจ

สรางจดสนใจดวยตวอกษรขนาดใหญ

สรางจดสนใจดวยตวอกษรขนาดใหญ

สรางจดสนใจดวยตวอกษรขนาดใหญ

สรางจดสนใจดวยตวอกษรขนาดใหญ

สรางจดสนใจดวยตวอกษรขนาดใหญ

ใชตวอกษรขนาดใหญเรมตนประโยค

โดยทวไปแลวตวอกษรตวแรกจะมขนาดใหญกวาตว

อนประมาณ 2-5 point

นยมใชตวอกษรตวแรกชนดอนเพอใหเกดขอ

แตกตาง

หรอยกเนอหาบางสวนหรอขอความสาคญออกมา

แสดงใหเหนเดนชด

สรางจดสนใจดวยตวอกษรขนาดใหญเรมตนประโยค

ใชตวอกษรขนาดเลกเพอเพมความตอเนองของเนอหา

การใชตวอกษรขนาดเลกในสวนของรายละเอยด

เนอหา จะทาใหบรรจตวอกษรไดมากขนในพนททมอย

ซงจะชวยสรางความตอเนองของเนอหาไดด

ตวอกษรขนาดเลกนยมใชขนาด 10 pt และควร

กาหนดใหแตกตางกบหวขอหลก

ใชตวอกษรขนาดเลกเพอเพมความตอเนองของเนอหา

การเนนขอความใหเดนชด

สามารถใชตวอกษรในลกษณะตางๆ กน เพอแสดง

ถงการเนนยาถงประเดนหลก ใจความสาคญ หรอ

บทสรป

วธการเนนขอความใหเดนชด มดงน

การใชขนาดและนาหนกของตวอกษร

สามารถสรางความเดนใหกบตวอกษร

โดยทาใหมขนาดทใหญกวา ลกษณะเสนทหนาและเขม

กวาซงจะดวาใหความสาคญมากกวา ในทางตรงกนขาม

ขอความทไมตองการเนนจะมขนาดเลกและบางกวา

การทาตวเอยง

เปนการสรางความแตกตางจากตวอกษรปกตและ

จะทาใหความเรวของการอานลดลง เพราะสายตาของเราจะ

มงไปสจดทแตกตางจากปกต

การขดเสนใต

นยมใชในสมยกอน แตเนองจากในเวบจะแสดงการ

ขดเสนใตเมอเกดคลกลงค จงไมควรใชการขดเสนใตใน

ความหมายอนอกจะทาใหเกดความสบสนได

การขดเสนใต

การวางตาแหนงของคาหรอบรรทดทอยตางจากปกต

ตาแหนงของตวอกษรหรอบรรทดทอยตางจากปกต

จะมความโดดเดน

การยอหนาเขาขางในหรอออกขางนอก กสามารถ

สรางความนาสนใจได

การกาหนดแนวทางของตวอกษร

การกาหนดแนวทางของตวอกษร เชน การจดแนวตง

หรอทแยง เปนตน กสรางความจดสนใจใหกบตวอกษร

ไดด

การกาหนดแนวทางของตวอกษร

การกาหนดแนวทางของตวอกษร

การสรางความสมดลในหนาเวบ

การจดรปแบบโครงสรางของเนอหาในหนาเวบตอง

อาศยแนวทางในการจดระเบยบ สรางสมดล รวมถงการ

จดแนวของตวอกษรอยางเหมาะสม เพอใหผอานเขาใจ

ไดงาย โดยมแนวทางในการสรางความสมดล ดงน

การจดเรยงรายการลงคตามแนวนอน

การจดเรยงรายการลงคตามแนวนอน เพอการ

มองเหนไดชดเจน และยงดงดดความสนใจไดด ทงน

ขนอยกบการออกแบบดวย

การจดเรยงรายการลงคตามแนวนอน

การจดเรยงรายการลงคตามแนวนอน

การจดเรยงรายการลงคตามแนวนอน

การจดเรยงรายการลงคตามแนวนอน

สรางความสมดลของตวอกษรขนาดใหญและขนาดเลก

นกออกแบบสวนใหญนยมใชรปภาพสาหรบตวอกษร

ขนาดใหญ และตวอกษร html สาหรบสวนเนอหา ดงนน

ตองใชตวอกษรทงสองแบบใหเหมาะสม

สรางความสมดลของตวอกษรขนาดใหญและขนาดเลก

การจดกลมขอความเปนสดสวนเหลอมลากน

การจดกลมขอความใหเปนสดสวนเหลอมลากนลงมา

ดานลางจากซายไปขวา

เชน การจดขอความ 3 paragraph ใหเลอมลา

กนลงมาจากซายไปขวา ผใชสวนใหญจะอาน

ขอความจาก paragraph ทอยดานบนซาย

และไลลงมาตามลาดบ

วธนถอเปนการจดขอความให

เปนสดสวนทนาตดตามอยาง

สรางสรรค

จดโครงสรางพนทของตวอกษรอยางไมเทากน

ไมจาเปนตองจดวางพนทของตวอกษรใหเทากนหรอ

อยตรงกลางเสมอ

จดโครงสรางพนทของตวอกษรอยางไมเทากน

จดแนวตวอกษรในกลมเดยวกน

การจดแบบนจะชวยใ หผ ใ ชสามารถแยกแยะ

ขอความตามลกษณะออกเปนกลมอยางชดเจน

การใชสกบตวอกษร

สเปนองคประกอบทมประสทธภาพสงในการ

นาเสนอบนเวบไซต โดยจะชวยตกแตงโครงสรางและ

รปแบบของตวอกษรใหดดยงขน

ใชสของตวอกษรอยางมความหมายและสมาเสมอ

การใชสของตวอกษรทตางกนตามลกษณะเนอหา

หวขอ รายละเอยด และลงคอยางสมาเสมอจะทาใหผใช

คนเคย

ใชสของตวอกษรอยางมความหมายและสมาเสมอ

ใชสของตวอกษรอยางมความหมายและสมาเสมอ

ใชสของตวอกษรอยางมความหมายและสมาเสมอ

ใชสทแตกตางกนในแตละสวนของขอมล

การนาเสนอเนอหาทแบงเปนสวนๆ เชน สนคา

หลายๆ ประเภท

สามารถใชสแตกตางกนในแตละยอหนา เพอชวยให

ผอานไดรบขอมลทเรวขน

ตองแนใจวาสทนามาใชเขากนไดกบสองคประกอบ

อนๆ

กาหนดสของลงคใหเหมาะสม

การกาหนดสของลงคควรมความเหมาะสมทงสาม

สภาวะ คอ

- สของลงคทยงไมไดคลก

- สของลงคขณะคลก

- สของลงคทผานการคลกแลว

ควรใชสทแตกตางกนเพอใหผใชเวบไซตไมเกด

ความสบสน

- สของลงคทยงไมไดคลก

- สของลงคขณะคลก

การบาน

• งานกลม (ตามงานกลมเวบไซต 7 กลม)

• นาเสนอหนาชนเรยน วนท 18 มถนายน 58

• นาเสนอเรอง “สกบเวบไซต”

• จานวนเวบไซต 15 เวบไซต ทมสหลกตามสทตวแทนกลมจบ

สลากได

• ประเดนทตองนาเสนอ

- เวบไซตอะไร (องคกร สถาบน อนๆ)

- วเคราะหวาเพราะเหตใดเวบไซตดงกลาวถงใชสดงกลาว

- หากทานเปนผออกแบบเวบไซตดงกลาวจะใชสอะไร เพราะเหตใด