ใช้ "สุขุมวิท" ทำเว็บอย่างไร ไม่ให้ผิดข้อตกลง

ปฏิเสธไม่ได้ว่าฟอนต์ "สุขุมวิท ตัดใหม่" หรือที่เราเรียกกันติดปากว่า สุขุมวิท นั้นถูกออกแบบมาได้ดีมากๆ ทั้งสวยงามและไม่มีปัญหากับโปรแกรมต่างๆทั้ง Adobe หรือ Sketch นอกจากนี้ยังใช้เป็นฟอนต์บนเว็บได้อย่างสวยงาม เห็นได้บนเว็บหลายๆเว็บ เช่น MacThai, Sanook, Dek D หรือแม้กระทั่งเว็บของ Apple เองก็ได้เลือกฟอนต์สุขุมวิท มาเป็น font-face เพื่อสร้างภาพลักษณ์แบรนด์ให้ดูสวยงามน่าจดจำ

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

  • Font นี้สามารถใช้งานได้ในลักษณะเชิงการค้า และสามารถใช้กับโปรแกรมอย่าง Adobe Photoshop ได้ รวมถึงใช้ในการทำงานเอกสาร PDF ได้โดยไม่ผิดข้อตกลง
  • แต่ ฟอนต์นี้ไม่อนุญาติให้ทำการ Upload ขึ้นไปเป็น font-face ในการทำเว็บไซต์ เนื่องจาก license เป็นคนละแบบกัน

    หลายคนอาจจะเลือกใช้ฟอนต์ทางเลือกอย่าง ThaiSans Neue ซึ่งเป็นฟอนต์ไม่มีหัว (loopless terminal) อีกตัวหนึ่งที่สวยงามและใช้งานได้ดีไม่แพ้กัน ที่สำคัญคือเป็นฟอนต์ฟรี สามารถนำไปใช้ทำเว็บไซต์ได้

    ( อ่านรายละเอียดได้ที่ ThaiSans Neue 1.0 )

    ถ้าพูดกันในเชิงทฤษฏี การจะนำฟอนต์มาใช้โดยไม่ต้องซื้อ License ใหม่นั้นแทบเป็นไปไม่ได้เลย แต่อย่าเพิ่งหมดหวังครับอย่าลืมไปว่า font ทุกตัวในเครื่องเราสามารถเรียกมาแสดงผลได้ด้วยคำสั่ง font-family:

    ดังนั้นหาก user ใช้ Mac หรืออุปกรณ์ที่มีฟอนต์สุขุมวิท ติดตั้งอยู่เราก็สามารถเรียกฟอนต์มาแสดงได้ด้วยคำสั่ง

    font-family:"Sukhumvit Set",sans-serif; 

    จำไว้เลยครับว่า value CSS ของฟอนต์ตัวนี้จะชื่อ Sukhumvit Set ซึ่งเราก็สามารถกำหนดความหนาบางได้ด้วย คำสั่ง font-weight

    ความหนา 200
    ความหนา 500
    ความหนา 600
    ความหนา 700

    ซึ่งแต่ละตัวก็จะแทนความหนาต่างๆตั้งแต่ thin จนถึง bold ครับ

    แล้ว Windows หรือ Android ล่ะ ???
    ช่างแม่*สิครับ ล้อเล่นครับ... เราจะเอา font ที่คล้ายกับสุขุมวิท จนเหมือนเป็นญาติกันมาแทน น่อววว์ นั่นก็คือ ThaiSans Neue นั่นเอง

    DOWNLOAD : ThaiSans Neue 1.0

    จากนั้นเราจะทำไฟล์ที่ได้มาทำเป็น @font-face เหมือนปกติ จะได้แบบนี้

     @charset "UTF-8";
    @font-face{
    
    font-family:"Thai Sans Neue";src:url("../fonts/ThaiSansNeue.woff") format("woff"),url("../fonts/ThaiSansNeue-fixed.svg#ThaiSansNeue-Light") format("svg"),url("../fonts/ThaiSansNeue-fixed.ttf") format("truetype");
    
    } 

    หลังจากนั้นเราก็มากำหนด font ให้กับ element ของเรา

       font-family: 'Sukhumvit Set', 'Thai Sans Neue', sans-serif; 

    เข้าใจแล้วใช่มั้ยครับว่าผมต้องการจะสื่ออะไร จริงๆแล้วเราก็แค่เรียก Sukhumvit Set มาเป็นอันดับแรก ถ้ามีก็จะแสดงผล ไม่ยากอะไร ถ้าไม่มีมันก็จะเอา Thai Sans Neue ที่เราทำเป็น @font-face ไว้มาแสดงผลแทน ซึ่งความแตกต่างจริงๆน้อยมากครับ อีกอย่างผมคิดว่าคนที่ชื่นชอบฟอนต์สุขุมวิทนั้นคงจะเป็น OS X user อยู่แล้วซึ่ง พอเราได้เห็นเว็บที่เราทำแสดงผลด้วย Sukhumvit Set ก็คงรู้สึกดีครับ

    แค่นี้เราก็สามารถใช้ sukhumvit ควบคู่ไปกับ font Thai Sans Neue ได้อย่างไม่ต้องห่วงลิขสิทธิ์แล้วครับ

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

    สวัสดีครับ สุขุมวิท