بیشتر اطلاعاتی که ما مصرف می کنیم از طریق خواندن اتفاق می افتد، بنابراین توجه به کلمات هنگام طراحی بسیار منطقی است. جنبه های زیادی برای تایپوگرافی وجود دارد، اما یکی از چیزهایی که به بهبود کیفیت طراحی من کمک کرد، فاصله حروف بود.
فاصله حروف در مورد افزودن و حذف فاصله بین حروف است. برخی آن را با کرنینگ اشتباه می گیرند، اما این دو با هم فرق دارند. فاصله حروف بر کل خط متن تأثیر می گذارد، در حالی که کرنینگ فاصله بین دو حرف جداگانه را در آن زمان تنظیم می کند. Kerning بهتر است به طراحان تایپ سپرده شود، علاوه بر این، بر خلاف فاصله حروف، در حال حاضر هیچ راهی برای کنترل کرنینگ در CSS وجود ندارد.
من معتقدم که تمرین و مشاهده زیاد نحوه برخورد شما با فاصله حروف را در کارتان نیز تغییر می‌دهد.
هدف از فاصله حروف
هدف اصلی از فاصله گذاری حروف بهبود خوانایی و خوانایی متن است. کلمات بسته به اندازه، رنگ و پس‌زمینه‌ای که در آن قرار دارند، متفاوت عمل می‌کنند. با تنظیم فاصله حروف با محیطی که با آن کار می کنید، به خوانندگان کمک می کنید تا اطلاعات شما را سریعتر و کارآمدتر مصرف کنند. بخش سرگرم کننده این است که آنها حتی متوجه آن نمی شوند – این تمام هدف کار است.
به‌خاطر داشته باشید که تایپوگراف‌ها درباره فاصله حروف و هسته‌گذاریفکر می‌کنند > هنگام طراحی یک تایپ فیس. این بدان معنی است که شما مجبور نیستید آن را در تمام متن خود اعمال کنید، اما برای اینکه درک درستی در مواقع ضروری داشته باشید، باید برخی از اصول اولیه را بدانید و از تایپ‌فیس‌های خوب استفاده کنید.
چگونه فاصله حروف بر خوانایی و خوانایی تأثیر می گذارد
خوانایی و خوانایی متن شما به مواردی مانند ارتفاع خط، طول پاراگراف، اندازه فونت، انتخاب حروف، فاصله حروف و موارد دیگر بستگی دارد. در مورد فاصله حروف، اگر به تازگی وارد تایپوگرافی شده اید، بهترین کاری که می توانید انجام دهید استفاده بیش از حد از آن نیست. منظور من از آن این است که فاصله بین حروف را خیلی بزرگ یا خیلی کوچک نکنید. حتی اگر فکر می کنید خوب به نظر می رسد، مردم با خواندن آن دچار مشکل می شوند و این تجربه آنها را خراب می کند.
حروف بزرگ با فاصله حروف
حروف بزرگ به این منظور طراحی شده اند که در ابتدای جمله یا اسم خاص در ترکیب با حروف کوچک ظاهر شوند. وقتی حروف بزرگ کنار هم قرار می گیرند، فاصله بین آنها خیلی کم است. بنابراین برای دستیابی به خوانایی بهتر، فضا باید افزایش یابد. این برای هر دو اندازه فونت بزرگ و کوچک اعمال می شود.
عناوین با فاصله حروف
اگر از فونت‌هایی با طراحی خوب استفاده می‌کنید، می‌توانید مطمئن باشید که آنها به خوبی کالیبره شده‌اند و نیازی به انجام تنظیمات عمده در آنها نخواهید داشت. با این حال، مشکل سرفصل ها این است که در مقیاس های بزرگتر فضای بین حروف نامتعادل به نظر می رسد. می توان آن را با افزایش یا کاهش مقدار فاصله حروف برطرف کرد.
هیچ قانون سختگیرانه‌ای برای فاصله‌گذاری حروف وجود ندارد – حروف بسیار زیادی وجود دارد و همه آنها نیاز به یک رویکرد فردی دارند – اما اگر به نحوه برخورد شرکت‌های بزرگی مانند گوگل و اپل با حروف خود نگاه کنید، می‌توانید تعداد زیادی از آنها را پیدا کنید. اطلاعات ارزشمندی وجود دارد.
بیایید نگاهی به حروف “Roboto” و “San Francisco” بیندازیم (اول در طراحی متریال و دومی در اکوسیستم اپل استفاده می شود). عناوین از 20 تا 48 پیکسل یا دارای فاصله حروف مثبت هستند یا هیچ. اگر اندازه فونت بزرگتر باشد، فاصله حروف منفی می شود. این اعداد دقیق برای دیگر تایپ‌فیس‌ها به خوبی کار نمی‌کنند، اما پس از امتحان روش‌های مختلف می‌توانم بگویم که این یک الگوی رایج است.
من چندین دستورالعمل را برای فاصله‌گذاری حروف آزمایش کرده‌ام و دستورالعملی که توسط آژانس بازن منتشر شده است برای بسیاری از تایپ‌فیس‌های محبوب کار می‌کند. این نقطه شروع خوبی برای شما خواهد بود، اما همیشه می توانید تنظیمات اضافی را اعمال کنید:
- H1 — 96px — -1.5٪
- H2 — 60px — -0.5٪
- H3 — 48px — 0%
- H4 — 34px — 0.25%
- H5 — 24px — 0%
- H6 — 20px — 0.15%
- زیرنویس — 16 پیکسل — 0.15 درصد
اگر برنامه‌های زیادی طراحی می‌کنید یا می‌خواهید این کار را انجام دهید، یکی از مواردی که به من کمک می‌کند استفاده از طراحی مواد و Apple برای تایپ فیس آنها. آنها به خوبی متعادل هستند و باعث صرفه جویی در زمان می شود.
متن متن با فاصله حروف
اگر تا به حال چیزی در مورد فاصله‌گذاری حروف خوانده‌اید، احتمالاً این حکمت رایج را از تایپ‌نویس فردریک گودی دیده‌اید: “هرکسی که حروف را با حروف کوچک فاصله دهد، گوسفندان را می‌دزدد”. (یک استدلال وجود دارد که او فقط به آن اشاره کرده است برخی از طراحان آن را به عنوان یک قانون سخت در نظر گرفتند و اکنون هرگز فاصله حروف را در متن کوچک تنظیم نمی کنند.
بر اساس تمرین من و با نگاه کردن به کارهای طراحان، نمی توانم با گودی موافق باشم، زیرا گاهی اوقات تغییرات کوچک می تواند تفاوت زیادی در نحوه اجرای متن شما ایجاد کند. به عنوان مثال، فونت های فشرده را در نظر بگیرید. در اندازه کوچک، حروف خیلی نزدیک به هم هستند که منجر به خوانایی ضعیف می شود. با افزایش 1.5٪ فاصله حروف، می بینید که خواندن متن آسان تر است.
اگر به مثال قبلی خود نگاه کنیم، در دستورالعمل های حروف “Roboto” و “San Francisco”، فاصله حروف بر متن بدنه اعمال می شود. حتی اگر سانفرانسیسکو یک «نمایشگر SF Pro» برای سرفصل‌ها و «SF Pro Text» برای متن بدنه اختصاصی دارد، هنوز از فاصله حروف برای اصلاح آنها استفاده می‌شود.
تایپ‌فیس‌های مختلف زیادی وجود دارد و یک قانون برای همه آنها اعمال نمی‌شود. فاصله حروف را آزمایش کنید و کاری را انجام دهید که به نظر شما درست است. دستورالعمل های ساده ای وجود دارد که شما را به مسیر درست هدایت می کند، به خصوص هنگام کار با متن متن:
ارتفاع خط را در ذهن داشته باشید
اگر ارتفاع خط بیشتر از 120% دارید، به احتمال زیاد فاصله حروف منفی منجر به ظاهر نامتعادل پاراگراف می شود. برای اصلاح آن باید یا آن را روی 0% نگه دارید یا فقط کمی آن را افزایش دهید.
متن روشن در پس زمینه تاریک
در پس‌زمینه تیره، متن سفید بیش از حد نوردهی به نظر می‌رسد و بنابراین حروف خیلی تنگ به نظر می‌رسند. برای خوانایی بیشتر، به شما پیشنهاد می کنم فاصله حروف را به مقدار کمی افزایش دهید.
مقادیر کلی برای متن متن
می‌توانید از دستورالعمل‌های زیر برای متن اصلی استفاده کنید، که من آنها را با چندین نوع تایپ آزمایش کرده‌ام:
- بدن 1 – 16 پیکسل – 0.5٪
- بدن 2 – 14 پیکسل – 0.25٪
زیرنویس با فاصله حروف
برخلاف سرفصل‌ها و متن اصلی، اندازه فونت‌های کوچک‌تر تفاوت زیادی در فاصله حروف ندارند. زمانی که اندازه فونت کمتر از 13 پیکسل باشد، برای خوانا کردن آن، فاصله بین حروف افزایش می‌یابد. اما همیشه استثنائاتی وجود دارد (دستورالعمل‌های «SF Pro Text» پیشنهاد می‌کنند فقط زمانی که اندازه فونت 11 پیکسل یا کمتر باشد، از فاصله گذاری مثبت حروف استفاده کنید). مطمئن شوید که تنظیمات را آزمایش کرده اید.
می‌توانید از مقادیر زیر به‌عنوان نقطه شروع استفاده کنید و سپس آنها را به شکلی که به نظر می‌رسد برای حروف انتخابی شما مناسب است، ویرایش کنید:
- زیرنویس — 12 پیکسل — 0.5٪
- روی خط — 10px — 1.5%
نکته نهایی
یکی از چیزهایی که به من کمک کرد مهارت های خود را در تایپوگرافی بهبود بخشم، نگاه کردن به طراحان دیگر و به ویژه ریخته گری تایپ بود. با رمزگشایی کار آنها ممکن است متوجه برخی تفاوت های ظریف در نحوه برخورد آنها با تایپوگرافی شوید و این به شما در پروژه های آینده کمک خواهد کرد.
بدون دیدگاه