स्वीडन Typography

 (identity.sweden.se)
3 पॉइंट द्वारा GN⁺ 2023-07-19 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • Sweden Sans स्वीडन की brand communication में accessibility, simplicity और consistency की जिम्मेदारी निभाने वाला मुख्य typeface है, जिसे स्वीडन की पुरानी signage system से प्रेरणा लेकर बनाया गया है
  • इसे high readability और brand uniqueness बनाए रखने के लिए design किया गया है, ताकि हर application environment में मजबूत प्रभाव डालने के लिए high recognizability सुनिश्चित हो
  • Sweden Sans Book, Regular, Semibold, Bold के चार weights में उपलब्ध है, और जब Sweden Sans का उपयोग संभव न हो तो Noto Sans substitute और supporting typeface के रूप में काम करता है
  • जब Sweden Sans और Noto Sans दोनों उपलब्ध न हों, तो Arial को fallback typeface के रूप में उपयोग करें
  • Digital environment में 6px baseline grid आधारित structured typography hierarchy लागू करके consistent brand expression बनाए रखा जाता है

Typography hierarchy (Type hierarchy)

  • Sweden Sans मुख्य typeface है और Book, Regular, Semibold, Bold के चार weights देता है
  • अगर Sweden Sans उपलब्ध नहीं है, तो Noto Sans substitute और supporting typeface के रूप में काम करता है
  • Sweden Sans स्वीडन brand identity का core element है; यह consistency बनाए रखने, clarity पैदा करने और brand legacy manage करने की भूमिका निभाता है, और जब brand expression को पूरी तरह दिखाना हो तो हमेशा उपयोग किया जाना चाहिए
  • Noto Sans Sweden Sans का alternative (secondary) और supporting typeface है, साथ ही non-Roman languages और special characters के लिए substitute typeface, तथा italics जैसे special weights के लिए fallback के रूप में उपयोग होता है
    • इन उपयोगों के अलावा इसका उपयोग brand expressiveness को कमजोर कर सकता है, इसलिए जहाँ तक हो सके इससे बचें

मुख्य typeface (Main typeface)

  • Sweden Sans Book, Regular, Semibold, Bold के चार weights में उपलब्ध है
    • Semibold केवल sub-logo में उपयोग होता है

Alternative typeface (Alternative typeface)

  • Noto दुनिया की सभी भाषाओं को support करने का लक्ष्य रखने वाली Google की font family है और Open Font License के तहत licensed है
  • Noto Sans तब उपयोग होता है जब Sweden Sans वास्तविक application environment या use case को support नहीं कर पाता
    • केवल language support के लिए उपयोग
    • unavailable weights (जैसे italic)
    • special characters

Fallback typeface (Fallback typeface)

  • Arial fallback typeface है, जिसे तब उपयोग किया जाता है जब Sweden Sans या Noto Sans install या use करना संभव न हो
  • Word documents जैसी everyday communication में Arial अधिक उपयुक्त हो सकता है

Pairings (Pairings)

  • सुझाए गए type pairings का उपयोग करके सभी communications में clarity, consistency और मजबूत hierarchy सुनिश्चित करें
  • उदाहरण के रूप में Level 1 Sweden Sans + Level 2 Noto Sans, और Level 1 Sweden Sans के साथ Level 2 Noto Sans Italic/Mono combinations दिए गए हैं
  • Noto Sans Russian, Noto Sans Japanese आदि multilingual pairings के उदाहरण शामिल हैं

Type stairs (Type stairs)

  • Type stairs headline और body text, और उनके बीच के संबंध को संभालने में मदद करते हैं
  • Bold headlines छोटी typography के साथ contrast बनाकर clarity, consistency और मजबूत hierarchy सुनिश्चित करते हैं

