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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

 

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

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

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

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

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

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

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

 

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

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

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

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

 

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

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

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

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

 

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

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