ایجاد سرفصل با متن های بزرگ و کوچک همپوشانی


عناوین محتوا را معرفی می کنند.

ما می‌توانیم جلوه‌ها و ترفندهای زیادی را برای عناوین مبتنی بر گرافیک اعمال کنیم تا خوانندگان را برای ادامه خواندن، تنظیم لحن یا برجسته کردن یک عنوان در میان بسیاری از عنوان‌ها ترغیب کنیم.

اما گاهی اوقات واضح‌ترین تکنیک‌ها، مانند اصلاح وزن بصری و چیدمان، بسیار بهتر عمل می‌کنند.

عناوین همپوشانی از مقدار کمی متن بزرگ و مقدار زیادی از متن کوچک برای برقراری ارتباط بیشتر از یک عنوان ساده به تنهایی استفاده می‌کنند. متناقض به نظر می رسد؟ فقط در صورتی که نکات ظریف را نادیده بگیرید.

برای یادگیری نحوه ایجاد عناوین به یاد ماندنی با متن همپوشانی به ادامه مطلب مراجعه کنید.

example of grit from fonts that don't align

اشکال عجیب و غریب بالا چه ارتباطی با نام‌های “WDD” و “WebdesignerDepot.com” دارند؟ آنها مصنوعات تاسف باری هستند که یک متن را بدون توجه به مکان یا جزئیات قرار داده اند. این تصویر توهین آمیز است:

example text with bad alignment

در یک نگاه، تصویر بالا نمایشی ساده از نام وبلاگ و مخفف آن است. تایپ فیس رسمی مورد استفاده وبلاگ است. نارنجی روشن مستقیماً از موضوع وب سایت می آید. و هر دو خط متن تقریباً کاملاً در مرکز قرار دارند.

حتی مطابق با سبک وبلاگ املا و حروف بزرگ نوشته می شود. اما این یک تلاش آماتوری برای تقلید از تکنیک همپوشانی با قرار دادن یک خط طولانی از متن روی یک متن کوتاه است. (نقاط ضعف در این مثال اغراق آمیز است، اگرچه غیر معمول نیست.)

example text with bad alignment

سایه دهی بالا اشکال جدید ایجاد شده توسط دو قطعه متن را نشان می دهد. نحوه ارتباط دو خط با هر یک و ترتیب خواندن آنها بستگی به نحوه چیدمان آنها دارد. همپوشانی متن بیشتر از قرار دادن یکی روی دیگری است.

البته، همپوشانی همیشه بهترین راه برای مرتب کردن عنوان کوتاه و عنوان فرعی طولانی نیست.

نمونه‌های زیر برخی از درمان‌های ممکن را نشان می‌دهند، زمانی که یک طرح به چیزی خلاقانه‌تر از عناصر معمولی h1 و h2 نیاز دارد.

three examples of other ways to match big and small titles

متن همپوشانی دارای ظرافتی است که به راحتی نمی توان آن را با HTML کپی کرد (هنوز). دو خط متن با هم اغلب بیشتر از مجموع هر یک به صورت جداگانه است.

 

مبانی همپوشانی متن

متن همپوشانی دو خط از نوع را در مقابل یکدیگر متضاد می کند. متن بزرگ در پشت متن کوچک قرار دارد که اغلب حاوی کلمات بیشتری است. بخش‌های پیچیده تضمین می‌کنند که هر دو خط به یک اندازه خوانا هستند، و باعث می‌شود هر دو با هم به جای مخالف یکدیگر کار کنند و کل بسته را در موضوع نگه می‌دارند.

examples of placement, relative weight, voice and interaction

تکنیک های مختلف اثر همپوشانی متن را تغییر می دهند.

