वेब डिझाइनमधील लोकप्रिय फॉन्ट. वेगवेगळ्या प्रकारचे फॉन्ट तुमच्या वेब डिझाइनवर कसा परिणाम करतात -. टायपोग्राफी आणि संदेशन

वेबसाइटसाठी फॉन्टची निवड थेट रूपांतरणावर परिणाम करते. टायपोग्राफी कोणत्याही डिझायनरला साइटवर ऑर्डर आणण्यास मदत करेल. वेबसाइटसाठी फॉन्टची निवड अनेक एकत्रित घटकांवर आणि घटकांवर अवलंबून असते ज्याकडे तुम्ही निश्चितपणे लक्ष दिले पाहिजे. त्यापैकी: शैलीचा प्रकार, फॉन्ट स्वतः, रेषेची लांबी, ओळींमधील अंतर, कर्णिंग (वैयक्तिक वर्ण किंवा अक्षरांमधील पांढरी जागा), अंतर आणि वर्ण घनता.

मजकूरासह कार्य करण्याचे मुख्य तत्त्वः परिणामी, साइटवर सादर केलेली माहिती अभ्यागताला सहजपणे समजली पाहिजे, म्हणजेच मजकूराचे काही भाग एकमेकांशी जोडलेले असले पाहिजेत, परंतु मुख्य मुद्दे पहिल्या दृष्टीक्षेपात लक्षात येण्यासारखे असले पाहिजेत.

इंटरनेट मार्केटर्सचे म्हणणे आहे की योग्यरित्या निवडलेली टायपोग्राफी वेबसाइटवरील मजकूरात मोठ्या प्रमाणात सुधारणा आणि पूरक ठरू शकते. त्याच वेळी, निरक्षर
आणि कुरुप ठेवलेला मजकूर अगदी हुशार कॉपीरायटरचे कार्य जतन करणार नाही.

वेबसाइटवर मजकूर पोस्ट करताना तुम्ही कोणते मूलभूत नियम पाळले पाहिजेत?

• तुमच्या साइटचा वापरकर्ता जो फॉन्ट वाचेल, ते सर्व प्रथम, वाचण्यास सोपे असावे. सुंदर आणि मूळ फॉन्ट वाचकांसाठी नेहमीच सोयीस्कर आणि समजण्यायोग्य नसतात.
• फॉन्टने मजकूर पूरक असावा, तो बदलू नये. काय लिहिले आहे ते वाचल्यानंतर, अभ्यागताने मजकूराचे सार लक्षात ठेवले पाहिजे, मनोरंजक टायपोग्राफी नाही.
• एका मजकुरात अनेक फॉन्ट वापरताना, तुम्हाला हे लक्षात ठेवणे आवश्यक आहे की कॉन्ट्रास्टने फॉन्ट वेगळे केले पाहिजेत, परंतु त्याच वेळी त्यांच्यामध्ये काही सामान्य वैशिष्ट्य राखून ठेवावे.
• साधेपणा ही यशाची गुरुकिल्ली आहे. तुमचा मजकूर विविध प्रकारच्या फॉन्टच्या प्रदर्शनात बदलू नये.
• बाजाराच्या मागणीवर आधारित फॉन्ट निवडा. तुमच्या कोनाडामधील प्रतिस्पर्ध्यांचे विश्लेषण करा आणि तुमच्या साइटला, उदाहरणार्थ, कठोर, मोठा किंवा बऱ्यापैकी औपचारिक फॉन्टची आवश्यकता आहे की नाही हे समजून घ्या.
• शब्द आणि अक्षरांमधील अंतरांकडे लक्ष द्या. ते मध्यम रुंद असावेत.
• प्रत्येक शब्दाच्या सुरुवातीला कॅपिटल अक्षरे वापरण्याची गरज नाही. इंटरनेटवर 90% मजकूर लिहिलेले आहेत लहान लिपीतील अक्षरआणि वापरकर्त्यांद्वारे उत्तम प्रकारे वाचनीय आहेत.
• रेषेची लांबी खूप लहान असू शकत नाही, जेणेकरून सतत ओळीच्या सुरूवातीस उडी मारू नये, जे अर्थातच वापरकर्त्यांसाठी गैरसोयीचे कारण बनते. पण तुम्ही ओळ जास्त लांब करू नये. "गोल्डन मीन" शोधा.
• शब्दांच्या घनतेबद्दल विसरू नका; वापरकर्त्याला अशी भावना नसावी की सर्व शब्द एका ढिगाऱ्यावर टाकले जातात.

आकडेवारीनुसार, खालील फॉन्ट लोकप्रिय आणि व्यापक मानले जातात:टाइम्स न्यू रोमन, जॉर्जिया, व्हरडाना, एरियल ब्लॅक, कुरियर, ट्रेबुचेट एमएस, कॉमिक सॅन्स किंवा प्रभाव.

त्यासाठी फॉन्ट आकार, फॉन्ट रंग आणि पार्श्वभूमी निवडणे.

फॉन्ट आकार महत्त्वाचा आहे, परंतु त्याची निवड अंदाज करणे कठीण आहे. शेवटी, काही लोकांना मोठे फॉन्ट आवडतात, काहींना लहान फॉन्ट आवडतात. मानक आकार 14 पिक्सेल मानला जातो (हे राज्य डिप्लोमा लिहिण्यासाठी वापरले जाते आणि अभ्यासक्रम). निवडलेल्या फॉन्ट आकाराने फक्त एका नियमाचे पालन करणे आवश्यक आहे - आपल्या संसाधनाच्या अभ्यागताने पोस्ट केलेला मजकूर आरामात वाचणे आवश्यक आहे.

पांढऱ्या पार्श्वभूमीवर काळा मजकूर हा एक आदर्श संयोजन आहे हे सामान्यतः स्वीकारले जाते. परंतु जे लोक PC वर बराच वेळ घालवतात ते दावा करतात की थोड्याशा राखाडी पार्श्वभूमीवर काळा आणि राखाडी मजकूर वाचणे अधिक सोयीस्कर आहे. वस्तुस्थिती अशी आहे की या संयोजनाने डोळे इतके थकले नाहीत. तथापि, पांढरी पार्श्वभूमी त्याच्या किंचित राखाडी छटाशी तुलना करता तीक्ष्ण आणि उजळ आहे.

तुम्हाला उच्च-गुणवत्तेचे वेब फॉन्ट कुठे मिळतात? अनेक उपयुक्त संसाधने आहेत जिथे आपण प्रत्येक चवसाठी फॉन्ट शोधू शकता. अशा साइट्समध्ये विशेष लक्षसंबोधित केले पाहिजेFontsquirrel, Myfonts, Fonts.com, Typekit, Typecast, WebFont.ru.

फॉन्ट फाइल्स कोणत्या फॉरमॅटमध्ये असाव्यात? फॉन्ट एकाच वेळी अनेक आवश्यक स्वरूपांमध्ये असणे आवश्यक आहे. बहुदा: TTF किंवा OTF – एक फॉन्ट फाइल, परंतु साइट पाहताना सर्व्हरवरून डाउनलोड केली जाते; WOFF - असुरक्षित OTF किंवा TTF स्त्रोत संग्रहण, एक महत्त्वाचे स्वरूप (बहुतेक द्वारे समर्थित लोकप्रिय ब्राउझर); EOT - TT OpenType द्वारे कार्यान्वित केलेले संग्रहण ज्यात सुरक्षा यंत्रणा आहे, जुन्या ब्राउझरला समर्थन देण्यासाठी आवश्यक आहे इंटरनेट एक्सप्लोरर; SVG - सफारी समर्थनासाठी.

वेबसाइटसाठी फॉन्ट कसे वापरावे? वेब तज्ञांनी वापरलेल्या अनेक शिफारसी.

