ตัวอักษรของสวีเดน
(identity.sweden.se)- Sweden Sans เป็น แบบอักษรหลัก ที่รับผิดชอบด้านการเข้าถึง ความเรียบง่าย และความสม่ำเสมอของการสื่อสารแบรนด์ของสวีเดนโดยรวม โดยพัฒนาขึ้นจากแรงบันดาลใจจากระบบป้ายแบบเก่าของสวีเดน
- ออกแบบมาให้อ่านง่ายและคงเอกลักษณ์เฉพาะของแบรนด์ พร้อมมี ความสามารถในการจดจำได้สูง เพื่อสร้างอิทธิพลที่ชัดเจนในทุกบริบทการใช้งาน
- Sweden Sans มี 4 น้ำหนัก ได้แก่ Book, Regular, Semibold, Bold และหากไม่สามารถใช้ Sweden Sans ได้ จะใช้ Noto Sans เป็นแบบอักษรทดแทนและเสริม
- เมื่อไม่สามารถใช้ทั้ง Sweden Sans และ Noto Sans ได้ ให้ใช้ Arial เป็นแบบอักษร fallback
- ในสภาพแวดล้อมดิจิทัล ใช้ลำดับชั้นตัวอักษรที่มีโครงสร้างบนพื้นฐานของ baseline grid 6px เพื่อรักษาการสื่อสารแบรนด์ให้สม่ำเสมอ
ลำดับชั้นตัวอักษร (Type hierarchy)
- Sweden Sans เป็นแบบอักษรหลักและมี 4 น้ำหนัก ได้แก่ Book, Regular, Semibold, Bold
- หากไม่สามารถใช้ Sweden Sans ได้ Noto Sans จะทำหน้าที่เป็นแบบอักษรทดแทนและเสริม
- Sweden Sans เป็นองค์ประกอบหลักของอัตลักษณ์แบรนด์สวีเดน มีหน้าที่รักษาความสม่ำเสมอ สร้างความชัดเจน และดูแลมรดกของแบรนด์ และควรถูกใช้เสมอเมื่อจำเป็นต้องแสดงออกถึงแบรนด์อย่างเต็มรูปแบบ
- Noto Sans เป็นแบบอักษรทางเลือก (ลำดับรอง) และแบบอักษรเสริมของ Sweden Sans รวมถึงใช้เป็นแบบอักษรทดแทนสำหรับภาษาที่ไม่ใช่อักษรโรมัน อักขระพิเศษ และน้ำหนักพิเศษ เช่น italic
- การใช้นอกเหนือจากวัตถุประสงค์นี้อาจทำให้พลังในการสื่อสารของแบรนด์ลดลง จึงควรหลีกเลี่ยงเท่าที่ทำได้
แบบอักษรหลัก (Main typeface)
- Sweden Sans มี 4 น้ำหนัก ได้แก่ Book, Regular, Semibold, Bold
- Semibold ใช้กับ sub logo เท่านั้น
แบบอักษรทางเลือก (Alternative typeface)
- Noto คือ font family ของ Google ที่มุ่งรองรับทุกภาษาทั่วโลก และเผยแพร่ภายใต้ Open Font License
- Noto Sans ใช้เมื่อ Sweden Sans ไม่สามารถรองรับสภาพแวดล้อมหรือรูปแบบการใช้งานจริงได้
- ใช้รองรับภาษาโดยเฉพาะ
- น้ำหนักที่ใช้งานไม่ได้ (เช่น italic)
- อักขระพิเศษ
แบบอักษร fallback (Fallback typeface)
- Arial เป็นแบบอักษร fallback ใช้เมื่อไม่สามารถติดตั้งหรือใช้งาน Sweden Sans หรือ Noto Sans ได้
- ในการสื่อสารทั่วไป เช่น เอกสาร Word, Arial อาจเหมาะสมกว่า
การจับคู่ (Pairings)
- ใช้ การจับคู่แบบอักษร ที่แนะนำเพื่อสร้างความชัดเจน ความสม่ำเสมอ และลำดับชั้นที่แข็งแรงในทุกการสื่อสาร
- มีตัวอย่างเช่น Level 1 Sweden Sans + Level 2 Noto Sans และชุดผสม Level 1 Sweden Sans กับ Level 2 Noto Sans Italic/Mono
- รวมตัวอย่างการจับคู่หลายภาษา เช่น Noto Sans Russian, Noto Sans Japanese
บันไดตัวอักษร (Type stairs)
- บันไดตัวอักษร ช่วยในการจัดการหัวเรื่อง เนื้อความ และความสัมพันธ์ระหว่างทั้งสอง
- หัวเรื่องตัวหนาจะตัดกับตัวอักษรขนาดเล็กกว่า เพื่อสร้างความชัดเจน ความสม่ำเสมอ และลำดับชั้นที่แข็งแรง
ดิจิทัล (Digital)
- เป็นลำดับชั้นตัวอักษรหลักสำหรับการสื่อสารแบรนด์ดิจิทัลของสวีเดน โดยใช้จังหวะที่มีโครงสร้างในหน่วย 6px เป็น baseline
- ช่วยสร้างความสัมพันธ์ที่สมดุลเมื่อสลับระหว่างขนาดและชุดผสมที่ต่างกัน พร้อมคงภาพรวมของการสื่อสารไว้
- Label ใช้อย่างพอดีร่วมกับหัวเรื่องที่เชื่อมโยงกับข้อเสนอหรือหมวดหมู่เฉพาะ
- ช่วยให้ผู้ใช้จัดหมวดหมู่ข้อมูลได้อย่างรวดเร็ว และเชื่อมไปยังหมวดหมู่หรือข้อเสนอได้โดยตรง
- ใช้เป็นหลักบนการ์ดในพื้นที่ hero เพื่ออธิบายโครงการที่คัดสรร คุณค่าหลัก และเนื้อหาบรรณาธิการสำคัญ
- ทุกสไตล์สามารถใช้เป็นสีขาวบนพื้นหลังสีเข้มได้ ยกเว้นลิงก์
ระยะห่าง (Spacing)
- เพื่อให้เกิดการไหลของตัวอักษรที่สมเหตุสมผลและต่อเนื่องทั่วทั้งแพลตฟอร์ม ระยะห่างระหว่างบรรทัดทั้งหมดถูกกำหนดด้วย baseline grid (หนึ่งบรรทัดทุก ๆ 6px)
- ระยะห่างทั้งหมดถูกตั้งค่าเชิงสายตาให้สอดคล้องกับ baseline เพื่อให้สมดุลกับระยะห่างระหว่างบรรทัดที่หลากหลาย
- กฎทั่วไป: ยิ่งหัวเรื่องมีขนาดใหญ่ ระยะห่างระหว่างหัวเรื่องกับย่อหน้าก็ยิ่งมาก
การเขียน (Writing)
- ในทุกบริบท ให้ใช้ sentence case หรืออักษรตัวพิมพ์เล็กให้มากที่สุดเท่าที่เป็นไปได้
- แบรนด์มุ่งสื่อสารในลักษณะที่พูดคุยกับผู้ชม ไม่ใช่ตะโกนใส่ผู้ชม
- ใช้อักษรตัวพิมพ์ใหญ่เฉพาะเมื่อจำเป็นเท่านั้น และจำกัดไว้สูงสุด 1–3 ตัวอักษร (เช่น ป้ายหมวดหมู่บนเว็บไซต์)
การอ่านจากขวาไปซ้าย (Right to left hand reading)
- เมื่อ sub logo และคอนเทนต์ใช้ข้อความภาษาอาหรับเป็นฐาน ให้ทำตามตัวอย่างที่แสดง
การจัดแนว (Alignment)
- ข้อความต้อง จัดชิดซ้าย เสมอ
- Sender system ต้องจัดชิดซ้ายเสมอเช่นกัน
- โลโก้ภายใน Sender system จัดกึ่งกลาง
ตัวอย่างการใช้งาน (Applications)
- มีตัวอย่างวิธีใช้ตระกูล Sweden Sans
- ใช้ Semibold กับ logotype
- ใช้ Sweden Sans Bold กับหัวเรื่อง
- ใช้ Sweden Sans Book กับเนื้อความ
1 ความคิดเห็น
ความเห็นจาก Hacker News
ฉันหลงใหลในตัวอักษรและการออกแบบหน้าเพจ เลยชอบอ่านบทความแนวนี้มาก แต่ก็ยังไม่ค่อยเข้าใจว่า ความละเอียดระดับเกือบหมกมุ่น แบบนี้ถูกคงไว้ได้อย่างไร
หลายครั้งมันดูเหมือนว่าการทำเอกสารและใส่ใจรายละเอียดเกี่ยวกับแบบอักษรและเงื่อนไขการใช้งาน ใช้เวลาไปมากกว่าการดูแลเว็บไซต์ การเขียนเอกสาร API หรือฟังก์ชันพื้นฐานของแอปเสียอีก
ให้ความรู้สึกเหมือนปลูกต้นโอ๊กนาน 100 ปี ใช้มีดทำมือเฉือนไม้วีเนียร์ แล้วแช่น้ำมันมะพร้าว 1 ปี ก่อนจะเอาไปติดบนแผ่นกระดาษรังผึ้งของ IKEA
ฉันเคยทำการตีความ design system บนฐาน Tailwind ในวงการการศึกษาที่มีขนาดค่อนข้างใหญ่ โดยดีไซน์กับ
tailwind-configมาจากสเปกเดียวกัน การลดตัวเลือกและความเป็นไปได้ช่วยตัดเรื่องที่วิศวกรต้องคอยตัดสินใจออกไป และทำให้ค่าต่างๆ อย่าง padding, น้ำหนักฟอนต์, line-height และสี สอดคล้องกันทั้งหมดmockup ที่หลุดจาก line-height, padding, น้ำหนัก หรือสีที่กำหนดไว้ ก็คือ mockup ที่ผิด และค่าที่ตั้งไว้จะทำให้ผู้พัฒนารู้ได้ทันทีว่าเป็นแบบนั้น โค้ดที่หลุดจากสเปกก็เป็นโค้ดที่ผิดเช่นกัน ต้องมีการสื่อสารที่ดีระหว่างวิศวกรรมกับ UX แต่ในทางปฏิบัติมันใช้ได้ผล
ในระบบที่ทำงานได้ดี แค่มองก็รู้ค่าเริ่มต้น ทำให้ภาระลดลง และสุดท้ายแล้ว จุดประสงค์ของแบ็กเอนด์ทั้งระบบก็คือการส่งมอบฟรอนต์เอนด์ หากแนวปฏิบัติฝั่งแบ็กเอนด์จะดีแค่ไหน แต่ถ้าดีไซน์หรือสเปกไม่ตรง สิ่งที่ลูกค้าเห็นก็คือความล้มเหลว
ดีไซน์ โดยเฉพาะตัวอักษร เกี่ยวข้องโดยตรงกับ การเข้าถึง จึงสมควรได้รับความใส่ใจในรายละเอียดแบบนี้ การกำหนดคอนทราสต์และลำดับชั้นทางสายตามีผลอย่างมากต่อความเข้าถึงได้ของงานออกแบบ
ในตัวอย่างนี้ สิ่งที่เห็นชัดมากคือส่วนที่บอกว่าให้ใช้ข้อความตัวพิมพ์ใหญ่น้อยลงมาก ฉันเคยต้องเถียงกับดีไซเนอร์เรื่องนี้เพราะมันเป็นปัญหาด้านการเข้าถึง และ Microsoft ก็เคยเจอปัญหาใหญ่ต่อสาธารณะจากดีไซน์ “Metro” ช่วงแรก ก่อนจะขอโทษและย้อนกลับในดีไซน์ “Fluent” ภายหลัง
ผู้คนอ่านรูปร่างของคำมากกว่าตัวอักษรทีละตัว แต่ตัวพิมพ์ใหญ่สร้างสี่เหลี่ยมคล้ายๆ กันจำนวนมาก จึงทำให้อ่านช้าลงเหมือนลูกระนาดบนถนน แม้กับผู้อ่านที่ไม่ได้มีภาวะดิสเล็กเซียก็ตาม และสำหรับผู้อ่านที่มีภาวะดิสเล็กเซีย มันอาจไม่ใช่ลูกระนาดแต่เป็นกำแพง ทำให้ข้อความที่เป็นตัวพิมพ์ใหญ่ทั้งหมดแทบเข้าถึงไม่ได้เลย
ฉันเห็นดีไซน์จำนวนมากที่ใช้ตัวพิมพ์ใหญ่ทั้งหมดเพียงเพราะ “มันดูดี” แต่รูปแบบที่ทำให้ดีไซเนอร์บางคนรู้สึกว่าเป็นระเบียบและสะอาด อาจกลายเป็นบั๊กด้านการเข้าถึงขนาดใหญ่สำหรับคนอื่น
ส่วนตัวฉันชอบนะ และคิดว่าควรจ่ายเงินให้คนแบบนี้
คนเหล่านี้มักถูกจำกัดการเข้าถึงทางเทคนิค แต่การเข้าถึงการแสดงออกผ่านงานกราฟิกซึ่งเทียบได้กับการแสดงออกของแบรนด์นั้นกว้างกว่ามาก
ถ้ามีความต่างเมื่อเทียบกับเอกสารทางเทคนิค ความต่างนั้นก็ควรถูกจัดการเป็นอีกประเด็นหนึ่ง ไม่ใช่เรียกคู่มือดีไซน์ว่าเป็นการจับผิดจุกจิก เพียงเพราะอย่างอื่นมีการวางแผนหรือการทำเอกสารน้อยกว่า
ฉันไม่คิดว่าส่วนเรื่องตัวอักษรจะใหญ่ผิดปกติ ฉันเคยทำงานอยู่บริษัทที่ทำแต่คู่มือดีไซน์อยู่ 2 ปี และคู่มือที่ทำมาดีส่วนใหญ่ก็หน้าตาประมาณนี้
ไม่นานมานี้ฉันเพิ่งไปรู้จัก Finlandica ของฟินแลนด์เหมือนกัน และมันก็ค่อนข้างดี: https://toolbox.finland.fi/brand-identity-and-guidelines/fin...
#,&,@ไม่ค่อยดี A กับ G ก็แปลกๆ เหมือนเป็นตัวอักษรสองตัวในฟอนต์ sans-serif ที่มีลวดลายตกแต่งปนอยู่ i กับ j ก็เป็นแบบนั้นเหมือนกันแต่ I ถูกออกแบบมาให้แยกจาก l ได้ ซึ่งหลายฟอนต์ไม่ได้ทำแบบนั้น
ต่อให้ใส่ใจกับตัวอักษรและดีไซน์แค่ไหน ถ้าวิธีต้อนรับผู้เข้าชมยังน่ารำคาญแบบ “แน่ใจหรือว่าไม่ต้องการคุกกี้ติดตามจริงๆ?” มันก็ไม่มีความหมายมากนัก ต้องกดเช็กบ็อกซ์เล็กๆ สองอัน และมีปุ่ม “ยอมรับทั้งหมด” ตัวหนาแบบไม่เป็นมิตรต่อผู้ใช้ วางอยู่ข้าง “อนุญาตเฉพาะรายการที่เลือก” ที่ทำให้ดูจาง
ถ้าอยากปรับปรุง UX จริงๆ เรื่องแบบนี้สักอย่างน่าจะคุ้มค่ากับการใส่ใจมากกว่า
ทำโดยเอเจนซีออกแบบ Söderhavet จากสตอกโฮล์ม รายละเอียดเพิ่มเติมอยู่ที่นี่: https://soderhavet.com/work/sweden/
ฝั่งสหรัฐก็มี Public Sans: https://public-sans.digital.gov/
https://archive.is/7ytlz
ดูเหมือนจะล่มเพราะทราฟฟิกจาก HN
archive.xxมันเป็นแบบนี้มานานพอสมควรแล้วดูเหมือนว่านี่จะเป็นแบบอักษรสำหรับเว็บไซต์ที่เน้นโปรโมตภาพลักษณ์ของสวีเดนให้ชาวต่างชาติ เหมือนตอนอยู่สวีเดนผมไม่เคยเห็นมีการใช้แบบอักษรนี้ในการสื่อสารทั่วไปของหน่วยงานรัฐสวีเดน
ถ้าจะเรียกภาษาการออกแบบของ Swedish Tax Agency แบบนั้น ผมก็ชอบนะ แม้ดูเหมือนจะไม่ได้ใช้ Sweden Sans แต่ก็ไม่รู้แน่ชัดว่าใช้ตัวไหน
“Swedish Institute เป็นหน่วยงานภาครัฐที่สร้างความสนใจและความเชื่อมั่นต่อสวีเดนทั่วโลก เราทำงานด้านการประชาสัมพันธ์สวีเดน ความร่วมมือในภูมิภาคทะเลบอลติก และการพัฒนาระดับโลก […] การดำเนินงานของ SI ได้รับการสนับสนุนทางการเงินเป็นหลักจากการจัดสรรโดยตรงผ่านงบประมาณแผ่นดิน SI ถือครองเงินทุนจากรัฐบาลสวีเดนราว 470 ล้าน SEK ในสี่ด้าน ได้แก่ ความร่วมมือระหว่างประเทศ ความช่วยเหลือระหว่างประเทศ การศึกษาและการวิจัยในมหาวิทยาลัย และธุรกิจ”
[1] https://si.se/en/about-si/our-mission/
https://www.youtube.com/watch?v=qXiIJ32kaZU
มีคนในสวีเดนเคยบอกว่าถ้าตำรวจจะพิสูจน์ว่าใครเป็นคนขับก็ต้องจับได้ในวันนั้นเลย แต่ผมคงขี่บนออโต้บาห์นในเยอรมนีต่อไป เพราะมีมูสเดินเพ่นพ่านน้อยกว่า
ghost rider patrik fürstenhoff
ชื่อคือ Sweden Sans แต่ตัวอักษรบางตัวอย่าง i กับ l ตัวพิมพ์เล็กกลับดูเหมือนมี serif อยู่ ผมไม่แน่ใจว่าเป็นเพราะผมเข้าใจคำว่า serif ผิด หรือเข้าใจความหมายของ sans ในที่นี้ผิดกันแน่
ตอนสอนวิชาตัวพิมพ์ในช่วงยุค 2000 นักเรียนมักชี้เรื่องแบบนี้ขึ้นมาเสมอ มันเคยเป็นตัวอย่างในชั้นเรียนเบื้องต้น ว่าคนใช้ฟอนต์โดยไม่ดูให้ดีแล้วค่อยมาติดกับรายละเอียดบางอย่างทีหลัง
แปลกดี แต่คนส่วนใหญ่เลือกฟอนต์โดยไม่ได้คิดลึกเรื่องตัวฟอนต์เองนัก ไม่ได้แม้แต่จะอ่านชื่อหรือพินิจดูละเอียด พวกเขาคิดถึงแต่งานออกแบบของตัวเอง ความคิดและอารมณ์ ข้อความ หรือโอกาสในการทำดีไซน์เจ๋ง ๆ
นักออกแบบที่ชำนาญควรถูกฝึกให้คิดว่าตัวเองกำลัง หลอน จุดประสงค์ของฟอนต์อยู่หรือเปล่า เพราะหลายครั้งแค่ดูไม่กี่วินาทีก็เห็นเจตนาเดิมได้ชัดมาก และเมื่อเข้าใจกลไกนี้แล้ว ก็จะเห็นชัดว่าทำไมถึงมี slab serif แบบนั้นอยู่
ฟอนต์ sans-serif จำนวนมากก็มี serif เล็กน้อยในตัวอักษรบางตัว โดยเฉพาะตัวที่สับสนง่ายอย่าง l ยิ่งถ้าใช้ในบริบทเชิงเทคนิค หรือเป็นฟอนต์สารพัดใช้งานแบบตัวนี้ ก็ยิ่งพบได้
ถ้าเรียกมันว่า serif คนก็คงคาดหวังฟอนต์ที่เป็น serif มากกว่านี้ ดังนั้นเรียกมันว่า sans-serif อาจจะง่ายกว่า
ฝรั่งเศสก็มีระบบดีไซน์และฟอนต์ของตัวเองชื่อ Marianne: https://www.systeme-de-design.gouv.fr/elements-d-interface/f...
https://wir.berlin/kampagnen/die-typo
https://www.rijkshuisstijl.nl/publiek/modules/product/Digita...
https://fonts.tourismni.com/
หาเนื้อหาบนเว็บไซต์นั้นยากเหมือนฝันร้าย เลยแนบลิงก์แนวทางการออกแบบมาด้วย
https://www.visiteuropewithskal.eu/wp-content/uploads/2021/0...
ไม่ได้ตั้งใจจะเหยียดสวีเดน แต่เอสโตเนียก็มีอะไรคล้าย ๆ กันอยู่เหมือนกัน: https://brand.estonia.ee/guidelines/typography/?lang=en
ในบทนำอธิบายบุคลิกของแบรนด์ Estonia ว่าเป็น “nordic, surprising, smart” แต่โดยเฉพาะฟอนต์ Aino ดูเหมือนจะทุ่มน้ำหนักไปที่ความ surprising มากเกินไปจนยอมแลกกับความอ่านง่าย ทำให้การสื่อสารความเป็น smart อ่อนลงอย่างชัดเจน