در اینجا چهار عامل اصلی که بر همپوشانی متن تأثیر می‌گذارند، آمده است:

  • جایگاه به نحوه قرارگیری متن کوچک نسبت به متن بزرگ بستگی دارد. این به طور مستقیم بر نحوه خواندن متن تأثیر می گذارد. اگر متن کوچک به سمت چپ بالا باشد، احتمالاً ابتدا خوانده می شود (یعنی قبل از متن بزرگ). اگر متن کوچک به سمت راست پایین باشد، احتمالاً در مرحله دوم خوانده می شود.
  • وزن نسبی به میزان توجهی که یک متن نسبت به دیگری جلب می کند، اشاره دارد. با توجه به اندازه آن، متن بزرگ تمایل به تسلط دارد. با این حال، اگر متن بزرگ در پس‌زمینه محو شود، متن کوچک به بیرون می‌پرد.
  • صدا (عمدتاً حروف و رنگ) به انتخاب های زیبایی شناختی مربوط می شود که حال و هوای تایپوگرافی را تنظیم می کند.
  • تعامل پیچیده ترین است. این مربوط به نحوه کار حروف متون با یکدیگر است. تعامل بستگی به مکان، تایپ و خود شخصیت ها دارد. هدف این است که خطوط متن به ظاهر متضاد را به صورت بصری گره بزنیم.

 

قرار دادن بر نحوه خواندن خطوط در مجموع تأثیر می گذارد

ترتیبی که می‌خواهید بازدیدکنندگان متن را بخوانند، مهم‌ترین عامل در تعیین نحوه چینش خطوط تایپ است. انگلیسی به عنوان یک زبان چپ به راست، متن کوچک در سمت چپ به طور قابل توجهی متفاوت از متن کوچک در سمت راست خواهد بود.

small text aligned to the upper left

با متن کوچک در گوشه سمت چپ بالا، تصویر بالا به این صورت است: «از آنها مانند طاعون اجتناب کنید. کلیشه ها.” با این حال، “کلیشه ها” به قدری بزرگ نوشته شده است که مردم ممکن است ابتدا آن را بخوانند. تعادل بین اندازه و مکان، دو خط را در موقعیت مساوی قرار می دهد.

small text aligned to the lower right

نسخه بالا دارای ابهام کمتری است. جدا کردن متن کوچک به سمت راست پایین اولویت واضحی را به متن بزرگ می دهد. اکنون به این صورت خوانده می‌شود: «کلیشه‌ها: مانند طاعون از آنها دوری کنید».

عناوین بالا قابل تعویض هستند زیرا هر خط کم و بیش مستقل است. هنگامی که خطوط به یکدیگر وابسته هستند، قرار دادن بسیار مهم است. مثالی از یک شغل ضعیف در اینجا آمده است:

small text aligned to the lower right

قرار دادن متن کوچک در سمت راست پایین، خوانندگان را معطل می‌کند. “طاعون: از کلیشه هایی مانند … اجتناب کنید”؟ اگرچه اکثر مردم متوجه خواهند شد، اما لحظه تردید تفاوت بین ارائه متوسط ​​و خوب است.

small text aligned to the upper left

ترتیب درست بالا بهترین است زیرا متن کوچک قسمت اول جمله است. اگر بخواهیم متن کوچک را در سمت راست قرار دهیم، متن بزرگ باید قسمت اول جمله را تشکیل دهد. اما باز هم مشکلی وجود دارد.

small text aligned to the lower right

بسته به جمله، استفاده از اولین کلمه برای متن بزرگ کافی نیست، زیرا خطوط متن باید به صورت جداگانه و با هم کار کنند. متن بالا عبارت را به درستی تقسیم می کند. فعل دستوری «اجتناب» به خودی خود معنای کافی برای تضمین استقلال ندارد. و “کلیشه هایی مانند طاعون” به نظر می رسد که ما عبارات بیش از حد استفاده شده را با بیماری مقایسه می کنیم، به جای اینکه اجتناب از هر دو را تجویز کنیم. معنی کل گرافیک تغییر می کند.

small text aligned to the lower right

حتی اگر مجبور باشیم متن بزرگ را کوچک کنیم تا جا بیفتد، استفاده از دو کلمه (یک عبارت کامل) برای متن بزرگ باعث می شود هر دو خط بهتر خوانده شوند.

با همپوشانی متن، دریافت عبارت درست از طریق طرح بندی به اندازه انتخاب رنگ و فونت مهم است.

 

تعادل تسلط با کار کردن با پس زمینه، نه در برابر پس زمینه

اگرچه هدف از متن بزرگ تسلط است، اما می تواند به راحتی متن کوچک را نیز خفه کند. اما این همیشه بد نیست. تعادل خوب برای جلوگیری از تسلط متن بزرگ بر متن کوچک نیست، بلکه نشان دادن اهمیت نسبی آنهاست.