1. वेबसाइट पृष्ठावर मजकूराचे अनेक ब्लॉक बनवा. हे वाचकांसाठी अतिरिक्त "हुक" तयार करते.
2. कंपन इष्टतम मापदंडफॉन्ट स्थिती आणि संरेखन. रॅप, मि आणि यासह पोझिशनिंग पर्यायांमधून निवडा कमाल रुंदीआणि उंची, पृष्ठाच्या डिझाइन आणि लेआउट घटकांकडे लक्ष देऊन.
3. तुमच्या उत्पादन/सेवेच्या किंवा ब्रँडच्या स्वरूपावर अवलंबून फॉन्ट निवडा. उदाहरणार्थ, गुळगुळीत रेषा, कोपरे आणि हलकी अक्षरे वापरणे टाळणे हे सर्वात जास्त आहे सर्वोत्तम शक्य मार्गानेस्त्रीलिंगी उत्पादन दर्शवा.
4. तुमचा मजकूर खरोखर वाचनीय आहे का ते तपासा. तुमच्या वेबसाइटसाठी लाइटवेट फॉन्टवर बोली लावा.
5. इष्टतम फॉन्ट आकार वापरा, परंतु मजकुरात विविध आकारांचे अनेक फॉन्ट समाविष्ट करा. उदाहरणार्थ, तुम्ही मजकुरापेक्षा मोठ्या फॉन्टमध्ये हेडिंग/उपशीर्षक/बुलेट सूची बनवू शकता.
6. लक्ष वेधण्यासाठी Caps Lock वापरा. उदाहरणार्थ, हे लहान घोषणा किंवा मथळे हायलाइट करण्यासाठी वापरले जाऊ शकते. पण ते जास्त करू नका.
7. अक्षरांमधील योग्य अंतर निवडा. मोठे अंतर दृश्य समज सुलभ करते आणि, याउलट, एक लहान अंतर मजकूर समृद्ध करते, परंतु समजणे कठीण होते.
8. मुद्रित उत्पादने, बॅनर आणि इन्फोग्राफिक्स डिझाइन करताना फॉन्टच्या वेगवेगळ्या जोड्या वापरणे चांगले आहे.
9. काळजी घ्या सोयीस्कर स्थानपृष्ठावरील मजकूर.
10. जाहिरात छापील उत्पादने, बॅनर आणि सादरीकरण स्लाइड्सवरील मजकूराचे प्रमाण कमी करा.

आम्हाला आशा आहे की आमच्या टिपा तुम्हाला तुमच्या ऑनलाइन संसाधनासाठी फॉन्ट निवडण्यात मदत करतील! हायपरहोस्ट कंपनी स्थिर आणि उच्च-गुणवत्तेची ऑफर देण्यात नेहमीच आनंदी असते

बुकमार्क करण्यासाठी

असे मानले जाते की संप्रेषणामध्ये मजकूर मुख्य भूमिका बजावते, कारण तेच वापरकर्त्याला सूचित करते आणि त्याला प्रदान करते. आवश्यक सामग्री. तथापि, टायपोग्राफीचे महत्त्व कमी लेखू नका: एक चांगला फॉन्ट वाचणे सोपे करतो, तर वाईट फॉन्ट, त्याउलट, मजकूर समजणे कठीण करते.

फॉन्ट निवडताना प्रभावी ठरेल असे कोणतेही नियम नाहीत. तथापि, अशी अनेक तत्त्वे आहेत जी मोबाइल डिव्हाइसवरील वाचन अनुभव सुधारण्यास मदत करतील.

iOS आणि Android टायपोग्राफी वैशिष्ट्ये

iOS 9 लाँच करण्यापूर्वी, iOS प्रणालीचा फॉन्ट हेल्वेटिका न्यू होता, परंतु रिलीजनंतर नवीन आवृत्तीत्याची जागा सॅन फ्रान्सिस्कोने घेतली. फॉन्ट दोन शैलींमध्ये ऑफर केला जातो: डिस्प्ले (इंटरफेसच्या UI घटकांमध्ये वापरण्यासाठी आणि मोठ्या बिंदू आकारासह मजकूरासाठी) आणि मजकूर (यासाठी प्रचंड मजकूरलहान आकार).

मजकूर उपपरिवारात, अक्षरांमधील अंतर प्रदर्शनापेक्षा जास्त आहे. लहान बिंदू आकार अधिक सुवाच्य बनवण्यासाठी या मजकूर फॉन्टचे छिद्र देखील विस्तृत आहेत. सॅन फ्रान्सिस्कोच्या वैशिष्ट्यांपैकी एक म्हणजे तो डायनॅमिक फॉन्ट आहे: तो आकारानुसार शैली बदलतो. सिस्टीम फॉन्टचा आकार 20pt पेक्षा जास्त झाल्यावर डिस्प्लेवर आपोआप स्विच करते.

Android म्हणून वापरते सिस्टम फॉन्टरोबोटो किंवा, जर भाषा त्याला सपोर्ट करत नसेल तर नोटो. त्यापैकी प्रत्येक सिरिलिकमध्ये सादर केला आहे.

मटेरियल डिझाइन, जे Android डिव्हाइसेसवर वापरले जाते, घटकांमध्ये मोठ्या मोकळ्या जागा, तसेच पदानुक्रम तयार करण्यासाठी बिंदू आकारांची विस्तृत विविधता प्रदान करते.

आयओएसमध्ये, या हेतूसाठी, नियम म्हणून, ते फॉन्ट आकार नव्हे तर त्याचे वजन वापरतात. जर रोबोटोमध्ये फक्त सहा भिन्नता असतील, तर सॅन फ्रान्सिस्कोमध्ये त्यापैकी 15 आहेत: सहा मजकूर सबफॅमिलीसाठी आणि नऊ डिस्प्लेसाठी.

तुम्ही तुमच्या ॲप्लिकेशनमध्ये कोणताही ट्रू टाइप (.TTF) फॉन्ट वापरू शकता, परंतु तुम्ही परवाना खरेदी करण्याकडे विशेष लक्ष दिले पाहिजे. जरी फॉन्ट विनामूल्य असला तरीही, तुम्हाला त्यासाठी पैसे द्यावे लागतील की नाही हे स्पष्ट करणे आवश्यक आहे व्यावसायिक वापर. परवाना मूळ विनंतीशी देखील जुळला पाहिजे: वेब इंटरफेससाठी खरेदी केलेला फॉन्ट मोबाइल अनुप्रयोगात किंवा लोगोमध्ये वापरला जाऊ शकत नाही.

अनुप्रयोगामध्ये, तुम्ही एक किंवा दोन टाइपफेससह करावे: एक मुख्य मजकूरासाठी, दुसरा शीर्षकांसाठी. तथापि, अनुप्रयोगामध्ये एकच फॉन्ट स्थापित करणे चांगले आहे. सिस्टीम व्यतिरिक्त फॉन्ट वापरताना, त्याची सुवाच्यता, आकार, रेषेची लांबी, रेषा आणि अक्षरांमधील अंतर लक्षात घेणे आवश्यक आहे.

सुवाच्यता

अक्षरे स्पष्ट आणि ओळखण्यायोग्य असावीत - केवळ या प्रकरणात ते इंटरफेस घटक म्हणून चांगले कार्य करतील. हेल्व्हेटिकासह अनेक सॅन्स सेरिफ फॉन्टमध्ये अयोग्य आहेत कॅपिटल अक्षर I आणि लोअरकेस l, त्यामुळे ते मोबाईल उपकरणांसाठी निवडले जाऊ नयेत.

स्रोत Sans Pro (डावीकडे) आणि Helvetica (उजवीकडे)

Helvetica मध्ये पहिली तीन अक्षरे वाचणे जवळजवळ अशक्य आहे, तर Source Sans Pro वाचणे सोपे आहे. हेल्वेटिका इंटरफेससह कार्य करण्यासाठी योग्य नाही: फॉन्ट 1957 मध्ये तयार केला गेला होता आणि मूळतः वापरण्यासाठी हेतू नव्हता लहान पडदे. म्हणूनच ॲपलने सॅन फ्रान्सिस्को विकसित केले.

फॉन्ट आकार आणि सामग्री पदानुक्रम

फॉन्ट आकार घटकांच्या वाचनीयतेवर परिणाम करतो, विशेषत: मजकूराच्या मोठ्या ब्लॉक्समध्ये. लहान बिंदू आकारासह मजकूर वाचण्यात वापरकर्त्यास अधिक वेळ लागेल, कारण या प्रकरणात त्याला ओळीची सुरुवात आणि शेवट शोधणे कठीण होईल. परिणामी, वाचक जाणूनबुजून बरीच माहिती वगळेल.

तथापि, खूप मोठा फॉन्ट देखील गैरसोयीचा आहे. ओळ खूपच लहान असल्यामुळे आपण वाचकाला डोळे वटारण्यास भाग पाडतो आणि त्यामुळे त्याची वाचनाची लय बिघडते. अशा परिस्थितीत, माहिती समजणे अधिक कठीण आहे. वापरणे चांगले मूलभूत पॅरामीटर्सडिव्हाइस ज्यासाठी डिझाइन तयार केले जात आहे. iOS साठी ते 17pt आहे, Android साठी ते 13sp आहे.

मूलभूत फॉन्ट आकार निवडताना, आपल्याला सामग्रीचे प्रमाण आणि त्याच्या ग्राहकांची श्रेणी विचारात घेणे आवश्यक आहे. जर अनुप्रयोगाचे मुख्य प्रेक्षक 50 वर्षांपेक्षा जास्त वयाचे लोक असतील, तर तुम्ही 21px सारखा मोठा फॉन्ट वापरावा, कारण वयानुसार दृष्टी खराब होते.

