8 نکته ساده برای تایپوگرافی در طرح سایت شما
افرادی زیادی از جمله طراحان به این فکر می کنند که تایپوگرافی فقط شامل انتخاب یک تایپ فیش ، انتخاب اندازه فونت و اینکه آیا باید فونت ها منظم و پر رنگ باشند یا خیر ، برای تمامی کاربران به همین جا ختم می شود. اما دستیابی به تایپوگرافی خوب در چیزهای زیادی وجود دارد و طراحان اغلب از جزئیات آنها غافل هستند.
این جزئیات به طراحان کنترل کاملی را می دهد و این قابلیت را به آنها خواهد داد تا تایپوگرافی زیبا و ثابتی را در طرح های خودشان ایجاد نمایند. در حالی که این جزئیات را می توان در انواع مختلف رسانه ها اعمال نمود ، در این مقاله ما بر روی نحوه اعمال آنها در طراحی وب سایت با استفاده از css تمرکز کرده ایم. در این بخش 8 نکته کاملا ساده که می توانید از css برای بهبود تایپوگرافی تان و قابلیت استفاده کلی طرح های تان بهره ببرید.
1. اندازه گیری کنید
اندازه گیزی طول یک خط می باشد. از نظر یک بیننده ، خطوط طولانی یا کوتاه می توانند خسته کنند و باعث حواس پرتی خواننده شوند. اندازه متون طولانی ریتم را مختل کرده زیرا خواننده برای یافتن خط بعدی تایپ مشکل دارد. تنها زمانی یک معیار محدود قابل قبول است که با مقدار کمی متن همراه باشد.برای خوانایی مطلوب تر ، می توانید اندازه بین 40 تا 80 کاراکتر از جمله فاصله ها داشته باشید. برای طراحی تک ستونی 65 کاراکتر ایده آل را در نظر بگیرید.
یک روش ساده برای محاسبه اندازه گیری استفاده از روش رابرت برینگهورست بوده که اندازه نوع را در 30 ضرب می کنیم. بنابراین اگر اندازه نوع 10 پیکسل می باشد با ضرب آن در 30 اندازه گیری 300 پیکسل یا حدود 65 کاراکتر در هر خط به شما می دهد ، کد آن نیز چیزی شبیه به مورد زیر خواهد بود:
p {
font-size: 10px;
max-width: 300px;
}
2. پیشرو
لیدینگ در واقع فضای بین خطوط تایپ در مطلب می باشد که نقش زیادی در خوانایی دارد. خطوط با فاصله صحیح ، دنبال نمودن نوع متن را برای خواننده آسان تر می کند و ظاهر کلی متن را بهبود می بخشد. پیشرو همچنین رنگ تایپوگرافی را تغییر می دهد ، چگالی یا تن یک ترکیب است.
فاکتورهای زیادی بر پیشروی تأثیر میگذارند: نوع تایپ، اندازه نوع، وزن، حروف کوچک ، فاصله کلمات، و غیره. همچنین، هرچه اندازه نوع بزرگتر باشد، نیاز به پیشروی کمتری دارد. یک قانون خوب این است که بسته به نوع تایپ، 2 تا 5 نقطه اصلی را بزرگتر از اندازه نوع تنظیم کنید. بنابراین اگر نوع را روی 12pt تنظیم کنید، یک لید 15 یا 16pt باید به خوبی در وب کار کند.
این کار برای به دست آوردن فاصله مناسب نیاز به کمی دقت دارد، اما در اینجا نمونه ای از شکل ظاهری کد آمده است:
body {
font-family: Helvetica, sans-serif;
font-size: 12px;
line-height: 16px;
}
3. نقل قول آویزان
نقل قول ها را در حاشیه بدنه متن آویزان کنید. با انجام ندادن این کار، علامت نقل قولی که با متن همسطح باشد، حاشیه سمت چپ را قطع کرده و ریتم خواننده را مختل می کند. نقل قول های آویزان، تراز چپ را دست نخورده و متعادل نگه می دارد، بنابراین خوانایی را افزایش می دهد.
این امر با استفاده از عنصر blockquote به راحتی با CSS به دست می آید:
blockquote {
text-indent: -0.8em;
font-size: 12px;
}
تورفتگی منفی بسته به نوع تایپ، اندازه نوع و حاشیه متفاوت خواهد بود.
در ادامه ببینید:
اصول طراحی وب برای زبان های راست به چپ RTL
4. ریتم عمودی
یک شبکه پایه برای ریتم تایپوگرافی ثابت در یک صفحه مناسب می باشد. این به خوانندگان اجازه می دهد تا به راحتی جریان متن را دنبال کنند که به نوبه خود خوانایی را افزایش می دهد. یک ریتم پیوسته در فضای عمودی، تمام متن را در یک شبکه ثابت نگه میدارد، به طوری که تناسب و تعادل در سراسر صفحه حفظ میشود، صرف نظر از اندازه نوع، پیشرو یا اندازه.
برای حفظ یک ریتم عمودی در CSS، می خواهید فاصله بین عناصر و فاصله خطوط (پیشرو) برابر با اندازه شبکه پایه باشد. به عنوان مثال، فرض کنید از یک شبکه پایه 15 پیکسلی استفاده می کنید، به این معنی که بین هر خط پایه 15 پیکسل وجود دارد. فاصله خطوط 15px و فاصله بین هر پاراگراف نیز 15px خواهد بود. به عنوان مثال:
body {
font-family: Helvetica, sans-serif;
font-size: 12px;
line-height: 15px;
}p {
margin-bottom: 15px;
}
این اجازه می دهد تا هر عنصر پاراگراف با شبکه تراز شود و ریتم عمودی متن را حفظ کند.
5. Widows And Orphans
Widows یک خط کوتاه یا تک کلمه در انتهای یک پاراگراف است. Orphans کلمه یا خط کوتاهی در ابتدا یا انتهای یک ستون است که از بقیه پاراگراف جدا شده است. ویدوز ها و اورفانز پارچه های ناجور ایجاد می کنند، چشم خواننده را قطع می کنند و خوانایی را تحت تأثیر قرار می دهند. می توان با تنظیم اندازه نوع، پیشرو، اندازه گیری، فاصله بین کلمات، فاصله حروف یا با وارد کردن خطوط دستی از آنها اجتناب کرد.
متأسفانه، هیچ راه آسانی برای جلوگیری از آنها در تایپوگرافیک با CSS وجود ندارد. یکی از راههای حذف آنها در بالا ذکر شد، اما یک پلاگین جی کوئری به نام jQWidon’t نیز وجود دارد که بین دو کلمه آخر یک عنصر فاصلهای بدون شکستگی قرار میدهد.
6. تاکید
تاکید بر یک کلمه بدون وقفه در خواندن مهم است. کج به طور گسترده ای به عنوان شکل ایده آل تاکید در نظر گرفته می شود. برخی دیگر از اشکال رایج تاکید عبارتند از: پررنگ، حروف، حروف کوچک، اندازه تایپ، رنگ، زیر خط یا حروف متفاوت. مهم نیست که کدام را انتخاب می کنید، سعی کنید خود را به استفاده از یکی محدود کنید. ترکیباتی مانند کلاهک-پررنگ-مورب مخرب هستند و ظاهری ناشیانه دارند.
در اینجا چند روش متفاوت برای ایجاد تاکید با CSS وجود دارد:
span {
font-style: italic;
}
h1 {
font-weight: bold;
}
h2 {
text-transform: uppercase;
}
b {
font-variant: small-caps;
}
به خاطر داشته باشید که سبک نوع فونت فقط در صورتی کار می کند که فونت از نوع با حروف کوچک پشتیبانی کند.
7. مقیاس
همیشه با یک مقیاس بنویسید، چه مقیاس سنتی توسعه یافته در قرن شانزدهم که همه ما با آن آشنا هستیم، چه مقیاسی که خودتان ایجاد می کنید. مقیاس مهم است زیرا یک سلسله مراتب تایپوگرافی را ایجاد می کند که خوانایی را بهبود می بخشد و هماهنگی و انسجام را در متن ایجاد می کند.
نمونه ای از مقیاس تایپوگرافی تعریف شده در CSS:
h1 {
font-size: 48px;
}
h2 {
font-size: 36px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 21px;
}
h5 {
font-size: 18px;
}
h6 {
font-size: 16px;
}
p {
font-size: 14px;
}
8. راگ های تمیز
هنگام تنظیم یک بلوک از متن غیرقابل توجیه با تراز چپ یا راست، مطمئن شوید که راگ (سمت ناهموار) را بدون هیچ گونه “سوراخ” ناگهانی یا اشکال نامناسب متعادل نگه دارید. یک راگ بد می تواند برای چشم ناراحت کننده باشد و حواس خواننده را پرت کند. یک راگ خوب ناهمواری “نرم” دارد، بدون هیچ خطی که خیلی بلند یا خیلی کوتاه باشد. هیچ راهی برای کنترل این در CSS وجود ندارد، بنابراین برای دستیابی به یک راگ خوب باید تنظیمات دستی را در بلوک متن انجام دهید.
خط فاصله نیز می تواند به تولید راگ های تمیز کمک کند، اما متأسفانه CSS در حال حاضر نمی تواند از عهده این کار برآید. شاید در آینده نزدیک شاهد کنترل در CSS 3 باشیم. برخی از راه حل های سمت سرور و مشتری برای خط خطی خودکار مانند phpHyphenator و Hyphenator و همچنین ژنراتورهای آنلاین وجود دارد.
Hyphenator.js یک کتابخانه جاوا اسکریپت است که یک خط خطی خودکار در سمت مشتری صفحات وب را پیاده سازی می کند.
سخن آخر در تایپوگرافی:
اگر تمایل دارید برای شرکت خود اقدام به طراحی سایت کنید پیشنهاد می کنم ابتدا مقالات مربوط به تفاوت طراحی سایت فروشگاهی و طراحی سایت شرکتی را مطالعه کنید. همچنین صفحه خدمات طراحی سایت نیکداد را برای این کار نگاه کنید. شرکت نیکداد بهترین و با کیفیت ترین خدمات طراحی سایت را در قالب طراحی سایت ارزان و مقرون به صرفه به شما ارائه می کند.
همچنین سئو سایت برای موتورهای جست و جو و تبلیغات گوگل از جمله مهمترین روش ها برای بیشتر دیده شدن سایت شما به حساب می آید. شرکت نیکداد خدمات طراحی سایت تهران ،تبلیغات گوگل و سئوسایت را با مناسب ترین قیمت به شما ارائه می دهد.
