بسیاری از طراحان، تصور می کنند که تایپوگرافی فقط شامل انتخاب یک فونت، انتخاب اندازه فونت و اینکه آیا باید به طور منظم یا جسور باشد. برای رسیدن به تایپوگرافی خوب خیلی بیشتر است و این جزئیات دقیق است که طراحان آن را غافلگیر می کنند. این جزئیات به کنترل کامل طراحان اجازه می دهد تا آنها را در طراحی سایت زیبای خود و سازگار ایجاد کنند. در حالی که این جزئیات را می توان در انواع مختلف رسانه ها استفاده کرد، در این مقاله ما قصد داریم تا بر نحوه استفاده از آنها در طراحی وب سایت ب با استفاده از CSS تمرکز کنیم. در اینجا 8 راهنمایی ساده وجود دارد که می توانید CSS را برای بهبود تایپوگرافی خود و از این قابلیت استفاده کلی برای طرح های خود استفاده کنید.
اندازه گرفتن
اندازه طول خط یک نوع است. خطوط طولانی یا کوتاه میتوانند به یک چشم خواننده خشن و منحرف شوند. اندازه گیری طولانی ریتم را مختل می کند، زیرا خواننده زمان زیادی را برای یافتن نوع خط بعدی می گیرد. برای خواندن مطلوب، شما می خواهید اندازه گیری بین 40-80 کاراکتر، از جمله فضاهای. برای طراحی تک ستون 65 کاراکتر ایده آل است.
یک روش ساده برای محاسبه اندازه گیری این است که از روش رابرت برینگهاست استفاده کنید که اندازه نوع آن چند برابر با 30 است. بنابراین اگر اندازه نوع 10 پیکسل باشد، آن را 30 برابر کنید، اندازه 300 پیکسل یا حدود 65 حرف در هر خط را می دهد.
منتهی شدن
Leading فضای بین خطوط نوع در یک کپی است که نقش مهمی در خواندن دارد. خطوط به درستی فاصله می یابند که خواننده به دنبال نوع و بهبود کلی ظاهر متن است. رهبری نیز رنگ چاپی را تغییر می دهد که تراکم یا تن ترکیب است.
بسیاری از عوامل بر روی پیشرو تاثیر می گذارد: نوع فونت، اندازه نوع، وزن، مورد، اندازه گیری، لغت نامه، و غیره طولانی تر اندازه گیری، رهبری بیشتر مورد نیاز است. همچنین، بزرگتر نوع اندازه، پیشروی کمتر مورد نیاز است. یک قاعده خوب این است که بسته به نوع فونت، پیشرو 2-5pt بزرگتر از اندازه نوع را تنظیم کنید. بنابراین اگر شما در 12pt تنظیم کنید، یک رهبر 15pt یا 16pt باید در وب کار خوبی داشته باشد.
نقل قول های حلق آویز
قطع متن در حاشیه متن. با انجام این کار یک علامت نقل قول که با متن برخورد می شود حاشیه چپ را قطع می کند و ریتم خواننده را مختل می کند. نقل قول های آویزان هماهنگی چپ را بدون تغییر و متعادل نگه می دارد در نتیجه افزایش خوانایی.
ریتم عمودی
یک شبکه پایه پایه ای برای ریتم تایپوگرافی یکپارچه در یک صفحه است. این اجازه می دهد که خوانندگان به راحتی جریان متن را دنبال کنند، که به نوبه خود خوانایی را افزایش می دهد. ریتم پیوسته در فضای عمودی تمام متن را در یک شبکه سازگار نگه می دارد به طوری که نسبت و تعادل در تمام صفحه حفظ می شود، مهم نیست اندازه اندازه، منجر یا اندازه گیری شود.
برای حفظ ریتم عمودی در CSS، شما می خواهید فاصله بین عناصر و خط فاصله (پیشرو) را به اندازه شبکه خط پایه برابر شود. به عنوان مثال، به نظر می رسد که شما از یک خط پایه 15px استفاده می کنید، به این معنی که 15px بین هر خط پایه وجود دارد. خط فاصله بین 15 پیکسل و فاصله بین هر پاراگراف 15 پیکسل خواهد بود. در اینجا یک مثال است:
بیوه ها و یتیمان
یک بیوه یک خط کوتاه یا یک کلمه در انتهای پاراگراف است. یک یتیم یک کلمه یا خط کوتاه در ابتدای یا انتهای ستون است که از بقیه پاراگراف جدا شده است. بیوه ها و یتیمان شانه های ناخوشایند، چشم خواننده را مختل می کنند و خوانایی را تحت تاثیر قرار می دهند. آنها می توانند با تنظیم اندازه نوع، منجر، اندازه گیری، لغزنده، حروفچینی یا با وارد کردن خطوط خطا به صورت دستی، اجتناب شوند.
متاسفانه، هیچ راهی آسان برای جلوگیری از بیوه ها و یتیمان تایپوگرافی با CSS وجود ندارد. یک راه برای حذف آنها در بالا ذکر شده است، اما افزونه جی کوئری نیز به نام jQWidon’t وجود دارد که فاصله بین دو آخرین کلمات یک عنصر را ایجاد می کند.
تاکید
تأکید بر یک کلمه بدون وقفه کردن خواننده مهم است. Italic به طور گسترده ای در نظر گرفته شده است که فرم ایده آل از تاکید است. برخی از انواع دیگر تأیید عبارتند از: bold، caps، caps caps، size type، color، underline یا یک متن متفاوت. مهم نیست که شما انتخاب کنید، سعی کنید خود را محدود به استفاده از تنها یکی. ترکیب هایی مانند کپسول کپسول کوتوله ای، کلاسیک و ناخوشایند هستند.
مقیاس
همیشه با یک مقیاس سازگار باشید، اینکه آیا مقیاس سنتی در قرن شانزدهم توسعه یافته است یا اینکه همه ما با آن آشنا هستیم یا اینکه خودتان آن را ایجاد می کنید. مقیاس مهم است زیرا یک سلسله مراتب تایپوگرافی را ایجاد می کند که خوانایی را بهبود می بخشد و هماهنگی و انسجام در متن ایجاد می کند.
پاک کردن رگ
هنگام تنظیم یک متن از متن با اصلاح چپ یا راست، مطمئن شوید که چنگال (سمت ناهموار) را بدون هیچ گونه “سوراخ” یا اشکال ناخوشایند متعادل نگه دارید. یک تکه بد می تواند به چشم و ناراحتی خواننده منجر شود. یک پارچه خوب یک ناهمگونی “نرم” دارد، بدون هیچ خطی که خیلی طولانی و یا خیلی کوتاه است. هیچ راهی برای کنترل این در CSS وجود ندارد، بنابراین برای رسیدن به یک تکه خوب، باید تنظیمات دستی را به بلوک متن تنظیم کنید.
Hyphenation همچنین می تواند برای تولید چابک های خالص کمک کند، اما متاسفانه CSS در حال حاضر نمی تواند این کار را انجام دهد. شاید در آینده ای نزدیک شاهد کنترل CSS 3 در طراحی سایت خواهیم بود. همه چیز از بین نمی رود. برخی از راه حل های سرور و مشتری برای فریب خودکار مانند phpHyphenator و Hyphenator و نیز ژنراتورهای آنلاین وجود دارد.
سخن پایانی
اگر تمایل دارید برای شرکت خود اقدام به طراحی سایت کنید پیشنهاد می کنم ابتدا مقالات مربوط به تفاوت طراحی سایت فروشگاهی و طراحی سایت شرکتی را مطالعه کنید. همچنین صفحه خدمات طراحی سایت پیام آوا را برای این کار نگاه کنید. شرکت پیام آوا بهترین و با کیفیت ترین خدمات طراحی سایت را در قالب طراحی سایت ارزان و مقرون به صرفه به شما ارائه می کند.
سئو سایت برای موتورهای جست و جو و همچنین تبلیغات گوگل از جمله مهمترین روش ها برای بیشتر دیده شدن سایت شما به حساب می آید. شرکت پیام آوا خدمات طراحی سایت تهران و سئو را با مناسب ترین قیمت به شما ارائه می دهد. بازاریابی و تبلیغات به رکن اساسی جامعه امروز ما تبدیل شده است.
مطلب مفید و کاربردی بود
موفق و پیروز باشید.