टायपोग्राफिक स्केल हेडिंग आणि उपशीर्षकांचा आकार निर्धारित करण्यात मदत करेल. क्लासिक स्केल, रॉबर्ट ब्रिंगहर्स्टच्या शब्दावलीत, खालीलप्रमाणे प्रगती करतो: 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24 आणि असेच. तथापि, आपण दुसरे श्रेणीकरण (सुवर्ण गुणोत्तर किंवा हार्मोनिक अंतराल) वापरू शकता. modularscale.com या वेबसाइटवर विशेष कॅल्क्युलेटर वापरून गणना करणे सोयीचे आहे.

त्याच्या अनुषंगाने फॉन्ट आकार निवडण्यासाठी सामग्री पदानुक्रमावर आगाऊ निर्णय घेणे आवश्यक आहे. जर बेस फॉन्ट 1 असेल, तर H1 स्तर हेडिंग 3em असेल. अक्षरे आणि लहान मजकूर मूळ आकारापेक्षा एक आकार लहान असेल.

PhotoCountry अनुप्रयोगातील सामग्री पदानुक्रमाचे उदाहरण

स्ट्रिंग लांबी

आरामदायी वाचनासाठी इष्टतम रेषेची लांबी ५०-६० वर्णांची आहे. हा आकार योग्य आहे डेस्कटॉप अनुप्रयोगतथापि, मोबाइल डिव्हाइस स्क्रीन लहान आहेत, म्हणून त्यांच्यासाठी 30-40 वर्ण लांबीच्या ओळी वापरणे चांगले आहे.

रेषेच्या लांबीपेक्षा फॉन्ट आकार अधिक महत्त्वाचा आहे, म्हणून पहिली पायरी म्हणजे योग्य फॉन्ट आकार निवडणे.

मजकूरात "हवा".

• कसे लहान आकारस्क्रीन, अक्षरांमधील अंतरावर अधिक लक्ष दिले पाहिजे.
• मजकुरामध्ये "हवा" जोडणे आणि रेषेची उंची वाढवणे चांगले आहे जेणेकरून ते प्रमाण असेल बेस आकारफॉन्ट (सामान्यतः ते मुख्य मजकूराच्या आकाराच्या 120-150% शी संबंधित असते) - यामुळे वाचन सोपे होईल. यासाठी, अंतर प्रणाली देखील उपयुक्त आहे, जी वेगवेगळ्या मजकूर घटकांचे आकार निश्चित करण्यासाठी आवश्यक आहे. जर फॉन्ट गोल्डन रेशो वापरत असेल तर ते इंटरव्हलमध्ये देखील वापरावे. अशा प्रकारे डिझाइन व्यवस्थित आणि सुसंवादी दिसेल.
• तुम्ही परिच्छेदांमधील मोकळ्या जागेकडे लक्ष दिले पाहिजे: ही अतिरिक्त जागा डोळ्यासाठी अँकर पॉइंट प्रदान करते आणि मजकूर खूप दाट नाही आणि वाचणे सोपे आहे अशी भावना निर्माण करते.

PhotoCountries ॲपमधील घटकांमधील अंतर

• स्क्रीन कंपोझिशन आयोजित करताना, तुम्हाला "सामीपिकतेचा नियम" लक्षात ठेवण्याची आवश्यकता आहे: जवळच्या वस्तू असे समजल्या जातात एकच गट. आणि त्याउलट: एकसंध घटक, ज्यामध्ये मध्यांतर आहे, त्यांना संपूर्ण मानले जाणार नाही.

रंग कॉन्ट्रास्ट

मोबाइल ॲप डिझाइनमध्ये कॉन्ट्रास्ट विशेषतः महत्त्वपूर्ण आहे कारण जेव्हा घराबाहेर वापरले जाते तेव्हा स्क्रीन अत्यंत प्रतिबिंबित होऊ शकते. कलर कॉन्ट्रास्टबद्दल डिझाइनरमध्ये दोन सामान्य गैरसमज आहेत:

1. कॉन्ट्रास्ट जितका मजबूत असेल तितका डोळ्यांसाठी कठीण आहे.म्हणून, राखाडी मजकूर अधिक चांगला आहे. परिणाम राखाडी किंवा पांढर्या पार्श्वभूमीवर राखाडी मजकूर आहे. तथापि, जर मजकूर आणि पार्श्वभूमीचा रंग सारखा असेल तर समजणे कठीण आहे.
2. कॉन्ट्रास्ट जितका मजबूत तितका चांगला. पार्श्वभूमीशी तीव्र विरोधाभास असलेला मजकूर वाचणे देखील कठीण आहे. काळ्या पार्श्वभूमीवर पांढरा मजकूर वाचल्याने तुमचे डोळे लवकर थकतात. अगदी वापरकर्ते चांगली दृष्टीअस्वस्थता अनुभवाल.

योग्य कॉन्ट्रास्ट शोधणे सोपे नाही. विकसकाच्या मॉनिटरवर जे चांगले दिसते ते कदाचित वापरकर्त्याच्या स्क्रीनवर दिसणार नाही. कडून मार्गदर्शक.

फॉन्ट ब्लॉक्ससाठी किमान कॉन्ट्रास्ट रेशो 4.5:1 आहे, शिफारस केलेले 7:1 आहे. परंतु या नियमाला अपवाद आहेत:

• मोठा मजकूर (18 पॉइंट आणि वरील किंवा 14 पॉइंट ठळक) - 3:1.
• निष्क्रिय इंटरफेस घटकाचा भाग असलेल्या मजकुरासाठी कॉन्ट्रास्टची आवश्यकता नसते.

सेवा पुरेसा मजकूर कॉन्ट्रास्ट सुनिश्चित करण्यात मदत करेल.

चाचणी

निवडलेल्या फॉन्टची स्क्रीन असलेल्या डिव्हाइसेसवरील वापरकर्त्यांमध्ये चाचणी करणे आवश्यक आहे भिन्न रुंदी. चाचणीमध्ये जितके अधिक उपकरणे समाविष्ट होतील तितके चांगले.

जर तुम्ही दोन फॉन्ट वापरत असाल, तर शोधून काढणे उत्तम आहे. तुम्ही एक मॅट्रिक्स देखील तयार करू शकता जे भिन्न संयोजन कसे दिसतात हे दर्शविते. फॉन्टचा रूपांतरणावर कसा परिणाम होतो हे शोधण्यासाठी, तुम्हाला A/B चाचणी वापरण्याची आवश्यकता आहे.

लिहा

सर्वांना शुभ दुपार !!! आज आपण फॉन्टबद्दल बोलू. आणि एक परदेशी कॉम्रेड आम्हाला यात मदत करेल. आपण काळजीपूर्वक वाचतो आणि अनुभवातून शिकतो.

निःसंशयपणे, फॉन्ट सोल्यूशनची निवड साइटच्या आकलनामध्ये मोठी भूमिका बजावते. शेवटी, बहुतेक साइट्समध्ये जवळजवळ संपूर्णपणे मजकूर असतो.

वेब डिझायनर्सना त्यांच्या कामात कोणते फॉन्ट सर्वात जास्त वापरायला आवडतात यात टॉमस लॉरिनाविसियसला रस होता.

वेबसाइट आणि ब्लॉग डिझाइन निर्मात्यांमध्ये सर्वात लोकप्रिय आणि आवडते फॉन्ट ओळखण्यासाठी त्यांनी एक छोटासा समाजशास्त्रीय अभ्यास केला.

शिवाय, त्याने घेतला लहान मुलाखतविशिष्ट परिस्थितीत कोणता फॉन्ट सर्वात योग्य आहे हे शोधण्यासाठी वेब डिझाइनरकडून. थॉमस यांनी hongkiat.com वर त्यांच्या सर्वेक्षणाचे निकाल शेअर केले.

सर्वेक्षणादरम्यान, वेब डिझायनर्सनी 73 वेगवेगळ्या फॉन्टची नावे दिली - 46 विनामूल्य आणि 27 सशुल्क.

वेब डिझायनर्सचे सर्वात आवडते फॉन्ट असे निघाले: हेल्वेटिका, एरियल, जॉर्जिया, गोथम, असंख्य प्रो, डीआयएन, फ्युचुरा, लीग गोटिक, केबिन, कॉर्बेल.

हे लक्षात घेतले पाहिजे की सादर केलेल्या सर्व फॉन्टमध्ये सिरिलिक शैली नाही, विशेषत: विनामूल्य आवृत्तीमध्ये.

वेब डिझायनर्ससाठी शीर्ष 10 आवडते विनामूल्य फॉन्ट

सर्वेक्षण केलेल्या डिझाइनरांनी वेब ग्राफिक्ससाठी 10 सर्वोत्तम फॉन्ट निवडले. हे एरियल, वर्डाना, टाइम्स न्यू रोमन, जॉर्जिया किंवा टाहोमा सारख्या ऑपरेटिंग सिस्टममध्ये डीफॉल्टनुसार स्थापित केलेले फॉन्ट विचारात घेत नाही. (हे थोडे विचित्र आहे - प्रथम स्थानावर फॉन्ट आहे जो ऑपरेटिंग सिस्टममध्ये आहे).

