DESIGN

อย่าตกม้าตายที่ TEXT บน WEB DESIGN จัดการยังไงให้มันอ่านง่าย ไม่รกหูรกตา

By: unlockmen May 10, 2018

นอกจากเนื้อหาแล้ว การจัดวางตัวหนังสือ ยังคงเป็นสิ่งสำคัญสำหรับสื่อสารด้วยตัวอักษร ไม่ว่าจะอยู่ใน Platform ไหนก็ตามแต่ ความสบายตาเวลาอ่าน ก็ยังเป็นสิ่งสำคัญที่จะจูงใจให้คนอ่าน อยากอ่านเรื่องนั้น ๆ หรือยอมอ่านต่อไป ไม่ว่ามันจะยาวเหยียดแค่ไหนก็ตาม แต่เรื่องของตัวหนังสือมันก็ไม่ใช่เรื่องง่าย ไหนจะการเลือก FONT การจัดย่อหน้า การแบ่งวรรค ตำแหน่งของภาพและข้อความ UNLOCKMEN จะพามาตะลุย FONT บน WEB DESIGN แบบง่าย ๆ ให้จัดวางกันได้อ่านง่ายสบายตา ให้อ่านเพลินจนลืมไปเลยว่าหมดโควต้าแปดบรรทัด

Typography ที่ดีคืออะไร ?

ถ้าจะให้บอกแบบทื่อ ๆ ว่าสไตล์ไหนถึงจะดี ถึงจะใช่ มันก็ดูเอาแต่ใจเกินไปหน่อย เพราะสุดท้ายแล้วมันเป็นเรื่องของรสนิยม ความชอบ มันตัดสินด้วยคุณค่าทางสุนทรียศาสตร์ไม่ได้ แต่ถ้าพูดถึงคำว่า “ดี” ในแง่ของการใช้งาน ก็คงจะเป็นอะไรที่แคบลงมาหน่อยและพอจะเห็นภาพมากขึ้น เรื่องของเนื้อหาการเขียน Copy คงยกหน้าที่นี้ไปไว้ที่ Writer แบบเต็มตัว แต่การจัดการเนื้อหาเหล่านั้นให้มาอยู่ใน WEB ได้แบบไม่ขัดหูขัดตา อันนั้นก็คือหน้าที่ของหนุ่มสาย DESIGN นี่แหละ

พอมาเป็น Platform ของเว็บไซต์แล้ว “การทำให้อ่านง่าย สบายตา” คือคำตอบที่ตายตัวและต้องจำได้อยู่เสมอ ไม่ใช่แค่เรื่องของ Position แต่ยังต้องคำนึงถึงการเลือก Font สี การจัดย่อหน้า การจัดคำ เพื่อซัพพอร์ตคนอ่านด้วย เพราะนอกจากจะต้องสู้กับแสงสีฟ้าบนจอแล้ว ยังจะต้องมาลำบากกับการอ่านข้อความที่ระเกะระกะอีก ก็คงจะไม่ชวนอ่านสักเท่าไหร่ WEB DESIGN จึงมีส่วนสำคัญสำหรับ Content ไม่น้อยเลย มาดูกันคร่าว ๆ ว่าสิ่งสำคัญอันไหนที่จำเป็นต้องคำนึงถึงเป็นพื้นฐานของการจัดการ TEXT บน WEB DESIGN

  • การเลือกแบบ Font
  • ขนาดของ Font
  • ระยะห่างของแต่ละบรรทัด
  • ช่องไฟ ระยะห่างระหว่างตัวอักษร
เลือก Font ให้เหมาะกับเนื้อหา

