دوباره خوش آمد میگم
بیاید شروع کنیم با احتمالاً مهم‌ترین
جزءِ طراحی که همون تایپوگرافیه
و این قراره درسی باشه که بیشترین قانون‌ها رو داره
پس بریم که سریع شروع کنیم
و این درس رو شروع می‌کنیم
با دو مفهومی که باید بدونین
قبل از اینکه وارد قوانین تایپوگرافی بشیم
اولینش اینه که اصلاً تایپوگرافی چی هست
خب طبق تعریف ویکی‌پدیا
«تایپوگرافی هنر و فن چیدمان حروفه
برای اینکه زبان نوشتاری خوانا قابل‌فهم
و همینطور از نظر بصری جذاب باشه»
یا به زبون ساده تایپوگرافی یعنی اینکه
متن رو زیبا و راحت‌خون کنیم
حالا باید در مورد تایپ‌فیس‌های Serif و Sans-serif حرف بزنیم
من قبلاً یکم این اصطلاحات رو استفاده کردم
پس Serif و Sans-serif
اما الان وقتشه که واقعاً بفهمیم معنیشون چیه
خب یک تایپ‌فیس Serif این شکلیه
یعنی این جزئیات کوچیک رو داره
مثل همین دُم‌ها در انتهای خطوط
که بهشون می‌گیم Serif
و به همین دلیل هم بهش می‌گن تایپ‌فیس Serif
تایپ‌فیس‌های Serif حالت سنتی‌تر دارن
و بنابراین می‌تونیم ازشون برای ایجاد رابط‌های کاربری
کلاسیک‌تر و سنتی‌تر استفاده کنیم
همچنین باعث می‌شن طراحی حس اعتمادپذیری
به کاربر منتقل کنه
و در نهایت برای متن‌های طولانی هم خوبن
مثلاً توی مقاله یا مجلات آنلاین
خب از اون طرف طبیعتاً
ما تایپ‌فیس‌های Sans-serif رو داریم
یعنی تایپ‌فیس‌هایی که این خط‌های تزئینی رو ندارن
همون Serifهایی که توی تایپ‌فیس‌های Serif هست
و Sans-serif معمولاً خیلی تمیز و ساده دیده می‌شن
پس وقتی ازشون استفاده می‌کنیم
می‌تونیم به هر رابط کاربری یک ظاهر مدرن و به‌روز بدیم
مثل همین مثالی که اینجاست
خب این یه مثال خیلی ساده‌ست
ولی اگه فقط این دو متن در این دو تصویر رو مقایسه کنید
می‌بینید که متن توی تصویر اول
یه ظاهر و حس کاملاً متفاوتی به رابط کاربری می‌ده
انگار یه حس و حال کاملاً دیگه
و یه انرژی متفاوت منتقل می‌کنه
و این همون قدرت تایپ‌فیس‌های Serif
و Sans-serif در عمله
حالا از تجربه خودم می‌گم خیلی راحت‌تره
که یه تایپ‌فیس Sans-serif انتخاب کنی که با حس و حال
و شخصیت یک طراحی بخونه
تا اینکه بخوای یه Serif پیدا کنی
پس به عبارت دیگه برای تازه‌کارها
خیلی راحت‌تره که با Sans-serif کار کنن
این رو یادتون باشه
وقتی شروع به طراحی خودتون می‌کنین
خب حالا بریم سراغ قوانین اصلی
اولین قانون اینه که فقط از تایپ‌فیس‌های خوب و معروف استفاده کنید
و امن بازی کنید
و منظورم از امن بازی کردن
اینه که سراغ فونت‌های عجیب و غریب نرید
معمولاً هیچ‌وقت ایده خوبی نیست
بذارید چندتا مثال بزنم
از تایپ‌فیس‌های Sans-serif
یکی از فونت‌های خیلی خوب که الان خودم خیلی دوست دارم
اسمش Inter هست که این شکلیه
راستی این فونت و همه‌ی فونت‌های دیگه‌ای
که توی این ویدیو بهتون نشون می‌دم موجودن
روی Google Fonts و Font Squirrel
پس این دوتا وبسایت مخصوصاً Google Fonts
بخشی از همون جعبه‌ابزار طراحی ما هستن
جعبه‌ابزار یعنی همونطور که از اسمش پیداست
یه عالمه ابزار مختلف که باید استفاده کنیم
وقتی می‌خوایم برای وب طراحی کنیم
و وقتی توی این بخش جلو می‌ریم
شروع می‌کنیم به پر کردن این جعبه‌ابزارمون اوکی؟
و باز هم همه‌ی این ابزارهای مختلف
یعنی وبسایت‌ها و اپلیکیشن‌های وب مختلف
روی صفحه منابع من لینک شدن
پس خیلی راحت می‌تونید همه ابزارهایی رو
که توی این بخش معرفی می‌کنم پیدا کنید
مستقیم روی وبسایت من توی صفحه منابع
خب بریم سراغ چندتای دیگه
این یکی Open Sans هست
بعدش Roboto Montserrat Work Sans و Lato
این‌ها شش تایپ‌فیس Sans-serif خیلی خوب هستن
که می‌تونید بدون هیچ مشکلی ازشون استفاده کنید
در نگاه اول و برای کسی که حرفه‌ای نیست
این شش تایپ‌فیس ممکنه تقریباً یکسان به نظر برسن
اما باور کنید اصلاً شبیه هم نیستن
اگه این شش فونت مختلف رو یکی‌یکی
روی صفحه‌تون امتحان کنید عملاً
شش تا وبسایت کاملاً متفاوت درست می‌کنید
اما خب اگه دنبال فونت Serif هستید
بذارید شش نمونه فونت Serif رایگان هم نشونتون بدم
آهان یادم رفت بگم
که اون شش تایپ‌فیس Sans-serif
همه‌شون رایگان هستن البته
درست مثل بقیه ابزارهایی که
روی صفحه منابع لیست کردم
خب حالا درباره این فونت‌های Serif ایناهاش
پس Merriweather Aleo Playfair Display.
Cormorant Cardo و Lora
و دوباره احتمالاً همه آن‌ها خیلی شبیه به نظر می‌رسند
اما خب اصلاً مثل هم نیستند
این‌ها حتی بیشتر از هم متفاوت هستند
نسبت به فونت‌های سن‌سریف که قبلاً نشان دادم
حالا خیلی از طراحان تازه‌کار فکر می‌کنند
که باید چندین تایپ‌فیس مختلف را ترکیب کنند
تا یک طراحی زیبا بسازند
اما واقعاً اینطور نیست
پس وقتی تازه شروع می‌کنید
کاملاً اشکالی ندارد که فقط یک تایپ‌فیس در یک صفحه استفاده کنید
و اگر واقعاً حس ماجراجویی دارید
باز هم استفاده از دو تایپ‌فیس کافی است
اگر بیشتر از این استفاده کنید
طراحی شما شروع می‌کند به شبیه شدن به
یک طراحی آماتور و عجیب
اما حالا درباره انتخاب کردن
تایپ‌فیس مناسب برای طراحی‌تان
دوباره باید به شخصیت وب‌سایت خود فکر کنید
پس شخصیت درست برای وب‌سایت خود را انتخاب کنید
و دوباره بعداً بیشتر در این‌باره صحبت می‌کنیم
پس فعلاً درباره شخصیت استرس نداشته باشید
اما این موضوع همچنان مهم است
برای دستوری که الان به شما می‌دهم
پس شما شخصیت را انتخاب می‌کنید
سپس تصمیم می‌گیرید بین یک تایپ‌فیس سریف یا سن‌سریف
و بعد می‌توانید آزمایش کنید
با تمام تایپ‌فیس‌های خوبی که همین الان نشان دادم
و البته نیازی نیست خودتان را فقط به این شش مورد محدود کنید
می‌توانید با خیلی تایپ‌فیس‌های دیگر هم آزمایش کنید
که در Google Fonts موجود هستند
پس بر اساس این آزمایش‌ها
می‌توانید ببینید کدام تایپ‌فیس بهتر است
برای انتقال پیام وب‌سایت شما
و البته برای یک مبتدی
این کار چندان ساده نیست
اما باور کنید با تجربه
این موضوع به‌طور طبیعی برایتان پیش می‌آید
در نهایت البته
می‌توانید همچنان تایپ‌فیس‌های مختلف را امتحان کنید
وقتی که در حال طراحی و ساخت صفحه هستید
پس لازم نیست از همان ابتدا فقط یکی را انتخاب کنید
می‌توانید فقط با یکی شروع کنید
و بعد وقتی در وسط فرآیند طراحی هستید
می‌توانید یکی دیگر انتخاب کنید
و خیلی وقت‌ها واقعاً همین کاری است که من می‌کنم
چون وقتی محتوای بیشتری در صفحه دارم
آن موقع واضح‌تر می‌شود و راحت‌تر می‌توان دید
کدام تایپ‌فیس بیشتر با پیام وب‌سایت هماهنگ است
خب این‌ها قوانین پایه‌ای هستند
برای اینکه چطور تایپ‌فیس‌های خوب انتخاب کنیم
اما حالا باید سایز و وزن فونت‌های خوبی هم انتخاب کنیم
پس ببینیم چطور
پس وقتی می‌خواهید سایز فونت انتخاب کنید
باید انتخاب‌هایتان را محدود کنید تا کارتان راحت‌تر شود
برای این کار می‌توانید از ابزار type scale
یا یک محدوده از پیش تعریف‌شده سایز فونت استفاده کنید
چون اگر این کار را کنید
دیگر لازم نیست مدام فکر کنید
که چه مقدار سایز فونت انتخاب کنید
و در واقع ما این کار را در پروژه بزرگ دوره انجام خواهیم داد
و حتی در پروژه همین بخش هم خواهیم داشت
حالا با این مقدمه
بیایید درباره چند راهنما صحبت کنیم
برای مقادیر واقعی سایز فونت در بخش‌های مختلف وب‌سایت
پس برای متن معمولی
باید از سایز فونت بین 16 تا 32 پیکسل استفاده کنید
پس در این مثال از این صفحه
مثلاً بخش ناوبری 16 پیکسل است
و این متن کوچک‌تر در پایین 18 پیکسل است
درسته؟
و اتفاقاً این یک لیست طولانی از راهنماها خواهد بود
مثل همین
پس حتماً این اسلایدها را پرینت کنید
تا بعداً وقتی خودتان طراحی می‌کنید راحت‌تر دنبال کنید
وقتی خودتان طراحی می‌کنید
اما به‌هرحال برای متن‌های طولانی
می‌توانید سایز فونت 20 پیکسل یا حتی بزرگ‌تر استفاده کنید
چون اگر کاربر لازم باشد چیزی مثل یک پست وبلاگ بخواند
خیلی راحت‌تر خواهد بود
اگر متن کمی بزرگ‌تر باشد
مثلاً این متن پایین در مثال
که این بخش را توصیف می‌کند 20 پیکسل است
همچنین این متن بالا
که شرکت را توصیف می‌کند 24 پیکسل است
و این متن پایین 32 پیکسل است
که می‌توانیم واقعاً آن را هم به‌عنوان متن معمولی در نظر بگیریم
پس دوباره در محدوده قانون پنجم قرار دارد
یعنی بین 16 تا 32 پیکسل
و البته این فقط یک مثال کوچک است
در بین هزاران طراحی وب دیگر
اما فقط می‌خواهم به شما حسی بدهم
از نوع مقادیری که می‌توانیم در طراحی‌ها استفاده کنیم
اما به‌هرحال برای تیترهای بزرگ
واقعاً می‌توانید سایز فونت را خیلی بزرگ بگیرید
مثل حتی بیشتر از 50 پیکسل
و می‌توانید آن‌ها را خیلی بولد کنید مثلاً بیشتر از 600
و ما هنوز درباره این مقادیر بولد یاد نگرفته‌ایم
اما یاد خواهیم گرفت شاید در جلسه بعدی
یا شاید در پروژه بزرگ دوره
پس تیتر این طراحی دارای سایز فونت 85 پیکسل است
و همچنین بسیار بولد با وزن 700 می‌باشد
همچنین این تیتر دیگر که کمی کوچک‌تر است
دارای سایز 64 پیکسل و همچنان بسیار بولد با وزن 700 است
حالا و همچنین ما اینجا 42 پیکسل داریم
در متن نظرات کاربران
حالا قانون نهایی درباره استفاده از سایز و وزن مناسب فونت
استفاده از وزنی است که کمتر از 400 نباشد
چون اگر کمتر از 400 باشد متن سبک یا خیلی سبک خواهد بود
و خواندن آن سخت خواهد شد
پس فقط از 400 کمتر نروید
که اساساً همان وزن فونت معمولی است
حالا بعدی بیایید چند راهنمایی و قانون یاد بگیریم
برای ایجاد تجربه خواندن خوب برای کاربران شما
که به یاد داشته باشید یکی از جنبه‌های تایپوگرافی است
یادتان هست؟
پس برای شروع باید سعی کنید از
کمتر از 75 کاراکتر در هر خط استفاده کنید مثل این مثال
پس این خطوط اینجا چیزی بین
65 تا 72 کاراکتر دارند
که این متن را بسیار آسان برای خواندن می‌کند
اما اگر این قانون را نقض کنید
ممکن است چیزی شبیه به این ایجاد کنید
که واقعاً برای چشم‌ها سخت خوانده می‌شود
پس در اینجا خطوط بین 95 تا 112 کاراکتر دارند
و اگر واقعاً تلاش کنید آن را بخوانید
کمی دشوار است که چنین خط طولانی را دنبال کنید
بعد برای متنی با سایز معمولی
سعی کنید ارتفاع خط بین 15 تا 2 باشد
حالا اگر متن واقعاً بزرگ باشد مثل تیتر
می‌توانید کمتر از 15 بروید و حتی واقعاً کم کنید
چیزی مانند 11 یا 12
پس یک قانون سرانگشتی خوب که باید در ذهن داشته باشید این است که
هر چه متن کوچک‌تر یا طولانی‌تر باشد
ارتفاع خط بزرگ‌تر باید باشد
پس در اینجا چند مثال خوانا داریم
با تیتر بزرگ که تنها 12 است
سپس با کوچک‌تر شدن متن 131 داریم
و بعد متن طولانی 15 دارد
حالا اگر از ارتفاع خط بیش از حد استفاده کنید مثل این
متن دوباره سخت خوانده می‌شود
پس ما تجربه خواندن بد برای کاربران ایجاد می‌کنیم
چون این خطوط کمی از هم جدا به نظر می‌رسند
و در نتیجه چشم‌هایمان دشواری دارند
که از یک خط به خط بعدی بروند هنگام خواندن متن
حالا یک قانون ظریف و خوب دیگر
که می‌تواند تفاوت زیادی ایجاد کند این است که
اگر تیتر شما کمی غیرطبیعی به نظر می‌رسد
می‌توانید فاصله حروف را کاهش دهید
حالا غیرطبیعی بودن واقعاً یعنی چه
طبیعتاً با تجربه مشخص می‌شود
اما من چند مثال همین حالا به شما نشان می‌دهم
و همچنین در ادامه دوره
پس در این تیتر برای مثال
فاصله حروف منفی 35 پیکسل است
و اگر از من بپرسید این کاملاً زیبا و طبیعی به نظر می‌رسد
در حالی که اگر صفر پیکسل بود
پس اساساً بدون تعیین فاصله حروف
حروف کمی از هم جدا به نظر می‌رسیدند
بعد یک چیز دیگر که می‌توانید امتحان کنید
و در بین طراحان واقعاً محبوب است
استفاده از حروف بزرگ (All Caps) برای عناوین کوتاه است
حالا اگر این کار را انجام دهید باید همچنین
این عنوان را کوچک و بولد کنید
و فاصله حروف را افزایش دهید
مثل کاری که این رابط کاربری انجام می‌دهد
پس اساساً یک تیتر اصلی داریم اینجا
و بعد یک زیرعنوان داریم
که آن تیتر را توضیح می‌دهد
و آن است که از حروف بزرگ و بولد و فاصله زیاد استفاده می‌کند
و بدون انجام این کارها ساده به این شکل به نظر می‌رسید
که اگر از من بپرسید کمی کسل‌کننده‌تر است
و ما تقریباً به پایان رسیدیم
پس کمی صبور باشید
پس معمولاً در وب هرگز متن را justify نمی‌کنیم
پس این نوعی عرف است
که اساساً هیچ وب‌سایتی متن خود را justify نمی‌کند
و بنابراین شما هم باید از این عرف پیروی کنید
پس متن را مرکز قرار ندادن این‌گونه است
که دقیقاً همان چیزی است که ما در
خواندن یک پست وبلاگی در وب استفاده می‌کنیم
در حالی که از طرف دیگر مطمئنم به دیدن
متن به این شکل در وب عادت ندارید درست است؟
و بنابراین اگر می‌خواستید صفحه‌ای شبیه به این طراحی کنید
این کاملاً غیرطبیعی به نظر می‌رسید
حالا درباره تراز کردن متن نیز
معمولاً نباید متن را وسط چین کنید
مگر اینکه درباره بلوک‌های متن واقعاً کوچک صحبت کنیم
پس می‌توانید متن را این‌گونه رها کنید
چپ‌چین باشد و نه مثل این وسط چین
چون یک بار دیگر این واقعاً خواندن متن را سخت‌تر می‌کند
وقتی باید از یک خط به خط بعدی بروید
خب پس این‌ها درباره راهنماها و قوانین تایپوگرافی بود
حالا البته قوانین زیادی اینجا وجود دارد
و ما نمی‌توانیم همیشه همه آن‌ها را در تمام طراحی‌ها رعایت کنیم
و به همین دلیل است که بیشتر به صورت راهنما هستند
و نه قوانین سخت و الزام‌آور
باشه؟
حالا چیزی که اینجا به آن اشاره نکردم
این است که ما باید مراقب باشیم
رنگ متن‌مان نیز باشد
اما در واقع این را برای درس بعدی می‌گذاریم
وقتی که همه چیز درباره رنگ‌ها را بررسی می‌کنیم
اما حالا بیایید به طور عملی پیش برویم و
برخی از این راهنماها را در عمل اجرا کنیم
در پروژه این بخش
امیدوارم به زودی شما را آنجا ببینم