वेब डिझायनर्ससाठी शीर्ष 10 आवडते सशुल्क फॉन्ट

खालील सूचीमध्ये वेब ग्राफिक्स आणि डिझाइनमध्ये वापरले जाणारे सर्वात लोकप्रिय सशुल्क फॉन्ट आहेत. त्यापैकी काही खूप महाग आहेत, परंतु त्यांची गुणवत्ता स्वतःसाठी बोलते आणि किंमतीचे समर्थन करते.

सर्वांना नमस्कार! आज, वेब डिझाईन विभागाचा एक भाग म्हणून, मला वेब साइट विकसित करताना कोणते फॉन्ट वापरायचे आहेत याबद्दल बोलायचे आहे.

नियमानुसार, प्रत्येकजण साइटच्या सामग्री भागासाठी कोणते फॉन्ट वापरावे याबद्दल विचार करत नाही. निवड सुंदर फॉन्टसाइटसाठी आहे सर्वात महत्वाचा भागडिझाइन विकास. साइटच्या माहितीची वाचनीयता या भागावर अवलंबून असल्याने, आणि ही, आम्हाला माहित आहे की, साइटवरील सर्वात महत्वाची गोष्ट आहे. या कारणास्तव, ही समस्या अत्यंत गांभीर्याने घेतली पाहिजे.

परंतु आपण वेबसाइट डिझाइनमध्ये फक्त फॉन्ट वापरू शकता जे भविष्यातील साइट अभ्यागतांसाठी उपलब्ध आहेत. भिन्न ऑपरेटिंग सिस्टम आणि ब्राउझरसह सर्व वापरकर्त्यांसाठी पृष्ठे योग्यरित्या प्रदर्शित केली जातात याची खात्री करण्यासाठी हे केले जाते. IN अन्यथावापरले नाही तर मानक फॉन्ट, नंतर बहुतेक अभ्यागत सर्वकाही वेगळ्या पद्धतीने आणि बहुतेक प्रकरणांमध्ये कुरूप स्वरूपात पाहतील. या कारणास्तव, खाली सूचीबद्ध केलेले मानक फॉन्ट वापरण्याची शिफारस केली जाते. फॉन्टच्या सूचीमध्ये ऑपरेटिंग सिस्टमवर स्थापित केलेले फॉन्ट समाविष्ट आहेत विंडोज सिस्टम XP आणि उच्च.

या लेखात मी इतर ऑपरेटिंग सिस्टममधील फॉन्ट विचारात घेत नाही. एका अनुभवी लेआउट डिझायनरला वेगवेगळ्या ऑपरेटिंग सिस्टममधील फॉन्टची तुलना माहित असणे आवश्यक आहे आणि लेआउट दरम्यान तो हा मुद्दा CSS शैलींमध्ये लिहील.

मूलभूतपणे, डिझाइनचा सामग्री भाग विकसित करताना, दोन प्रकारचे फॉन्ट वापरले जातात:

• सेरिफ फॉन्ट
• sans serif फॉन्ट

सेरिफ फॉन्ट- (इंग्रजी सेरिफ - सेरिफ) फॉन्ट ज्यांची शैली स्ट्रोकने सुरू होते आणि समाप्त होते. उदाहरणार्थ टाइम्स न्यू रोमन.

Sans serif फॉन्ट(चिरलेले फॉन्ट) - (इंग्रजी sans-serif - sans serif) कठोर, सरळ रेषा असलेले फॉन्ट सेरिफशिवाय. उदाहरणार्थ एरियल.

खाली तुम्ही serif आणि sans serif फॉन्टचा स्क्रीनशॉट पाहू शकता.

वेब डिझाइनसाठी फॉन्ट:

• एरियल
• एरियल ब्लॅक
• एरियल अरुंद
• पुस्तक Antiqua
• शतक गॉथिक
• कॉमिक सॅन्स एमएस
• कुरियर नवीन
• फ्रँकलिन गॉथिक माध्यम
• जॉर्जिया
• प्रभाव
• लुसिडा कन्सोल
• लुसिडा सॅन्स युनिकोड
• मायक्रोसॉफ्ट सॅन्स सेरिफ
• पॅलाटिनो लिनोटाइप
• सिल्फेन
• ताहोमा
• टाईम्स न्यू रोमन
• ट्रेबुचेट एमएस
• वरदाना
• वेबडिंग्ज (विविध चिन्हे आणि खुणा)
• विंगडिंग्ज (विविध चिन्हे आणि चिन्हे)

अनेक फॉन्टमध्ये तिर्यक नसणे ही गोष्ट मला लक्षात ठेवायची आहे, ते तिरपे वापरतात, ज्यामुळे मजकूर वाचणे कठीण होते.

Windows मधील मानक फॉन्टपैकी ज्यात तिरपे नाहीत:

• एरियल ब्लॅक
• कॉमिक सॅन्स एमएस
• फ्रँकलिन गॉथिक माध्यम
• प्रभाव
• लुसिडा कन्सोल
• लुसिडा सॅन्स युनिकोड
• मायक्रोसॉफ्ट सॅन्स सेरिफ
• सिल्फेन
• ताहोमा

मी इटॅलिक नसलेल्या फॉन्टचा उल्लेख केल्यामुळे, मी हे देखील लक्षात घेऊ इच्छितो की असे फॉन्ट आहेत जे सुरुवातीला ठळक फॉन्ट आहेत. या कारणांसाठी, शैली वापरून जे सूचित करतात ठळक फॉन्टकाही अर्थ नाही, कारण परिणामी आम्हाला जे हवे आहे ते मिळणार नाही.

हॅलो, हॅब्र!

लेखांचे पर्वत वर्णन करणारे आधीच लिहिले गेले आहेत वेगवेगळ्या बाजूवेब फॉन्ट्ससह काम करताना, अनेक कार्यरत उदाहरणे गोळा केली गेली आहेत, परंतु दररोज आपल्याला वेब फॉन्ट्स म्हणजे काय या मूलभूत गैरसमजाचा सामना करावा लागतो. प्रत्येकाकडे या विषयावरील Google सामग्रीसाठी वेळ नाही, म्हणून मी वारंवार विचारल्या जाणाऱ्या प्रश्नांची उत्तरे देण्याचा प्रयत्न केला. ही सामग्री प्रामुख्याने त्यांच्यासाठी स्वारस्यपूर्ण असेल ज्यांनी अद्याप फॉन्ट तंत्रज्ञानाच्या गुंतागुंतांमध्ये प्रवेश केलेला नाही.

01. आपल्याला वेब फॉन्ट्सची अजिबात गरज का आहे, प्रमाणित का नाही?

पहिली गोष्ट जी मनात येते ती म्हणजे मानक फॉन्ट हे खूप कंटाळवाणे आहेत आणि त्यांच्या मदतीने काहीतरी मूळ करणे कठीण आहे. नियमानुसार, त्यापैकी बहुतेक केवळ वापरकर्त्यांसाठीच नव्हे तर वेब डिझायनर्सनाही उदासीनता आणि उदासीनता आणतात. या प्रकरणात, नॉन-स्टँडर्ड फॉन्ट अधिक अर्थपूर्ण आहेत आणि त्याव्यतिरिक्त, त्यापैकी अधिक परिमाणांचा क्रम आहे, म्हणून निवडण्यासाठी भरपूर आहे. शिवाय, फॉन्ट हा ब्रँडचा अविभाज्य भाग आहे, म्हणून प्रत्येक कंपनी त्याचा अधिक सक्रियपणे वापर करण्याचा प्रयत्न करते, कारण अशी तांत्रिक संधी उद्भवली आहे.

आणि कोणीही मानक फॉन्ट पूर्णपणे सोडून देऊ शकतो, विशेषत: अनेक मोबाइल ऑपरेटिंग सिस्टम त्यांना समर्थन देत नाहीत (उदाहरणार्थ, एरियल, ताओमा, वर्डाना आणि जॉर्जिया). परंतु, दुर्दैवाने, अनेक वर्षांपासून 96 डीपीआय स्क्रीन आणि जॉर्जिया व्हरडॅन्सशी जुळवून घेणारा उद्योग जलद बदलांसाठी पूर्णपणे तयार नव्हता आणि जुन्या विंडोज ऑपरेटिंग सिस्टमवर अजूनही वैशिष्ट्यांमुळे नॉन-स्टँडर्ड फॉन्ट प्रदर्शित करण्यात समस्या आहेत. रास्टरायझेशन यंत्रणा.

02. चांगला वेब फॉन्ट कसा निवडायचा?