اندازه متن بزرگ به طور طبیعی آن را به بیانیه اصلی تبدیل می کند. اگر قرار باشد متن کوچک صرفاً از متن بزرگ پشتیبانی کند، عالی است. به عنوان مثال:

big text overwhelms small text

“WWW” ابتدا به بیرون می پرد. “به عصر دیجیتال خوش آمدید” این ایده را به تفصیل بیان می کند و از سه Ws حمایت می کند. اما اگر قرار باشد متن کوچک حامل پیام اصلی باشد چه؟

big text faded back to balance weight with small text

در بالا، متن اصلی «به عصر دیجیتال خوش آمدید» است. و این به چه معناست؟ “WWW” که در پشت محو شده است، یک اشاره ارائه می دهد.

examples how big text can fade

هر چه متن بزرگ با پس‌زمینه ترکیب شود، اهمیت کمتری پیدا می‌کند. وقتی متن بزرگ به سختی قابل مشاهده است، متن کوچک عنصر اصلی می شود.

 

تعامل در جزئیات است

شکل یک تایپ فیس کلید ظاهر متمایز آن است. هنگامی که دو خط متن با هم همپوشانی دارند، جیب‌ها، اشکال عجیب و غریب و سایر موارد حواس‌پرتی ایجاد می‌کنند.

text with problems

در بالا، نوشتار سفید نارنجی بزرگ و کوچک به شمارنده‌ها شلوغی غیرضروری می‌افزاید (یعنی سوراخ‌های داخل حروف). به تنهایی، هر بیت اضافی مانع خوانایی زیادی نمی شود. اما این بخشی از مشکل است: از آنجایی که آنها به اندازه کافی بد نیستند که متن را ناخوانا کنند، به راحتی می توان آنها را به عنوان بی اهمیت رد کرد.

برای حداکثر خوانایی، باید حروف کوچک متن را حفظ کنیم.

text with solutions

همانطور که در بالا نشان داده شده است، تنظیمات جزئی تداخل را برطرف کرده است:

  • که بین پایانه های گیره مانند “C” بزرگ تغییر مکان داده شده است، کلمه “متن” اکنون بسیار واضح تر است.
  • توجه کنید که چگونه ساقه های عمودی “r” و “n” در “تبیینی” به لبه های “C” بزرگ می رسند.
  • شمارنده های “p” و “o” در “حمایت کننده” اکنون فقط سیاه هستند.
  • ما حرف بزرگ “A” را برش داده ایم تا “s” کوچک در “حمایت کننده” واضح تر شود.

هدف حفظ شکل حروف کوچک است، حتی اگر خوانندگان متوجه نشوند.

 

Typeface تفاوت ایجاد می کند

هر حروفی برای اندازه‌های بزرگ و کوچک مناسب نیست. در اندازه کافی کوچک، جزئیات یک تایپ فیس ممکن است ناپدید شوند. و جزئیاتی که در اندازه بزرگ بزرگ‌نمایی می‌شوند، گاهی اوقات می‌توانند مشکلات غیرعادی ایجاد کنند.

examples of how inappropriate typefaces cause problems

چهار ترکیب فونت بالا به دلایل مختلف با شکست مواجه می شوند:

  1. این حروف اسکریپت برای تقلید از دست خط طراحی شده است. لبه های ناهموار آن حاوی صدها نقطه برداری است که بیشتر آنها در اندازه کوچک از بین می روند.
  2. اما اسکریپت را خیلی بزرگ کنید و حروف کمتر شبیه دستخط و بیشتر شبیه مسیرهای اسکالوپ شده Illustrator باشند.
  3. لبه‌های خوشنویسی زاپفینو بهتر از تگزاس هیرو است، اما بالاروی عظیم روی «b» ترکیب را از تعادل خارج می‌کند.
  4. Lucida Blackletter آنقدر پیچیده است که نمی‌تواند به عنوان پس‌زمینه کاربردی باشد، حداقل بدون چینش بسیار دقیق متن کوچک. همچنین، شخصیت منحصر به فرد آن در اندازه کوچک ناپدید می شود. آیا این swoops و serifs هستند یا فقط مبهم هستند؟

 

برای متن بزرگ، خیلی ضخیم یا خیلی نازک درست است