Digital (Digital)

  • स्वीडन digital brand expression के लिए मुख्य typography hierarchy के रूप में, 6px units की structured rhythm को baseline के रूप में लागू किया जाता है
    • यह अलग-अलग sizes और combinations के बीच जाते समय balanced correlation देता है और overall expression बनाए रखता है
  • Labels का उपयोग किसी खास offering या category से जुड़े headlines के साथ संयमित रूप से करें
    • यह users को information जल्दी classify करने और category या offering से सीधे connect करने में मदद करता है
    • मुख्य रूप से hero area के cards में selected projects, core values और key editorial content को explain करते समय उपयोग होता है
  • सभी styles dark background पर white में उपयोग किए जा सकते हैं, लेकिन links इसका exception हैं

Spacing (Spacing)

  • पूरे platform पर logical और continuous typography flow के लिए सभी line heights baseline grid (हर 6px पर एक line) से defined हैं
  • सभी spacing को अलग-अलग line heights के साथ balance बनाने के लिए baseline के अनुसार optically set किया गया है
    • general rule: headline जितना बड़ा होगा, headline और paragraph के बीच spacing भी उतनी बड़ी होगी

Writing (Writing)

  • सभी contexts में जहाँ तक संभव हो sentence case या lowercase का उपयोग करें
    • brand अपने audience से चिल्लाकर नहीं, बल्कि बात करने वाली expression approach अपनाता है
  • Uppercase का उपयोग केवल आवश्यक होने पर करें, और उसे अधिकतम 1–3 characters तक सीमित रखें (जैसे website के category labels)

Right-to-left reading (Right to left hand reading)

  • जब sub-logo और content Arabic text पर आधारित हों, तो दिए गए examples का पालन करें

Alignment (Alignment)

  • Text हमेशा left-aligned होना चाहिए
  • Sender system भी हमेशा left-aligned होना चाहिए
  • Sender system के अंदर logo center-aligned होना चाहिए