फॉन्ट हा केवळ कागदावर किंवा इलस्ट्रेटरमध्ये ब्रशने तयार केलेला अक्षरांचा डिजीटाइज्ड संच नाही, तर तो 98% फाइन-ट्यूनिंग आणि पॉलिशिंग, हिंटिंग आणि विविध माध्यमांवरील चाचणी देखील आहे. विविध आकार. हा फॉन्ट चांगला दिसतो, त्याची शैली पॉलिश आहे, प्रिंटरवर किंवा स्क्रीनवर त्यात कोणतीही अडचण येणार नाही, त्याची गुणवत्ता चांगली आहे.

तथापि, फॉन्ट निवडताना, हे देखील जास्त महत्त्वाचे नसते, परंतु वापरण्याच्या पद्धती आणि त्यास नियुक्त केलेल्या कार्यांसह फॉन्टची योग्यता आणि अनुपालन. आपण फॉन्टसह कार्य करत असल्यास, आपल्याला हे सर्व कसे कार्य करते हे समजून घेणे आवश्यक आहेकोणते तंत्रज्ञान वापरले जाते. हे आपल्याला आपल्या डोक्यात न समजण्याजोगे लक्षात ठेवलेल्या नियमांचा एक समूह ठेवण्यास मदत करेल, जे योग्य आणि प्रारंभामध्ये कॅप्चर केले जाईल. उदाहरणार्थ, प्रत्येक स्वाभिमानी प्रिंटर वापरणे अवांछनीय का आहे हे माहित आहे ट्रूटाइप फॉन्टऑफसेट प्रिंटिंगमध्ये, आम्हाला माहित आहे की कोणते फॉन्ट मजकूर म्हणून वापरले जाऊ शकतात आणि कोणते फक्त हेडिंग किंवा अनुक्रमणिकेसाठी वापरले जाऊ शकतात. जर त्याला हे माहित नसेल, तर त्याला एक प्रचंड प्रिंट रन पुन्हा मुद्रित करावा लागेल आणि कामावर सतत आश्चर्य आणि समस्या त्याची वाट पाहतील. वेब डिझायनर्सवर कोणीही मागणी का करत नाही हे आश्चर्यकारक आहे.

03. ब्राउझर फॉन्ट कसे रेंडर करतात?

मी बऱ्याचदा ऐकले आहे की ब्राउझर स्वतः फॉन्ट काढतात, म्हणून ते सर्वत्र भिन्न दिसतात. परंतु खरं तर, ओएसची एक विशेष ग्राफिक्स उपप्रणाली फॉन्ट प्रस्तुत करण्यात गुंतलेली आहे: विंडोजमध्ये हे GDIकिंवा डायरेक्ट राइट, आणि OS X आणि iOS वर - कोर टेक्स्ट(आणि पूर्वी QuickDraw). 3 सामान्य फॉन्ट रास्टरायझेशन (रेंडरिंग) यंत्रणा आहेत: दोन-रंग (काळा आणि पांढरा) पिक्सेल, मोनोक्रोम पिक्सेल (बहुतेकदा अँटीअलियासिंग किंवा नियमित अँटी-अलायझिंग म्हणतात) आणि सबपिक्सेल. प्रस्तुत प्रतिमेचे क्षैतिज रिझोल्यूशन वाढवण्यासाठी आणि स्पष्टता सुधारण्यासाठी सबपिक्सेल एलसीडी आणि प्लाझ्मा डिस्प्लेचे वैशिष्ट्य वापरते, जिथे प्रत्येक पिक्सेल 3 भागांमध्ये (लाल, हिरवा आणि निळा) विभागलेला असतो.

तथापि, ब्राउझर OS द्वारे प्रदान केलेल्यांमधून त्यांची स्वतःची प्रस्तुतीकरण पद्धत निवडतात. उदाहरणार्थ, GDI मध्ये 3 रेंडरिंग पर्याय आहेत: काळा आणि पांढरा, नियमित अँटी-अलायझिंग आणि सबपिक्सेल ClearType. नंतरचे वैशिष्ठ्य म्हणजे उपपिक्सेलच्या स्थानानुसार स्मूथिंग फक्त क्षैतिजरित्या होते. म्हणूनच फॉन्ट वापरताना आपल्याला त्याच्या आडव्या आणि कर्णरेषांवर अनेकदा भयंकर दांतेदारपणा दिसतो. सुदैवाने, मायक्रोसॉफ्टने हळूहळू यंत्रणा सुधारण्यास सुरुवात केली आणि जीडीआयची जागा डायरेक्टराईट तंत्रज्ञानाने घेतली, ज्याने वर्टिकल अँटी-अलियासिंगचा परिचय दिला. तुलना करा:

04. TTF किंवा OTF?

ट्रूटाइप आणि पोस्टस्क्रिप्ट - हे मूळ होते भिन्न स्वरूपफॉन्ट TrueType चतुर्भुज बेझियर वक्र वापरते, तर पोस्टस्क्रिप्ट क्यूबिक वक्र वापरते, जे इलस्ट्रेटर आणि फोटोशॉपमध्ये काम करणाऱ्या डिझाइनरना परिचित आहेत. आज, वक्र वर्णन करण्याच्या दोन्ही पद्धती एकाच ओपनटाइप स्वरूपाचा भाग म्हणून वापरल्या जातात, फक्त फरक इतकाच आहे की ट्रूटाइप फाइल्समध्ये टीटीएफ विस्तार असतो आणि पोस्टस्क्रिप्ट फाइल्समध्ये ओटीएफ विस्तार असतो. प्रत्येक तंत्रज्ञानाची स्वतःची संकेत वैशिष्ट्ये आणि अनुप्रयोग तपशील असतात.

चित्र पहा. TrueType फॉन्ट लहान फॉन्टमध्ये जास्त वाचनीय असल्यास, परंतु मध्ये मोठा आकारआम्हाला वैशिष्ट्यपूर्ण दात दिसतात, नंतर पोस्टस्क्रिप्ट फॉन्टसाठी सर्वकाही अगदी उलट आहे. हे घडते कारण PS आणि TT ब्राउझरसाठी निवडतात विविध पद्धतीरास्टरायझेशन PS साठी, ब्राउझरने नियमित मोनोक्रोम अँटी-अलायझिंग लागू केले आणि TT वर ClearType सह प्रक्रिया केली गेली. त्यामुळे असे दिसून आले की मजकूर फॉन्टसाठी आणि शीर्षके आणि मोठ्या शिलालेखांसाठी TrueType श्रेयस्कर असेल अधिक अनुकूल होईलपोस्टस्क्रिप्ट.

आम्ही हे देखील पाहतो की अद्याप सर्व ब्राउझर डायरेक्टराईट वापरत नाहीत. होय, तो अद्याप तेथे नाही. गुगल क्रोम.

05. डिस्प्लेवर आणखी काय परिणाम होतो?

कधीकधी रास्टरायझेशन पद्धत व्यक्तिचलितपणे सेट करणे चांगले असते. उदाहरणार्थ, वेबकिट इंजिनसह ब्राउझरमध्ये, आपण CSS गुणधर्म वापरू शकता - webkit-font-smoothingआणि सब-पिक्सेल अँटी-अलियासिंग ऐवजी नियमित अँटी-अलियासिंग मॅन्युअली सक्षम करा आणि त्याउलट. ब्राउझरला रास्टरायझेशन पद्धत बदलण्याचे क्षुल्लक मार्ग देखील आहेत Habré वर त्यांनी एकदा मजकूर-शॅडो वापरून सुचवले होते;

आम्ही फॉन्ट आकार (फॉन्ट-आकार) बद्दल विसरू नये. बाह्यरेखा आकार, स्ट्रोक कॉन्ट्रास्ट आणि वाचनीयता फॉन्ट आकारांमध्ये मोठ्या प्रमाणात बदलू शकतात. ग्राफिक्स एडिटर खाली ठेवा आणि ब्राउझरमध्ये, लढाईत वेब फॉन्ट कसा दिसतो ते पहा.

अँटी-अलायझिंगची कमतरता कमी करण्याचा दुसरा मार्ग म्हणजे रंग आणि कॉन्ट्रास्ट व्यवस्थापन. क्रोमॅटिक कॉन्टूरिंगचा प्रभाव कमी करण्यासाठी (क्लियरटाइप वापरताना, कडाभोवती पिवळे आणि किरमिजी बाह्यरेखा दिसतात), तुम्ही पार्श्वभूमी रंग मजकूर रंगाच्या जवळ करून टोनल कॉन्ट्रास्ट कमी करण्याचा प्रयत्न करू शकता. जास्त वाहून जाऊ नका, कमी दृष्टी असलेल्या वापरकर्त्यांबद्दल लक्षात ठेवा.

06. वेब फॉन्टला हिंटिंगची गरज आहे का?

