CSS र SVG एनिमेसनहरूको बारेमा मैले सक्ने सबै कुरा सिक्न आवश्यक पर्ने एउटा परियोजना पूरा गरेपछि, मैले स्म्याशिङ एनिमेसनहरू र "कसरी क्लासिक कार्टुनहरूले आधुनिक CSS लाई प्रेरित गर्छ" भन्ने बारे यो श्रृंखला लेख्न थालें। यस वर्ष राउन्ड अफ गर्न, म तपाइँलाई देखाउन चाहन्छु कि आधुनिक CSS कसरी प्रयोग गर्ने त्यो तत्व सिर्जना गर्न जसले Toon शीर्षकहरू यति प्रभावशाली बनाउँछ: तिनीहरूको टाइपोग्राफी। शीर्षक कलाकृति डिजाइन 1920s को मौन युग र 30s को प्रारम्भमा, चलचित्रको शीर्षक कार्डको टाइपोग्राफीले मूड सिर्जना गर्यो, दृश्य सेट गर्यो, र दर्शकहरूलाई उनीहरूले हेर्नको लागि भुक्तान गरेको फिल्मको प्रकारको सम्झना गराउँदछ।
कार्टुन शीर्षक कार्डहरू पनि ब्रान्डिङ, मुड, र दृश्य-सेटिङहरू थिए, सबै एकमा रोल गरियो। प्रारम्भिक वर्षहरूमा, जब प्रमुख स्टुडियो बजेटहरू ठूलो थिए, यी शीर्षक कार्डहरू प्रायः चित्रण र चित्रकारी थिए।
तर जब 1950 को दशकमा टेलिभिजन बढ्यो, बजेट घट्यो, र लरेन्स "आर्ट" गोबल जस्ता कलाकारहरूले डिजाइन गरेका कार्डहरूले नयाँ दृश्य भाषा अपनाए, थप ग्राफिक, शैलीबद्ध र कम जटिल बन्यो। नोट: लरेन्स "आर्ट" गोबल मध्य शताब्दीको अमेरिकी एनिमेसनका प्रायः बेवास्ता गरिएका नायकहरू मध्ये एक हो। उनले मुख्यतया 1950 र 1960 को दशकको सबैभन्दा प्रभावशाली वर्षहरूमा Hanna-Barbera को लागि काम गरे। गोबल क्यारेक्टर एनिमेटर थिएनन्। उनको भूमिका वातावरण सिर्जना गर्नु थियो, त्यसैले उनले फ्लिन्स्टोन्स, हकलबेरी हाउन्ड, क्विक ड्र म्याकग्रा र योगी भालुका साथै टोन सेट गर्ने उद्घाटन शीर्षक कार्डहरूको लागि वातावरण डिजाइन गरे। उनको शीर्षक कार्डहरू, लोगो ओभरलेड भएको चित्रहरू प्रस्तुत गर्दै, हन्ना-बार्बेराको प्रतिष्ठित रूप परिभाषित गर्न मद्दत गर्यो। Quick Draw McGraw र Yogi Bear जस्ता पात्रहरूका लागि Goble को कलाकृति साना टिभी स्क्रिनहरूमा प्रभावकारी थियो। कार्टुनबाट स्टिल पुन: उत्पादन गर्नुको सट्टा, उहाँले एकल, बलियो विचार प्रस्तुत गर्नमा ध्यान केन्द्रित गर्नुभयो - प्राय: सिल्हूटमा - जसले यसको सारलाई कब्जा गर्यो। "The Buzzin' Bear" मा, योगी हेलिकप्टरमा बज्छन्। ऊ उछाल्छ, हातमा पिक-ए-निक टोकरी, "बियर अन अ पिकनिक" मा र उसको "पुरस्कार फाइट डर" को लागि, योगीले शीर्षकको पाठ बक्समा राख्छन्।
भर पर्नको लागि थोरै वा कुनै गतिको साथ, गोबलको एकल फ्रेमहरूले मुड सिर्जना गर्नुपर्थ्यो, दृश्य सेट गर्नुपर्थ्यो र एउटा कथा वर्णन गर्नुपर्यो। तिनीहरूले यो फ्ल्याट रंगहरू, ग्राफिक आकारहरू, र टाइपोग्राफी प्रयोग गरेर गरे जुन कलाकृतिमा बारम्बार एकीकृत गरिएको थियो।
वेबमा काम गर्ने डिजाइनरहरूको रूपमा, टुन शीर्षकहरूले हामीलाई ब्रान्डको व्यक्तित्व कसरी व्यक्त गर्ने, पहिलो प्रभाव पार्ने र उत्पादन वा वेबसाइट प्रयोग गरेर कसैको अनुभवको लागि अपेक्षाहरू सेट गर्ने बारे धेरै कुरा सिकाउन सक्छ। हामी प्रभावकारी ब्यानरहरू, ल्यान्डिङ-पेज हेडरहरू, र राम्रो ओल फेसन स्प्ल्याश स्क्रिनहरू सिर्जना गर्न कलाकारहरूको प्रविधिबाट सिक्न सक्छौं। टून शीर्षक टाइपोग्राफी कार्टुन शीर्षक कार्डहरूले इमेजरीसँग मर्ज गर्ने प्रकारले हेडर वा नायकको आवश्यकतालाई कसरी डेलिभर गर्छ भनेर देखाउँछ। मुट्ठीभर टेक्स्ट-छाया, टेक्स्ट-स्ट्रोक, र रूपान्तरण युक्तिहरूको साथ, आधुनिक CSS ले तपाईंलाई त्यही ऊर्जामा ट्याप गर्न दिन्छ।
Toon पाठ शीर्षक जेनरेटर यो लेख लेख्ने क्रममा, मैले महसुस गरें कि मलाई धेरै मनपर्ने कार्टुन शीर्षकहरू जस्तै पाठ शैली सिर्जना गर्नको लागि एउटा उपकरण हुनु उपयोगी हुनेछ। त्यसैले मैले एउटा बनाएको छु। My Toon Text Title Generator ले तपाईंलाई रंग, स्ट्रोक र बहु पाठ छायाँ प्रयोग गर्न दिन्छ। तपाईं पेन्ट अर्डर समायोजन गर्न सक्नुहुन्छ, अक्षर स्पेसिङ लागू गर्नुहोस्, नमूना फन्टहरूको चयनमा तपाईंको पाठ पूर्वावलोकन गर्नुहोस्, र त्यसपछि परियोजनामा प्रयोग गर्नको लागि सीधा तपाईंको क्लिपबोर्डमा उत्पन्न CSS प्रतिलिपि गर्नुहोस्। Toon शीर्षक CSS तपाईं केवल CSS प्रतिलिपि टाँस्न सक्नुहुन्छ जुन Toon Text Title Generator ले तपाईंलाई प्रदान गर्दछ। तर यसले के गर्छ नजिकबाट हेरौं। पाठ छाया Augie Doggie को एपिसोड "Yuk-Yuk Duck" को यस शीर्षकको प्रकार हेर्नुहोस्, जसको फिक्का पहेंलो अक्षरहरू र गाढा, कडा, अफसेट छायाले यसलाई पृष्ठभूमिबाट हटाउँछ र गहिराइको भ्रम सिर्जना गर्छ।
तपाईलाई पहिले नै थाहा छ कि टेक्स्ट-छायाले चार मानहरू स्वीकार गर्दछ: (1) तेर्सो र (2) ठाडो अफसेटहरू, (3) धमिलो, र (4) ठोस वा अर्ध-पारदर्शी हुन सक्ने रङ। ती अफसेट मानहरू सकारात्मक वा नकारात्मक हुन सक्छन्, त्यसैले म तल र दायाँतिर तानिएको कडा छाया प्रयोग गरेर "Yuk-Yuk Duck" लाई नक्कल गर्न सक्छु: रंग: #f7f76d; पाठ-छाया: 5px 5px 0 #1e1904;
अर्कोतर्फ, यो "Pint Giant" शीर्षकको नकारात्मक अर्ध-नरम छायासँग फरक अनुभूति छ: रंग: #c2a872; पाठ छाया: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
थप गहिराइ थप्न र थप रोचक प्रभावहरू सिर्जना गर्न, म धेरै छायाँ तह गर्न सक्छु। "लेट्स डक आउट" को लागि, म चारवटा छायाँहरू संयोजन गर्छु: पृष्ठभूमिबाट पाठ उठाउन नकारात्मक तेर्सो अफसेटको साथ पहिलो ठोस छायाँ, त्यसपछि क्रमशः नरम छायाहरू यसको वरिपरि धमिलो बनाउन: रंग: #6F4D80; पाठ छाया: -5px5px 0 #260e1e, /* Shadow 1 */ 0 0 15px #e9ce96, /* छाया २ */ 0 0 30px #e9ce96, /* छाया 3 */ 0 0 30px #e9ce96; /* छाया ४ */
यी छायाँहरूले देखाउँछन् कि पाठ-छाया प्रयोग गर्नु भनेको प्रकाश प्रभावहरू सिर्जना गर्ने बारे मात्र होइन, किनकि तिनीहरू सजावटी र व्यक्तित्व थप्न सक्छन्। पाठ स्ट्रोक धेरै कार्टुन शीर्षक कार्डहरूमा बोल्ड रूपरेखा भएका अक्षरहरू छन् जसले तिनीहरूलाई पृष्ठभूमिबाट अलग बनाउँछ। म पाठ-स्ट्रोक प्रयोग गरेर यो प्रभाव पुन: सिर्जना गर्न सक्छु। लामो समयको लागि, यो सम्पत्ति -webkit- उपसर्ग मार्फत मात्र उपलब्ध थियो, तर यसको मतलब यो अब आधुनिक ब्राउजरहरूमा समर्थित छ।
टेक्स्ट-स्ट्रोक दुई गुणहरूका लागि लघुलेख हो। पहिलो, टेक्स्ट-स्ट्रोक-चौडाइले व्यक्तिगत अक्षरहरू वरिपरि कन्टूर कोर्छ, जबकि दोस्रो, टेक्स्ट-स्ट्रोक-रङले यसको रङ नियन्त्रण गर्छ। "Whatever Goes Pup" को लागि, मैले पहेंलो पाठमा 4px नीलो स्ट्रोक थपें: रंग: #eff0cd; -webkit-text-stroke: 4px #7890b5; टेक्स्ट-स्ट्रोक: 4px #7890b5;
स्ट्रोकहरू विशेष गरी उपयोगी हुन सक्छन् जब तिनीहरू छायाँसँग जोडिन्छन्, त्यसैले "बढ्दो, बढ्दै, गयो" को लागि, मैले यो त्रि-आयामी पाठ प्रभाव सिर्जना गर्नको लागि एक मात्र धमिलो 1px छायामा पातलो 3px स्ट्रोक थपेको छु: रंग: #fbb999; टेक्स्ट-छाया: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; टेक्स्ट-स्ट्रोक: 3px #984336;
पेन्ट अर्डर पाठ-स्ट्रोक प्रयोग गर्दा सधैं अपेक्षित परिणामहरू उत्पन्न गर्दैन, विशेष गरी पातलो अक्षरहरू र बाक्लो स्ट्रोकहरूसँग, किनभने पूर्वनिर्धारित रूपमा ब्राउजरले फिलमा स्ट्रोक कोर्छ। दुःखको कुरा, CSS ले अझै पनि मलाई स्ट्रोक प्लेसमेन्ट समायोजन गर्न अनुमति दिँदैन जसरी म स्केचमा गर्छु। यद्यपि, पेन्ट-अर्डर गुणमा मानहरू छन् जसले मलाई स्ट्रोकलाई पछाडि राख्न अनुमति दिन्छ, भरिको अगाडिको सट्टा।
पेन्ट-अर्डर: स्ट्रोकले पहिले स्ट्रोकलाई पेन्ट गर्छ, त्यसपछि फिल, जबकि पेन्ट-अर्डर: फिलले उल्टो गर्छ: रंग: #fbb999; रंग-क्रम: भर्नुहोस्; टेक्स्ट-छाया: 3px 5px 1px #5160b1; पाठ-स्ट्रोक-रंग: #984336; पाठ-स्ट्रोक-चौडाइ: 3px;
प्रभावकारी स्ट्रोकले अक्षरहरू पढ्न योग्य राख्छ, तौल थप्छ, र — छाया र पेन्ट अर्डरसँग मिलाउँदा — फ्ल्याट टेक्स्ट वास्तविक उपस्थिति दिन्छ। पाठ भित्रको पृष्ठभूमि धेरै कार्टुन शीर्षक कार्डहरू लेटरिङमा बनावट, ढाँचा, वा चित्रित विवरणहरू थपेर फ्ल्याट रङभन्दा बाहिर जान्छन्। कहिलेकाहीँ त्यो बनावट हो, अन्य पटक यो सूक्ष्म टोनल शिफ्टको साथ ग्रेडियन्ट हुन सक्छ। वेबमा, म पाठको पछाडि पृष्ठभूमि छवि वा ग्रेडियन्ट प्रयोग गरेर, र त्यसपछि यसलाई अक्षरहरूको आकारमा क्लिप गरेर यो प्रभाव पुन: सिर्जना गर्न सक्छु। यो सँगै काम गर्ने दुई गुणहरूमा निर्भर गर्दछ: पृष्ठभूमि-क्लिप: पाठ र पाठ-भरण-रङ: पारदर्शी।
पहिले, म पाठ पछाडि पृष्ठभूमि लागू गर्छु। यो बिटम्याप वा भेक्टर छवि वा CSS ग्रेडियन्ट हुन सक्छ। Quick Draw McGraw एपिसोड "बाबा बेट" को यो उदाहरणको लागि, शीर्षकको पाठमा अँध्यारो देखि उज्यालो सम्मको माथिल्लो तलको ढाँचा समावेश छ: पृष्ठभूमि: linear-gradient(0deg, #667b6a, #1d271a);
अर्को, म त्यो पृष्ठभूमिलाई ग्लिफमा क्लिप गर्छु र पाठलाई पारदर्शी बनाउँछु ताकि पृष्ठभूमिले देखाउँछ: -webkit-पृष्ठभूमि-क्लिप: पाठ; -वेबकिट-टेक्स्ट-फिल-रङ: पारदर्शी;
केवल ती दुई रेखाहरूसँग, पृष्ठभूमि अब पाठको पछाडि चित्रित हुँदैन; बरु, यो भित्र चित्रित छ। यो प्रविधि विशेष गरी राम्रो काम गर्दछ जब स्ट्रोक र छाया संग संयुक्त। एक क्लिप गरिएको ढाँचाले रङ र बनावटको साथ अक्षर प्रदान गर्दछ, एक स्ट्रोकले यसको किनाराहरू तीखो राख्छ, र छायाले यसलाई पृष्ठभूमिबाट उचाल्छ। सँगै, तिनीहरूले सानो CSS बाहेक अरू केही प्रयोग गरेर ह्यान्ड-पेन्टेड शीर्षक कार्डहरूको स्तरित लुक पुन: सिर्जना गर्छन्। सधैंको रूपमा, ब्राउजर quirks कहिलेकाहीं छाया र रेन्डरिङलाई असर गर्न सक्छ किनभने, सावधानीपूर्वक क्लिप गरिएको पाठ परीक्षण गर्नुहोस्। पाठलाई व्यक्तिगत क्यारेक्टरहरूमा विभाजन गर्दै कहिलेकाहीँ म पूरै शब्द वा शीर्षकलाई स्टाइल गर्न चाहन्न। म व्यक्तिगत अक्षरहरू स्टाइल गर्न चाहन्छु — एउटा क्यारेक्टरलाई ठाउँमा नजाउन, एउटा ग्लिफ अतिरिक्त वजन दिन, वा केही अक्षरहरू स्वतन्त्र रूपमा एनिमेट गर्नुहोस्। सादा HTML र CSS मा, त्यसो गर्ने एउटा मात्र भरपर्दो तरिका छ: प्रत्येक क्यारेक्टरलाई आफ्नै स्प्यान एलिमेन्टमा बेर्नुहोस्। म त्यो म्यानुअल रूपमा गर्न सक्छु, तर त्यो कमजोर, मर्मत गर्न गाह्रो हुनेछ, र प्रतिलिपि परिवर्तन हुँदा तुरुन्तै टुक्रिनेछ। यसको सट्टा, जब मलाई प्रति-अक्षर नियन्त्रण चाहिन्छ, म splt.js जस्तै पाठ-विभाजन पुस्तकालय प्रयोग गर्छु (यद्यपि अन्य समाधानहरू उपलब्ध छन्)। यसले पाठ नोड लिन्छ र स्वचालित रूपमा शब्द वा क्यारेक्टरहरू लपेट्छ, मलाई मेरो मार्कअपमा गडबड नगरी एनिमेसन र स्टाइल गर्न थप हुकहरू दिन्छ। यो एउटा दृष्टिकोण हो जसले मेरो HTML पढ्न योग्य र अर्थपूर्ण राख्छ, मलाई राम्रो-दाना नियन्त्रण दिँदा तपाईंले क्लासिक कार्टुन शीर्षक कार्डहरूमा देख्नुभएको असमान, चरित्रयुक्त टाइपोग्राफी पुन: सिर्जना गर्न आवश्यक छ। यद्यपि, यो दृष्टिकोण आउँछधेरै जसो स्क्रिन रिडरहरूले पाठ नोडहरू क्रमबद्ध रूपमा पढ्दा पहुँचयोग्यता चेतावनीहरू। त्यसैले यो:
हम मीठो हम
...तपाईले अपेक्षा गरे अनुसार पढ्नुहोस्: हम्म मीठो
तर यो:
H u m
... ब्राउजर र स्क्रिन रिडरको आधारमा फरक व्याख्या गर्न सकिन्छ। कतिपयले अक्षरहरू जोड्छन् र शब्दहरू सही रूपमा पढ्छन्। अरूले अक्षरहरू बीचमा पज गर्न सक्छन्, जुन सबैभन्दा नराम्रो अवस्थामा यस्तो लाग्न सक्छ: “H…” “U…” “M…”
दुर्भाग्यवश, केहि विभाजन समाधानहरूले सधैं पहुँचयोग्य परिणाम प्रदान गर्दैन, त्यसैले मैले मेरो आफ्नै पाठ स्प्लिटर, splinter.js लेखेको छु, जुन हाल बिटामा छ। व्यक्तिगत अक्षरहरू परिवर्तन गर्दै मेरो टून टेक्स्ट स्प्लिटर सक्रिय गर्न, मैले विभाजन गर्न चाहने तत्वमा डाटा-विशेषता थप्छु:
हम मीठो हम
पहिले, मेरो लिपिले प्रत्येक शब्दलाई अलग-अलग अक्षरहरूमा छुट्याउँछ र तिनीहरूलाई वर्ग र ARIA विशेषताहरू लागू गरी स्प्यान तत्वमा लपेट्छ:
स्क्रिप्टले त्यसपछि विभाजन तत्वको प्रारम्भिक सामग्री लिन्छ र पहुँच कायम राख्न मद्दतको लागि aria विशेषताको रूपमा थप्छ:
ती वर्ग विशेषताहरू लागू गरेपछि, मैले छनौट गरे अनुसार म व्यक्तिगत क्यारेक्टरहरू स्टाइल गर्न सक्छु।
उदाहरणका लागि, "हम मीठो हम" को लागि, म यसको अक्षरहरू आधार रेखाबाट कसरी टाढा जान्छ भनेर नक्कल गर्न चाहन्छु। मेरो Toon Text Splitter प्रयोग गरेपछि, मैले अर्ध-अनियमित रूप सिर्जना गर्न धेरै :nth-child चयनकर्ताहरू प्रयोग गरेर चार फरक अनुवाद मानहरू लागू गरें: /* ४, ८, १२ औं... */ .toon-char:nth-child(4n) { अनुवाद: 0 -8px; } /* 1st, 5th, 9th... */ .toon-char:nth-child(4n+1) { अनुवाद: 0 -4px; } /* 2nd, 6th, 10th... */ .toon-char:nth-child(4n+2) { अनुवाद: 0 4px; } /* 3rd, 7th, 11th... */ .toon-char:nth-child(4n+3) { अनुवाद: 0 8px; }
तर अनुवाद मात्र एउटा गुण हो जुन मैले मेरो टून पाठलाई रूपान्तरण गर्न प्रयोग गर्न सक्छु।
म ती व्यक्तिगत क्यारेक्टरहरूलाई अझ बढी अराजक रूपको लागि घुमाउन सक्छु: /* ४, ८, १२ औं... */ .toon-line .toon-char:nth-child(4n) { घुमाउनुहोस्: -4deg; } /* 1st, 5th, 9th... */ .toon-char:nth-child(4n+1) { घुमाउनुहोस्: -8deg; } /* 2nd, 6th, 10th... */ .toon-char:nth-child(4n+2) { घुमाउनुहोस्: 4deg; } /* 3rd, 7th, 11th... */ .toon-char:nth-child(4n+3) { घुमाउनुहोस्: 8deg; }
तर अनुवाद मात्र एउटा गुण हो जुन मैले मेरो टून पाठलाई रूपान्तरण गर्न प्रयोग गर्न सक्छु। म ती व्यक्तिगत क्यारेक्टरहरूलाई अझ बढी अराजक रूपको लागि घुमाउन सक्छु: /* ४, ८, १२ औं... */ .toon-line .toon-char:nth-child(4n) { घुमाउनुहोस्: -4 डिग्री; }
/* 1st, 5th, 9th... */ .toon-char:nth-child(4n+1) { घुमाउनुहोस्: -8 डिग्री; }
/* 2nd, 6th, 10th... */ .toon-char:nth-child(4n+2) { घुमाउनुहोस्: 4 डिग्री; }
/* 3rd, 7th, 11th... */ .toon-char:nth-child(4n+3) { घुमाउनुहोस्: 8 डिग्री; }
र, निस्सन्देह, म ती क्यारेक्टरहरू जिगल गर्न एनिमेसनहरू थप्न सक्छु र मेरो टून पाठ शैली शीर्षकहरू जीवनमा ल्याउन सक्छु। पहिले, मैले क्यारेक्टरहरू घुमाउने किफ्रेम एनिमेसन सिर्जना गरें:
@keyframes जिगल { 0%, 100% { रूपान्तरण: घुमाउनुहोस्(var(--base-rotate, 0deg)); } 25% { रूपान्तरण: घुमाउनुहोस्(calc(var(-base-rotate, 0deg) + 3deg)); } 50% { रूपान्तरण: घुमाउनुहोस्(calc(var(--base-rotate, 0deg) - 2deg)); } 75% { रूपान्तरण: घुमाउनुहोस्(calc(var(-base-rotate, 0deg) + 1deg)); } }
मेरो Toon Text Splitter द्वारा बनाईएको स्प्यान तत्वहरूमा लागू गर्नु अघि: .toon-char { एनिमेसन: jiggle 3s अनन्त सहज-इन-आउट; रूपान्तरण-उत्पत्ति: केन्द्र तल; }
र अन्तमा, रोटेशन रकम सेट गर्दै र प्रत्येक क्यारेक्टर जिगल गर्न सुरु हुनु अघि ढिलाइ: .toon-char:nth-child(4n) { --base-rotate: -2deg; } .toon-char:nth-child(4n+1) { --base-rotate: -4deg; } .toon-char:nth-child(4n+2) { --base-rotate: 2deg; } .toon-char:nth-child(4n+3) { --base-rotate: 4deg; }
.toon-char:nth-child(4n) { animation-delay: 0.1s; } .toon-char:nth-child(4n+1) { एनिमेसन-ढिलाइ: 0.3s; } .toon-char:nth-child(4n+2) { एनिमेसन-ढिलाइ: 0.5s; } .toon-char:nth-child(4n+3) { एनिमेसन-ढिलाइ: 0.7s; }
छाप बनाउन एउटा फ्रेम कार्टुन शीर्षक कलाकारहरूसँग छाप बनाउन एउटा फ्रेम थियो, र तिनीहरूको टाइपोग्राफी तिनीहरूले चित्रित कलाकृति जत्तिकै महत्त्वपूर्ण थियो। वेबमा पनि त्यस्तै छ। राम्रोसँग डिजाइन गरिएको हेडर वा नायकक्षेत्रलाई स्पष्टता, चरित्र, र आत्मविश्वास चाहिन्छ — एक फीका पूर्ण-चौडाइ पृष्ठभूमि छवि मात्र होइन। केही सावधानीपूर्वक चयन गरिएका CSS गुणहरू - छायाँ, स्ट्रोकहरू, क्लिप गरिएका पृष्ठभूमिहरू, र केही नियन्त्रित एनिमेसनहरू - हामी त्यही प्रभाव पुन: सिर्जना गर्न सक्छौं। मलाई टुन टेक्स्ट मन पर्छ किनभने म उदासीन छु, तर यसको डिजाइन जानाजानी भएकोले। जानाजानी छनोटहरू गर्नुहोस्, र थोरै टुन टेक्स्ट टाइपोग्राफीलाई तपाईंको डिजाइनहरूमा पंच थप्न दिनुहोस्।