Applications (Applications)

  • Sweden Sans family के उपयोग के तरीके के examples दिए गए हैं
    • logotype में Semibold
    • headlines में Sweden Sans Bold
    • body text में Sweden Sans Book

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2023-07-19
Hacker News की राय

  • Typography और page design से मोहित हूं और उनसे जुड़े लेख पढ़ना पसंद करता हूं, लेकिन इस स्तर की लगभग obsession जैसी बारीकी कैसे बनाए रखी जाती है, यह ठीक से समझ नहीं आता
    अक्सर लगता है कि typeface और उपयोग की शर्तों पर डाली गई documentation और detail पर ध्यान, वेबसाइट ऑपरेशन, API documentation या ऐप के basic features पर लगाए गए समय से कहीं ज्यादा है
    यह कुछ ऐसा है जैसे 100 साल तक oak tree उगाना, hand-made knife से veneer निकालना, उसे 1 साल तक coconut oil में डुबोकर रखना, और फिर उसे IKEA pulp honeycomb board पर चिपका देना

    • Typography documents आम तौर पर designers के लिए होते हैं, लेकिन सही तरीके से इस्तेमाल हों तो सभी के काम आ सकते हैं। Designer अगर consistent design बनाता है तो developer सामान्य default behavior वाला design system बना सकता है, और उस मुकाम पर system developer का बोझ बढ़ाने के बजाय घटा देता है
      मैंने education sector में काफी बड़े पैमाने पर Tailwind-based design system interpretation बनाया था, और design तथा tailwind-config एक ही specification से निकले थे। Choices और possibilities को घटाकर engineers के सोचने वाली जगहों को हटाया गया, और padding, font weight, line-height, color जैसे values सभी consistent हो गए
      line-height, padding, weight, color आदि से हटकर बना mockup गलत mockup है, और configured values developer को यह बात दिखा देते हैं। Specification से हटकर code भी गलत code है। Engineering और UX के बीच अच्छा communication flow चाहिए, लेकिन यह सच में काम करता है
      अच्छी तरह काम करने वाले system में सिर्फ देखकर ही defaults समझ में आने लगते हैं, जिससे बोझ घटता है। और पूरे app backend का उद्देश्य आखिरकार frontend उपलब्ध कराना ही है। Backend practices बेहतरीन हों, फिर भी अगर design या specification match नहीं करते तो ग्राहक को दिखने वाली failure बन जाती है
    • ऐसे design guides बनाने वाले लोग और API docs या दूसरे basic features संभालने वाले लोग आम तौर पर अलग roles में होते हैं। इसलिए design guide बनाना और technical requirements पर काम करना जरूरी नहीं कि zero-sum हो; असल में कई बार ये पूरी तरह अलग efforts होते हैं
      Design, खासकर typography, सीधे accessibility से जुड़ी होती है, इसलिए वह ऐसी detail वाली care की हकदार है। Contrast और visual hierarchy की definition का इस पर बड़ा असर पड़ता है कि कोई design कितना accessible है
      इस उदाहरण में आगे uppercase text बहुत कम इस्तेमाल करने की बात खास तौर पर दिखती है। Uppercase एक ऐसा मुद्दा है जिस पर accessibility को लेकर designers से मेरी बहस हो चुकी है, और Microsoft ने भी शुरुआती “Metro” design में सार्वजनिक तौर पर बड़ी समस्या झेलने के बाद माफी मांगी थी और बाद में “Fluent” design में उसे वापस बदला था
      लोग अलग-अलग अक्षरों से ज्यादा शब्दों के shape को पढ़ते हैं, और uppercase बहुत सारे मिलते-जुलते rectangles बना देता है, जिससे dyslexia न रखने वाले readers के लिए भी यह सड़क के speed bump की तरह पढ़ने की गति धीमी कर देता है। Dyslexia वाले readers के लिए यह speed bump नहीं बल्कि दीवार जैसा महसूस हो सकता है, जिससे all-caps text असल में inaccessible हो सकता है
      “अच्छा दिखता है” इस वजह से सब कुछ uppercase करने वाले designs मैंने बहुत देखे हैं, लेकिन जो रूप किसी designer को व्यवस्थित और साफ दिखता है, वही किसी और के लिए बड़ा accessibility bug बन सकता है
    • यह देखकर हैरानी होती है कि ऐसी चीजों में इतना जबरदस्त effort लगता है, लेकिन वजह सरल लगती है। बहुत से लोग typography पर obsess करना पसंद करते हैं, वे obsess करना चाहते हैं, और इसलिए obsess करने का purpose बना लेते हैं
      निजी तौर पर मुझे यह अच्छा लगता है, और मुझे लगता है ऐसे लोगों को पैसे दिए जाने चाहिए
    • ऐसी guidelines कई तरीकों से बहुत उपयोगी हो सकती हैं। अलग-अलग स्तर और training वाले लोग बड़े brand campaigns की कीमत पर भी creativity दिखाने की कोशिश करते हैं, इसलिए brand design team को उस उत्साह को नियंत्रित करने का तरीका ढूंढना पड़ता है
      ऐसे लोगों के पास technical access आम तौर पर सीमित होता है, लेकिन graphic expression के जरिए de facto brand expression तक पहुंच कहीं ज्यादा व्यापक होती है
      Technical documentation से तुलना करने पर अगर फर्क है, तो उसे अलग issue की तरह संभालना चाहिए; सिर्फ इसलिए design guide को nitpicking नहीं कहना चाहिए कि कोई दूसरी चीज कम planned या कम documented है
    • यह apps या websites के लिए guideline नहीं है, बल्कि विदेश मंत्रालय, Ministry of Enterprise and Innovation, Ministry of Culture, Swedish Institute, Business Sweden, Visit Sweden और उनके द्वारा इस्तेमाल की जाने वाली कई agencies जब विदेश में Sweden का प्रतिनिधित्व करती हैं, तो typography कैसे इस्तेमाल करनी है, इसकी guide है
      मुझे font section असामान्य रूप से बड़ा नहीं लगता। मैंने 2 साल तक ऐसी company में काम किया है जो सिर्फ design manuals बनाती थी, और अच्छा बना manual आम तौर पर ऐसा ही दिखता है

  • हाल ही में Finland की Finlandica के बारे में भी पता चला, और यह काफी अच्छी है: https://toolbox.finland.fi/brand-identity-and-guidelines/fin...

    • Capital A के ऊपर वाला element मुझे पसंद नहीं है। Title जैसी जगहों पर कभी-कभार इस्तेमाल हो तो cool लग सकता है, लेकिन हर A में दिखे तो ध्यान भटकाता है
    • सच में बहुत अच्छा दिखता है। यह लगभग monospace font जैसा दिखता है, और थोड़ा सा tweak करने पर programming के लिए भी शानदार font बन सकता है
    • #, &, @ अच्छे नहीं लगते। A और G भी अजीब हैं, जैसे sans-serif font में ornament जोड़े गए दो अक्षर हों। i और j भी कुछ वैसे ही हैं
      हालांकि I को l से अलग दिखने के लिए design किया गया है, जबकि कई fonts में ऐसा नहीं होता

  • Typeface और design पर चाहे जितना ध्यान दें, अगर visitors का स्वागत करने का तरीका परेशान करने वाला “क्या आप सच में tracking cookies नहीं चाहते?” हो, तो उसका कोई खास मतलब नहीं। दो छोटे checkboxes दबाने पड़ते हैं, और धुंधले किए गए “सिर्फ चुने हुए items allow करें” के बगल में user-hostile bold “सब allow करें” button रखा होता है
    अगर सच में UX सुधारना है तो इनमें से कोई एक चीज ज्यादा ध्यान देने लायक है

  • Stockholm की design agency Söderhavet ने इसे बनाया है। ज्यादा जानकारी यहां: https://soderhavet.com/work/sweden/

  • America में Public Sans है: https://public-sans.digital.gov/

  • https://archive.is/7ytlz
    लगता है HN ट्रैफिक ने इसे क्रैश कर दिया

    • यह थोड़ा अफसोसजनक है कि sweden.se कम समय में कुछ हजार विज़िटर्स को भी संभाल नहीं पाता
    • मुझे पता है HN कोई support forum नहीं है, लेकिन क्या archive.xx साइटों पर “Safari couldn’t establish a secure connection” दिखना सिर्फ मेरे साथ हो रहा है? काफी लंबे समय से ऐसा होता आ रहा है

  • यह शायद ऐसी साइट के लिए है जिसका फोकस विदेशियों के सामने Sweden की इमेज प्रमोट करना है। Sweden में रहते हुए मैंने Swedish सरकारी संस्थाओं के आम communication में इस font को इस्तेमाल होते नहीं देखा
    अगर Swedish Tax Agency की design language जैसी कोई चीज़ कह सकते हैं, तो वह मुझे पसंद है। लगता नहीं कि वे Sweden Sans इस्तेमाल करते हैं, लेकिन वे ठीक-ठीक क्या इस्तेमाल करते हैं, यह मुझे नहीं पता

    • वह साइट Swedish Institute चलाता है
      “Swedish Institute एक public agency है जो दुनिया भर में Sweden के प्रति दिलचस्पी और भरोसा बनाती है। हम Sweden promotion, Baltic Sea क्षेत्रीय सहयोग और global development पर काम करते हैं। […] SI के operations को मुख्य रूप से national budget से direct allocations के जरिए funding मिलती है। SI के पास international cooperation, international aid, education और university research, तथा business—इन चार क्षेत्रों में करीब 470 million SEK की Swedish government funding है।”
      [1] https://si.se/en/about-si/our-mission/
    • मेरी जानकारी में Sweden Sans नए national ID cards और passports में title typeface के रूप में इस्तेमाल होता है
    • यह सचमुच दिलचस्प है कि आजकल देश अपनी branding खुद करते हैं। और यह असर भी करती है। Nordic देशों के बारे में सोचें तो Sweden सबसे पहले दिमाग में आने की संभावना ज्यादा है
    • मुझे भी लगा था कि यह Sweden की इमेज प्रमोट करने वाली साइट है। घूमने-फिरने लायक जगहें और countryside हैं, और अगर motorcycle हो तो Sweden घूमने में ज्यादा समय नहीं लगता
      https://www.youtube.com/watch?v=qXiIJ32kaZU
      Sweden में किसी ने कहा था कि पुलिस को साबित करना हो कि driver कौन था तो उसे उसी दिन पकड़ना पड़ता है, लेकिन मैं German Autobahn पर ही चलता रहूंगा। वहां खुले घूमते moose कम होते हैं
      ghost rider patrik fürstenhoff

  • नाम Sweden Sans है, लेकिन lowercase i और l जैसे कुछ अक्षरों में serif दिखते हैं। पता नहीं मैं serif को गलत समझ रहा हूं या यहां sans का मतलब ही गलत समझ रहा हूं

    • गुंजाइश काफी होती है। font designer भावनात्मक कलाकार भी होते हैं, इसलिए कभी-कभी एक serif चुपके से डाल देते हैं, या project specification में इसका कोई खास कारण हो सकता है
      2000s में typography पढ़ाते समय students ऐसी चीज़ों की ओर इशारा करते थे। beginner class के उदाहरण के तौर पर, लोग font को ठीक से देखे बिना इस्तेमाल करते थे और बाद में किसी detail पर अटक जाते थे
      अजीब है, लेकिन ज्यादातर लोग font को चुनते समय उसके बारे में गहराई से नहीं सोचते। नाम पढ़ना तो दूर, उसे ध्यान से देखते भी नहीं। वे सिर्फ अपने design, विचार और भावनाएं, message, cool design opportunities जैसी चीज़ों के बारे में सोचते हैं
      अनुभवी designer को यह सोचने की training देनी पड़ती है कि कहीं वे font के purpose को असल में hallucinate तो नहीं कर रहे। क्योंकि अक्सर कुछ सेकंड देखने भर से मूल purpose काफी स्पष्ट हो जाता है। यह कैसे काम करता है सीख लेने पर यह भी साफ हो जाता है कि वैसा slab serif क्यों डाला गया
    • ये categories इतनी strict नहीं होतीं। यह ज्यादा इस बात का संकेत है कि designer उस font को किस lineage में मानता है
      कई sans-serif fonts में भी, खासकर l जैसे आसानी से confuse होने वाले letters में, थोड़ा serif होता है। अगर वे technical context में इस्तेमाल होते हों, या इस font की तरह हर जगह इस्तेमाल होने वाले fonts हों, तो यह और भी सच है
    • regular weight और bold weight शायद slab serif के ज्यादा करीब हो सकते हैं, लेकिन “book” weight सचमुच sans-serif है। font download करके OTF file देखें तो शायद सबसे आसानी से दिखेगा
    • वाकई लगता है कि इसमें कुछ slab serif शामिल है। उदारता से कहें तो serif और sans-serif दो सिरों वाला एक spectrum हैं
      अगर इसे serif कहा जाए तो लोग कहीं ज्यादा serif-जैसे font की उम्मीद करेंगे, इसलिए इसे sans-serif कहना शायद ज्यादा सरल है
    • सही term शायद Slab Serif होगा

  • France के पास भी अपना design system और font Marianne है: https://www.systeme-de-design.gouv.fr/elements-d-interface/f...

  • स्वीडन को कमतर दिखाने का इरादा नहीं है, लेकिन Estonia के पास भी कुछ ऐसा ही है: https://brand.estonia.ee/guidelines/typography/?lang=en

    • खूबसूरती देखने वाले की नज़र में होती है, लेकिन स्वीडन का काम आम तौर पर काफी सुंदर और पढ़ने में आसान है, जबकि Estonia की guidelines इस बात का शानदार उदाहरण लगती हैं कि जब designer को मनमानी करने दी जाए, या client बहुत ज़्यादा सहमत हो और कुछ अलग दिखना चाहता हो, तो क्या होता है
      परिचय में Estonia brand की personality को “nordic, surprising, smart” बताया गया है, लेकिन खासकर Aino font readability की कीमत पर भी surprising पर बहुत ज़्यादा केंद्रित लगता है, इसलिए smart वाले पहलू की अभिव्यक्ति साफ़ तौर पर कमजोर पड़ जाती है