इशारा आहे विशेष सूचना, जे मॉनिटरवरील पिक्सेलमध्ये फॉन्टच्या अमूर्त वक्रांना कठोरपणे बांधतात. बहुसंख्य फॉन्ट (व्यावसायिक फॉन्टसह) सूचित केलेले नाहीत, कारण ही एक ऐवजी श्रम-केंद्रित आणि जटिल प्रक्रिया आहे. ट्रूटाइप आणि पोस्टस्क्रिप्टसाठी हिंटिंग वेगळ्या पद्धतीने केले जाते. तुम्ही स्वस्त फॉन्ट घेतल्यास, OTF फॉरमॅट अधिक सुरक्षित आहे, कारण TT मध्ये ब्लॅक अँड व्हाइट रास्टरायझेशनच्या दिवसांपासून ही प्रक्रिया अपरिवर्तित राहिली आहे आणि ती पूर्णपणे पुरेशी नाही, परंतु PS साठी ही प्रक्रिया सोपी आहे आणि लेखकाला संधी आहे. स्वयंचलित इशारा करा.

हिंटिंगशिवाय फॉन्ट रास्टराइज केल्यावर अस्पष्ट होतो आणि अक्षरांची उंची वाढू शकते.

एकीकडे, इशारा असलेला फॉन्ट अगदी स्पष्ट, विरोधाभासी आणि एकसमान आहे, परंतु दुसरीकडे, आकारानुसार अक्षरांचे आकार विकृत केले जातात आणि अंतर वास्तविकपेक्षा भिन्न असू शकते. अक्षरे पिक्सेलच्या काटेकोरपणे अधीन आहेत.

Windows OS मध्ये आम्ही कदाचित सर्वात मूलगामी दृष्टीकोन पाहतो: Tahoma, Verdana, Arial आणि Georgia सारखे लोकप्रिय फॉन्ट GDI ClearType साठी विशेषतः सूचित केले गेले होते आणि जेव्हा DirectWrite दिसले, तेव्हा OS मध्ये समाविष्ट असलेल्या मुख्य फॉन्टला पुन्हा संकेत आणि अद्यतनित करावे लागले.

मायक्रोसॉफ्टच्या विपरीत, ऍपल उलट दृष्टीकोन घेते, म्हणून त्याच्या ऑपरेटिंग सिस्टम अल्गोरिदम वापरतात जे कोणत्याही फॉन्टला कमी-अधिक कार्यक्षमतेने प्रदर्शित करण्यास अनुमती देतात आणि इशारा अजिबात विचारात घेतला जात नाही.

प्रश्नाचे उत्तर: 300 डीपीआय मॉनिटर्सचे युग वेगाने जवळ येत आहे आणि मोठी रक्कममोबाईल डिव्हाइसमध्ये हे रिझोल्यूशन आधीपासूनच आहे आणि लवकरच हिंटिंगची अजिबात गरज भासणार नाही. परंतु विंडोज अजूनही हिंटिंगवर अवलंबून आहे आणि मॉनिटर्सवर केंद्रित आहे कमी रिझोल्यूशन, मजकूर फॉन्टसाठी, चांगल्या प्रकारे डिझाइन केलेले किंवा मानक निवडण्याचा प्रयत्न करा, अन्यथा मजकूर वाचता येणार नाही आणि समजणे कठीण होईल.

०७. @font-face किंवा Cufon?

हे कितीही विचित्र वाटले तरीही, असे लोक आहेत जे स्वतःला हा प्रश्न विचारतात. असे दिसते की ब्राउझरने @font-face विशेषताचे समर्थन करण्यास सुरुवात केल्यानंतर, इतर सर्व फॉन्ट एम्बेडिंग तंत्रज्ञान (Cufon, sIFR, Flash) अप्रासंगिक बनल्यासारखे वाटले. परंतु काही अर्थ अजूनही शिल्लक आहेत, उदाहरणार्थ, एखाद्या प्रतिमेसह फॉन्ट बदलण्याचा एक मार्ग, जेव्हा साइटवर व्हेक्टर वक्र प्रदर्शित केले जात नाहीत, परंतु केवळ एक प्रिंट, जसे की प्रिंटर शीटवर मुद्रित करतो किंवा फोटोशॉप संपादन न करता येणारा JPG आउटपुट करतो. अनेक नियमित (डेस्कटॉप) फॉन्ट परवान्यांद्वारे याची परवानगी आहे. काही फॉन्ट उत्पादक (उदाहरणार्थ, Adobe) डेस्कटॉप फॉन्टला (प्रोग्राम्समध्ये आणि सर्व्हरवर) एम्बेड करण्याची परवानगी देतात, जोपर्यंत तो संरक्षित राहतो आणि डाउनलोड करता येत नाही. तुम्ही स्वतंत्र वेब परवाना खरेदी करू शकत नसल्यास, फ्लॅश ऑब्जेक्ट्स वापरून फॉन्ट एम्बेड केल्यावर तुम्ही योग्य sIFR वापरू शकता. तोटा असा आहे की ते फ्लॅश वापरते, जे सर्व उपकरणांद्वारे समर्थित नाही. परवान्याने परवानगी दिल्यास तुम्ही Cufon तंत्रज्ञान देखील वापरू शकता (कॅनव्हास वापरला आहे). अर्थात, मध्ये या प्रकरणातस्क्रिप्ट अवजड असेल आणि मजकूर निवड कार्य करणार नाही, परंतु मध्ये निराशाजनक परिस्थितीकरेल.

परंतु @font-face वापरणे उत्तम आहे, ते अधिक तांत्रिकदृष्ट्या प्रगत आणि अधिक सोयीस्कर आहे आणि त्याव्यतिरिक्त, त्याच्यासोबत काम करण्यासाठी पुरेसा अनुभव जमा केला गेला आहे. यात फक्त एक कमतरता आहे: सर्व उत्पादक त्यांचे फॉन्ट वेबवर वापरण्याची परवानगी देत ​​नाहीत.

08. फॉन्ट फाइल्स कोणत्या फॉरमॅटमध्ये असाव्यात?

आज, वेबसाइटवर अंमलबजावणीसाठी तयार केलेले फॉन्ट (@font-face) अनेक फॉरमॅटमध्ये असावेत:

TTFकिंवा OTF- एक फॉन्ट फाइल जी आम्हाला परिचित आहे, परंतु साइट पाहताना सर्व्हरवरून लोड केली जाते;
WOFF- असुरक्षित स्त्रोत संग्रहण OTF किंवा TTF हे कदाचित सर्वात महत्वाचे स्वरूप आहे जे बहुतेक लोकप्रिय ब्राउझरद्वारे समर्थित आहे आणि WOFF मधील फायली सामान्यतः मूळ पेक्षा 2-2.5 पट हलक्या असतात;
EOT- TT OpenType द्वारे कार्यान्वित केलेले संग्रहण, ज्यात संरक्षण यंत्रणा आहे, जुन्या समर्थनासाठी आवश्यक आहे इंटरनेट ब्राउझरएक्सप्लोरर (IE8 पासून सुरू होणारे, TrueType वक्र व्यतिरिक्त, पोस्टस्क्रिप्ट देखील समर्थित आहे);
SVG- सफारी ब्राउझरला समर्थन देण्यासाठी.

09. वेब फॉन्ट रूपांतरित केले जाऊ शकतात?

लोक तुम्हाला काय सांगतात हे महत्त्वाचे नाही, तुम्ही फक्त फाइल रूपांतरित करून जतन करू शकत नाही. मूळ गुणवत्ताफॉन्ट, विशेषतः जर ते मूळतः OpenType फॉरमॅटमध्ये असेल. प्रक्रियेत, फॉन्ट फाइलमध्ये एम्बेड केलेला काही डेटा गमावण्याची शक्यता असते (संकलित सूचना, अतिरिक्त चिन्हे, मेट्रिक्स). रूपांतरणादरम्यान फाईल अचानक "वजन कमी करते" तेव्हा तुम्हाला हे लक्षात येईल, ट्रूटाइपला पोस्टस्क्रिप्टमध्ये रूपांतरित करणे आणि त्याउलट.

याव्यतिरिक्त, रूपांतरण प्रक्रिया जवळजवळ नेहमीच परवान्याच्या गैर-फेरफार अटींचे उल्लंघन करते. सोप्या भाषेत सांगायचे तर ही चोरी सारखीच आहे. जेव्हा तुम्ही कन्व्हर्टरमध्ये फाइल्स फेकता तेव्हा खात्री बाळगा की ते त्यांना चुकवणार नाही आणि एक चेतावणी जारी करेल कारण फाइलमध्ये आहे डिजिटल स्वाक्षरीफेरफार करण्यासाठी निर्माता आणि संबंधित प्रतिबंध.

10. वेब फॉन्टचे वजन किती असावे?