هنگام تداخل متن، نوع بزرگ را هم به عنوان متن و هم پس زمینه در نظر بگیرید. هرچه حروف پیچیده تر باشند، بیشتر شبیه بافت می شوند. به این معنی که آنها به احتمال زیاد حروف را در متن کوچک پنهان می کنند.

برای جلوگیری از مشکلات، چاق یا لاغر شوید. شکل های بسیار ضخیم و بسیار سبک بهتر از وزن معمولی یک صورت عمل می کنند. هر دو تداخل کمتری دارند زیرا متن کوچک شانس کمتری برای برخورد به لبه دارد.

examples of how thick and thin big text work best

به عنوان مثال، متن بزرگ در تغییرات روشن و سیاه در بالا حروف کوچک کمتری دارد. البته، هر چهره – و هر مجموعه از کلمات – متفاوت است. اما به طور کلی وزن های متوسط ​​نسبت به وزنه های نازک و ضخیم مشکلات بیشتری ایجاد می کنند.

 

مثال‌های عملی

این چگونه ممکن است با متن محتمل تر کار کند؟ در اینجا چند نمونه از متن همپوشانی وجود دارد.

generic blog title set in harmless mint green

چرا کار می‌کند: متن بزرگ که در پس‌زمینه محو می‌شود، اولویت واضحی را به متن کوچک می‌دهد. اشکال هندسی Museo حواس پرتی کمی دارند.

مشکلات احتمالی: اگر متن کوچک کوتاه‌تر بود، این همپوشانی کاملاً کار نمی‌کند. برای انتقال پیام، متن کوچک باید با تمام شش حرف متن بزرگ همپوشانی داشته باشد.

tetsuo/kaneda, dialog from the last half of the movie Akira

چرا کار می‌کند: متن کوچک فقط روی سه خط ضخیم و دو خط نازک رنگی می‌رود. کنتراست زیاد، حتی برای یک پالت رنگ گرم.

مشکلات احتمالی: به نظر می‌رسد لبه‌های پرانرژی متن بزرگ برخلاف خطوط ظریف متن کوچک عمل می‌کنند.

steampunk, high-tech Victorian steam power

چرا کار می‌کند: هر دو خط نوشتار دارای اشکال هندسی تیز و دقیق هستند.

مشکلات احتمالی: آیا متن کوچک کمی گم شده به نظر می رسد؟ آیا حروف چاپی واقعاً روح “steampunk؟”

Trajan is beautiful and overused in dramatic movie posters

چرا کار می کند: ردیابی سخاوتمندانه در حروف بزرگ و خطوط تمیز در هر دو متن، هر شخصیت را واضح می کند.

مشکلات احتمالی: آیا بافت پس‌زمینه خواندن تایپ را خیلی سخت می‌کند؟

sample 5

چرا کار می کند: متن بزرگ ضخیم به خودی خود خوانا است، در حالی که متن کوچک صمیمی خواندن را دعوت می کند. چندین پرکننده اضافی عمق رنگ حروف “S” بزرگ را حفظ می کنند.

مشکلات احتمالی: SxSW معمولاً با فونت بیت مپ ارائه می‌شود. اینها خارج از برند هستند همچنین، از اسکریپت ها در متن های کوچک کم استفاده کنید.

 

اما کمک می کند؟

بیایید این درس ها را در ترکیب اصلی خود اعمال کنیم.

example text with bad alignment
sample 6

چرا کار می کند:

  • متن بزرگ با پس زمینه تاریک ترکیب می شود، اما اندازه آن باعث می شود که قابل مشاهده باشد.
  • رنگ روشن متن کوچک را برجسته می کند. تراز راست آن را متعادل می کند.
  • فاصله گذاری دقیق حروف کوچک و سادگی حروف بزرگ تضاد را به حداقل می رساند.
  • این دو نوع تایپ عناصر مشترکی دارند. به عنوان مثال، دو “W” با وجود اینکه در چهره های مختلف قرار دارند، در یک راستا قرار می گیرند.

نوشته شده به طور انحصاری برای Webdesigner Depot توسط Ben Gremillion. بن یک طراح وب است که مشکلات ارتباطی را با طراحی بهتر حل می کند.

برخی از مشکلات احتمالی نمونه آخر چیست؟ لطفاً نظرات خود را در نظرات زیر به اشتراک بگذارید.

بدون دیدگاه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.