อันนี้สำคัญมาก และเป็นอะไรที่มักจะตกม้าตายกันอยู่บ่อย ๆ เป็นกันมาตั้งแต่สมัยทำ Presentation ตอนเรียนแล้ว ที่มักจะมี Font สุดแฟนซีที่เราคิดว่ามันเท่ซะเหลือเกิน​ โผล่มาเป็น Headline ให้เวียนหัวกันเล่น ๆ ใครที่ชอบทำก็ขอให้หยุดเอาไว้ก่อน บางครั้ง Font ที่เป็นทางการหรือเรียบง่าย ดูเหมาะจะใช้งานจริงมากกว่า โดยเฉพาะบนคอนเทนต์ที่ต้องให้คนทั่วไปอ่านเอาใจความจากเนื้อหานั้น ๆ ก็ยิ่งควรเลือก Font ที่อ่านง่าย สบายตา เอาไว้ก่อน แล้วก็มาเลือกกันอีกทีว่ามันเป็นเนื้อหาที่จริงจังหรือผ่อนคลาย และเลือก Font ให้เหมาะสมกับเนื้อหา

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

ความสมดุลของขนาดตัวอักษรและเนื้อหา

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

เว้นพื้นที่รอบข้าง

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

ดูการแสดงผลจากหลาย ๆ Platform

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

อย่าใช้ Font หลายแบบเกินไป

หลายเว็บใช้ฟอนต์สำหรับ Headline แตกต่างกับเนื้อหา ซึ่งก็เป็นการเพิ่มลูกเล่นได้ดีเหมือนกัน มันช่วยให้ดูไม่น่าเบื่อที่จะต้องอ่านฟอนต์เดิม ๆ ต่างกันแค่ตัวหนาตัวบาง ขนาดฟอนต์ ที่แยกเนื้อหากับหัวข้อ ถึงมันจะเจ๋งยังไงแต่ก็ต้องระวังเรื่องการเลือกใช้ฟอนต์ให้สไตล์ของมันไม่หนีกันมาก และไม่ควรมีเกิน 2-3 แบบสำหรับหน้านั้น ๆ เพราะมันดูเหมือนตัดสินใจไม่ได้ เลยใส่ ๆ มามากกว่าตั้งใจใส่ให้มันสวยน่ะสิ

สีของ TEXT และ Background

อย่างที่บอกว่าความสบายตาของคนอ่าน เป็นผลลัพธ์ที่เราต้องคำนึงถึงเป็นอันดับแรก ๆ ไม่ใช่ว่าจัดคอมโพสระดับราชา เลือกฟอนต์ได้ดูดี แต่มาตกม้าตายที่เลือกสีก็ไม่ไหวนะหนุ่ม ๆ ลองเลือกสีที่มันจับคู่กันแล้วอ่านง่าย ย้ำอีกทีว่าจับคู่กันแล้วอ่านง่าย ไม่ใช่จับคู่กันแล้วสวย มันคนละเรื่องกัน เพราะอย่างสีคู่ตรงข้ามดูเป็นอะไรที่เจ๋งมากสำหรับงานอาร์ตเวิร์คสักชิ้น แต่พอมาเป็น TEXT กับ Background แล้ว จะใช้เขียว-แดง เหลือง-น้ำเงิน ส้ม-ม่วง คนอ่านตาแตกกันพอดี เลือกอะไรที่คลาสสิกอย่างขาว-ดำ ครีม-เทาเข้ม ก็เป็นอะไรที่ Classy มากว่าและใช้งานได้จริงอีกด้วย

งานดีไซน์เป็นเรื่องที่ละเอียดอ่อน แม้เรื่องของความชอบจะตัดสินไม่ได้ว่าแบบไหนดีกว่ากัน แต่การใช้งานจริงมันตัดสินได้จากความคิดเห็นของผู้ใช้งานที่แหละ ที่จะตอบเราเองว่างานชิ้นนั้นมันเวิร์คหรือไม่ ใครที่ต้องใช้ชีวิตอยู่กับ Text และ Web Design ลองนำเทคนิคเหล่านี้ไปปรับใช้และท่องจำให้ขึ้นใจกันได้เลย

SOURCE, SOURCE2, SOURCE3, SOURCE4
Picture From Erin Lee

unlockmen
WRITER: unlockmen
Share on Facebook Share on Twitter Share on Line