पृष्ठ प्रदर्शित करण्यापूर्वी ब्राउझरने फॉन्ट फाइल्स पूर्णपणे डाउनलोड करणे आवश्यक आहे. कदाचित तुम्ही "फॉन्ट फ्लॅश" (किंवा FOUT) प्रभाव पाहिला असेल, जेव्हा थोड्या क्षणासाठी, विदेशी फॉन्टऐवजी, मानक सिस्टम फॉन्ट फ्लॅश होतात. TTF (OTF) 100 kb मध्ये बसत असल्यास आणि WOFF (EOT) 50 kb मध्ये बसल्यास हे सामान्य आहे. आपल्याला वापरण्याची आवश्यकता आहे का याचा नेहमी विचार करा सानुकूल फॉन्ट, जरी तुम्ही ते 1 लहान शीर्षलेखात वापरत असलात तरीही तुम्हाला संपूर्ण फॉन्ट फाइल डाउनलोड करावी लागेल.
डिझाईनमध्ये जितका अधिक परिपूर्णता आहे, तितक्या लहान फॉन्ट फाइल्स वजन करू शकतात आणि निवडण्याचा प्रयत्न करू शकतात साधे आकार. या अर्थाने, आदर्श स्वरूप कमी कॉन्ट्रास्टसह एक खुले भौमितिक विचित्र आहे. फॉन्ट लोडिंगला गती देण्यासाठी, data:uri वापरून शैली फाइलमध्ये समाविष्ट करणे देखील उपयुक्त ठरू शकते.

11. वेबवर किती फॉन्ट शैली वापरल्या जाऊ शकतात?

डिझायनरच्या दृष्टिकोनातून, बरेच टाइपफेस छान आहेत. आणि खरंच, शीर्षलेखासाठी - ठळक, आणि तेथे, इनसेटसाठी - एक्स्ट्रालाइट, आम्ही सर्वसाधारणपणे अनावश्यक मजकूर पुश करू आणि त्यांना कंडेन्स्ड बोल्डमध्ये दाबू. हे येथे आहे - वास्तविक संपत्ती आणि शैलीत्मक विविधता. परंतु जेव्हा ही सर्व "संपत्ती" साइटवर हस्तांतरित करणे सुरू होते, तेव्हा असे दिसून आले की सर्व काही अत्यंत मंद आहे. आणि अशी साइट उघडण्याचा प्रयत्न देखील न करणे चांगले आहे मोबाइल डिव्हाइस. आणि हे विसरू नका की प्रत्येक शैलीसाठी स्वतंत्र पैसे खर्च होतात आणि अशी शक्यता आहे की ग्राहक तुम्हाला एकतर फॉन्ट प्रतिशब्द शोधण्यास सांगेल किंवा सर्व महाग टाइपफेस खरेदी करू नये म्हणून शैलींची संख्या कमी करेल. समान किंवा भिन्न टाइपफेसच्या जास्तीत जास्त 2-3 शैली वापरणे सामान्य आहे.

12. वर्ण संच मर्यादित करणे आवश्यक आहे का?

या प्रश्नाचे उत्तर ती कोणत्या प्रकारची साइट आहे आणि ती कशी वापरली जाईल यावर अवलंबून आहे. निर्बंध उपयुक्त ठरू शकतात कारण फायलींचा आकार लक्षणीयरीत्या कमी करणे शक्य आहे. काहीवेळा, अज्ञानामुळे, डेव्हलपर साइटवर अक्षरांच्या पूर्ण संचासह जड फॉन्ट फाइल अपलोड करतात आणि हायरोग्लिफ्स नसल्यास ते चांगले आहे (लक्षात ठेवा, युनिकोड टेबलमधील बहुतेक वर्ण असलेल्या एरियल युनिकोड फॉन्टचे वजन 22 एमबी असते).

जे इंग्रजी-भाषेतील साइट्स सर्वात सोपी बनवतात, त्यांना अतिरिक्त वर्ण लोड करण्याची अजिबात गरज नाही, मूलभूत लॅटिन (किंवा ASCII) मधील अक्षरे पुरेसे आहेत. जर तुम्ही फॉन्ट फक्त रशियन + इंग्रजीच्या समावेशासाठी वापरत असाल, तर तुमच्यासाठी ASCII (मूलभूत लॅटिन) संच आणि रशियन वर्णमालाचे 64 वर्ण पुरेसे असतील; 420 वर्णांचा सिरिलिक विस्तारित संच लोड करणे अजिबात आवश्यक नाही . तुमची साइट बहुभाषिक असल्यास ही पूर्णपणे वेगळी कथा आहे, या प्रकरणात टाळा चुकीचे प्रदर्शनचिन्हे, आपण वापरलेल्या सर्व भाषा कव्हर करण्याचा प्रयत्न केला पाहिजे.

13. मी फॉन्ट क्लोन वापरू शकतो का?

असे घडते की मूळ फॉन्ट खरेदी करणे एकतर खूप महाग आहे किंवा अगदी अशक्य आहे, नंतर फॉन्ट समानार्थी (क्लोन) निवडणे योग्य असेल. अर्थात, आपण त्यांच्याकडून आश्चर्यकारक गुणवत्तेची अपेक्षा करू नये, जरी ते एखाद्या प्रसिद्ध रशियन कंपनीने बनवले असले तरीही. जेव्हा आपण एखाद्या अनामिक साक्षर व्यक्तीच्या ओपसला भेटता तेव्हा सर्व काही पूर्णपणे वाईट असते ज्याने स्वत: ला नवीन क्षेत्रात प्रयत्न करण्याचे ठरवले आहे, अशा फॉन्टपासून सावध रहा. येथे क्लोनची उदाहरणे आहेत (मूळ कंसात दर्शविलेले आहे): फ्रीसेट (फ्रुटिगर), प्राग्मॅटिका आणि हेलिओस (हेलवेटिका). कृपया लक्षात घ्या की अक्षरांचे आकार भिन्न असू शकतात. पॅराटाइप फॉन्ट समानार्थी निर्देशिकेत मोठ्या संख्येने क्लोन आहेत.

14. फॉन्टची चाचणी कशी करायची?

डिझाइनर, फक्त फोटोशॉप विंडोमधून फॉन्ट पाहण्याची सवय लावू नका, ग्राफिक संपादकमजकूर गुळगुळीत करण्याच्या त्यांच्या स्वतःच्या पद्धती वापरा आणि तुमची फसवणूक होऊ शकते सुंदर चित्र. ते ब्राउझरमध्ये कसे तपासायचे आणि कसे पहायचे हे शिकणे अधिक उपयुक्त आहे. डेमो पृष्ठ असल्यास, प्रस्तुतीकरणादरम्यान सर्व प्रकारच्या कलाकृती आणि स्पाइक्स दिसणार नाहीत याची खात्री करा. Typecast नावाचे एक साधन देखील आहे, जेथे आपण अनेक फॉन्ट तपासू शकता आणि नंतर क्लायंटला पृष्ठ दर्शवू शकता. जे निवडतात त्यांच्यासाठी नवीन फॉन्टतयार वेबसाइटसाठी - वेब फॉन्ट प्रीव्ह्यूअर सेवा तुमच्यासाठी अपरिहार्य आहे, तुम्ही थेट, कार्यरत वेबसाइटवर कोणत्याही फॉन्टची चाचणी करू शकता, जसे की तुम्ही ते आधीच लागू केले आहे;

15. माझ्या संगणकावर एक फॉन्ट आहे, मी तो वेबसाइटवर वापरू शकतो का?

प्रथम, चोरीबद्दल थोडेसे. मला बरेच डिझाइनर माहित आहेत ज्यांच्या संगणकावर हजारो फॉन्ट आहेत, ज्याचे मूळ कोणालाही माहित नाही. नियमानुसार, त्यांनी ते फक्त इंटरनेटवरून डाउनलोड केले. पण काही कारणास्तव सृष्टीचा विचार कोणी करत नाही चांगले फॉन्ट- हे महिने आणि कधीकधी गंभीर कामाचे वर्ष आहेत! परंतु हे एकमेव कारण नाही की आपण जळलेले आणि अज्ञात स्त्रोतांकडून घेतलेले फॉन्ट वापरू नयेत, परंतु विकासाच्या टप्प्यावर आपल्याला गंभीर अडचणी येऊ शकतात.

तुम्हाला तुमच्या वेबसाइटवर ऑपरेटिंग सिस्टमसह येणारा फॉन्ट एम्बेड करायचा असल्यास, तुम्ही हे फक्त रास्टराइज करून किंवा इमेजमध्ये वापरून करू शकता. जर तुम्हाला ते खरोखर तयार करायचे असेल तर तुम्हाला ते विकत घ्यावे लागेल स्वतंत्र परवाना, अगदी सारखेच नियमित फॉन्ट(जॉर्जिया आणि ताहोमा दोन्ही विक्रीवर आहेत).

16. वेब फॉन्ट कसा खरेदी करायचा?

जेव्हा तुम्ही "फॉन्ट विकत घेता" तेव्हा सॉफ्टवेअर खरेदी करण्यासाठी सर्वात जवळची गोष्ट म्हणजे तुम्हाला प्रोग्राम फाइलच्या अधिकारांऐवजी ते वापरण्यासाठी परवाना प्राप्त होतो. हे निष्पन्न झाले की कायदेशीररित्या संकलित फॉन्ट फाइल एक प्रोग्राम आहे. परवान्याने परवानगी दिल्याशिवाय बदल किंवा फेरफार हे कॉपीराइटचे उल्लंघन मानले जाते.

फॉन्ट खरेदी करण्याचा एक सोयीस्कर मार्ग म्हणजे फॉन्ट कॅटलॉग (Fonts.com, MyFonts, Ascender, Typekit). तुम्ही वापरासाठी उपलब्ध पर्यायांपैकी एक पाहण्यास, तुलना करण्यास आणि निवडण्यास आणि कार्डद्वारे पैसे देण्यास सक्षम असाल. कंपन्यांसाठी सर्वात सोपा मार्ग म्हणजे उत्पादन स्टुडिओशी थेट संपर्क साधणे किंवा फॉन्टची खरेदी ग्राहकांवर सोडणे.

किंवा कदाचित फॉन्टवर पैसे खर्च न करणे चांगले आहे? अनेक अद्भुत आहेत मोफत फॉन्ट, जे कोणत्याही प्रकारे पगार असलेल्यांपेक्षा कमी नाहीत!

17. कोणत्या प्रकारचे परवाने आहेत?

फॉन्ट लायसन्सचे विविध प्रकार आहेत आणि वेब फॉन्टच्या आगमनाने, विविधता फक्त वाढली आहे. IN वास्तविक जीवन, प्रत्येक कंपनी गेमचे नियम स्वतः सेट करते आणि फॉन्ट परवान्यामध्ये इतर विविध वैशिष्ट्ये असू शकतात. आम्हाला वैशिष्ट्यपूर्ण गोष्टींमध्ये रस असेल.

सामान्य व्यावसायिक परवाना वापरण्यास प्रतिबंधित करते ठराविक रक्कमडिव्हाइसेस आणि फॉन्ट वापरून तयार केलेल्या कार्यांचे वितरण करण्यास अनुमती देते. ही मासिके, वर्तमानपत्रे, पत्रके, व्यवसाय कार्ड असू शकतात, रास्टरीकृत प्रतिमाफॉन्ट - सर्व मिळून आपण त्यांना छाप म्हणू शकतो. हा परवाना चित्रपट, टेलिव्हिजन, वेब आणि अनुप्रयोग आणि कार्यक्रमांमध्ये एम्बेड करण्यासाठी योग्य नाही;

विशिष्ट परवाने देखील आहेत, उदाहरणार्थ: सह परवाना विशेष अधिकार. या प्रकरणात, कंपनी सर्व अधिकार टाइप डिझाइनर्सकडून विकत घेते आणि फॉन्टच्या लेखकाला देखील ते कुठेही वापरण्याचा अधिकार नाही. जेव्हा असे फॉन्ट टॉरेंटवर असतात किंवा काही तृतीय-पक्ष डिझाइनर त्यांचा वापर करतात तेव्हा हे विशेषतः आश्चर्यकारक आहे.

विनामूल्य परवाने (सार्वजनिक डोमेन) - फॉन्ट लेखक परवानगी देतो मोफत वितरण, तुमचे नाव सूचित करण्याच्या अटीसह (Creative Commons) किंवा त्याशिवाय (उदाहरणार्थ, OFL, GPL, Apache 2.0). या प्रकारचा परवाना विक्री आणि सशुल्क वितरणाव्यतिरिक्त व्यावसायिक वापरास देखील परवानगी देतो. उदाहरणे: PT Sans, Opensans, Droid. काहीवेळा फॉन्टमध्ये बदल करण्याची परवानगी असते (GPL), परंतु तुम्ही तयार केलेले फेरफार आपोआप समान परवाना मिळवितात (म्हणजे तुम्हालाही काटा लावला जाऊ शकतो). स्वातंत्र्य असे गृहीत धरते की ते कोणत्याही माध्यमांवर वापरले जाऊ शकते, समावेश. आणि वेब.
गैर-व्यावसायिक वापरासाठी विनामूल्य - म्हणजेच, आपण ते सर्व प्रकरणांमध्ये वापरू शकता जिथे आपण त्यातून पैसे कमवत नाही. उदाहरणार्थ, प्रशिक्षण, छंद आणि समुदाय प्रकल्पांसाठी. काहीवेळा, उत्पादक डिझाइनरसाठी वापरण्याची परवानगी देतात, या आशेने की डिझाइनरचा आनंदी क्लायंट नंतर खरेदी करेल व्यावसायिक आवृत्तीफॉन्ट

18. वेब फॉन्टसाठी परवाने वेगळे कसे आहेत?

वेब परवाने आमचे आवडते आहेत, ते एकतर मुख्य परवान्याव्यतिरिक्त आहेत किंवा स्वतंत्रपणे दिले जातात. नियमन करते विशेष केस- वेबसाइट्सवर फॉन्टचा वापर. नियमानुसार, सर्वात महत्वाची मर्यादा पृष्ठ दृश्यांच्या संख्येवर आहे. उदाहरणार्थ, दरमहा 10 हजार, 100 हजार किंवा 1 दशलक्ष म्हणजे, जितके जास्त लोक तुमच्या साइटला भेट देतात तितके तुम्ही परवान्यासाठी पैसे द्याल. अमर्यादित पर्याय देखील आहेत, जेव्हा तुम्ही फॉन्टसाठी एकदा पैसे भरता, परंतु ते अनेक पटींनी महाग असतात. तुम्हाला कदाचित आश्चर्य वाटले असेल, कोणीही दृश्यांच्या संख्येचा मागोवा ठेवतो का? बहुतेकदा नाही. परंतु हे विसरू नका की मोठ्या संख्येने काउंटर तुमच्या साइटच्या रहदारीचे निरीक्षण करतात आणि जर तुम्ही विक्रेत्याचा संशय निर्माण केला तर तुम्ही तुमचा परवाना गमावू शकता.

आणि तरीही, स्वतंत्र वेब परवाना वापरण्याची परवानगी देत ​​नाही नियमित संगणक. कधीकधी वेब परवाना विनामूल्य जारी केला जातो, म्हणजेच डेस्कटॉप फॉन्ट खरेदी करताना, आपल्याला त्याची वेब आवृत्ती वापरण्याचा अधिकार मिळतो. परंतु हे अजूनही दुर्मिळ आहे; बहुसंख्य उत्पादकांना अतिरिक्त शुल्क आवश्यक आहे.

खरेदी केल्यानंतर तुम्हाला प्राप्त होईल विशेष फाइल्स, जे तुम्ही साइटवर एम्बेड केले आहे (TTF, OTF, WOFF, EOT), आणि काही फॉन्ट या फाइल्स असुरक्षित स्वरूपात साइटवर ठेवण्याची परवानगी देत ​​नाहीत, कारण सैद्धांतिकदृष्ट्या तृतीय पक्ष स्वतः फॉन्ट फाइल्स मिळवू शकतात. तिसरा पर्याय म्हणजे तुम्ही फॉन्ट निर्मात्याची विशेष वेब सेवा वापरता, उदाहरणार्थ टाइपकिट, ज्याच्या मालकीची Adobe, आणि सदस्यता शुल्क भरा.

19. मला चांगले वेब फॉन्ट कुठे मिळू शकतात?

Google कडून विनामूल्य फॉन्टचे कॅटलॉग
Fontsquirrel एक प्रसिद्ध वेब फॉन्ट कनवर्टर आणि निर्देशिका आहे
Myfonts हे फॉन्टचे मोठे स्टोअर आहे सोयीस्कर प्रणालीपेमेंट
Fonts.com - मुख्य प्रतिस्पर्धी MyFonts
Typekit - Adobe कडून फॉन्ट भाड्याने देण्याची सेवा
Typecast - चाचणी सेवेसह वर नमूद केलेले स्टोअर
P.S. आणखी एक उपयुक्त संसाधन, ज्याने ilyaerin ला सल्ला दिला, WebFont.ru फंक्शनॅलिटी ओव्हर फॉर्म: डिझायनिंग फॉर रीडर
मारिया डोरेउली. परवाना देणे. ते स्पष्ट करण्यासाठी
टिम ब्राउन. वेबवर रेंडरिंग टाइप करा
टिम ब्राउन. प्रकार प्रस्तुतीकरणावर परिणाम करणारे CSS गुणधर्म
टिम ब्राउन. प्रकार प्रस्तुतीकरण: ऑपरेटिंग सिस्टम
टिम अहरेन्स. फॉन्ट रेंडरिंगकडे जवळून पहा
टिम अहरेन्स (टाइपेकिट). TrueType hinting वर जवळून पाहा
TrueType पेक्षा OpenType/CFF चे फायदे

इल्दार किन्याबुलाटोव्ह, वेब डिझायनर ADV/वेब-इंजिनियरिंग