آموزش تایپوگرافی برای طراحان وب

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

عنوان اصلی : Typography for Web Designers

سرفصل ها :

معرفی
خوش آمدی
با استفاده از فایل های تمرین
نکاتی که باید قبل از شروع این دوره در نظر بگیرید
1. استفاده از فونت ها برای انتقال معنای یک کلمه یا عنوان
درک اینکه چگونه تایپوگرافی خوب باعث ترویج خواندن می شود
درک خوانایی
درک اینکه فونت ها چگونه معنا را منتقل می کنند
انتخاب فونت های ایمن وب برای انتقال معنی
استفاده از اندازه قلم، حروف، سبک، فاصله حروف، وزن و رنگ برای انتقال معنی
انتخاب فونت های وب برای انتقال معنی
دانلود فونت های وب
استفاده از فونت های وب در CSS با @font-face
2. استفاده از فونت برای متن
انتخاب فونت ایمن وب برای استفاده در متن
اعمال فونت وب ایمن بر روی متن و عنوان
تنظیم یک کلاس برای عنوان منابع در متن
انتخاب یک فونت امن وب دوم برای عنوان
اعمال فونت دوم روی عنوان
انتخاب یک فونت وب از Google Font API برای استفاده در متن
افزودن و اعمال دستور Google Font API
انتخاب یک فونت وب دوم از Google Font API برای عنوان
افزودن و اعمال فونت دوم به عنوان
تجزیه و تحلیل فونت در برخی از سایت های حرفه ای
3. به حداکثر رساندن خوانایی
درک نحوه خواندن
یافتن و اعمال اندازه فونت و ارتفاع خط خوب
یافتن و اعمال طول خط خوب
درک ems
استفاده از ems برای تنظیم اندازه فونت
استفاده از ems برای تنظیم طول خط
درک چگونگی تأثیر رنگ بر خوانایی
بهبود پالت رنگ با بهبود کنتراست
بهبود پالت رنگ با کاهش لرزش نوری
تجزیه و تحلیل خوانایی متن در سایت های حرفه ای
4. بصری قطعه قطعه کردن متن
درک اینکه چگونه عناصر بصری را "تکه" می کنیم
توسعه یک سیستم سلسله مراتبی
اعمال سلسله مراتب در HTML و CSS
توسعه سیستمی برای کمک به تکه تکه شدن متن برای خوانندگان
استفاده از سیستم در CSS
تغییر یک عنصر با ایجاد و اعمال یک کلاس
استفاده از چندین ستون برای ایجاد سلسله مراتب
ساخت یک سیستم دو ستونی در HTML و CSS
اصلاح فضای افقی در یک طرح دو ستونی
افزودن خطوط قانون برای بهبود انقباض
اضافه کردن تاکید در یک عنوان
تجزیه و تحلیل chunking در سایت های حرفه ای
5. شکل دادن به صفحه با استفاده از تایپوگرافی
آشنایی با صفحات تایپوگرافی کلاسیک و مدرن
درک چگونگی ایجاد ریتم و تنش
استفاده از مهارت های تایپوگرافی هنگام تصمیم گیری در مورد طراحی
6. شکل دادن به یک صفحه تایپوگرافی سنتی
طراحی لینک های تایپوگرافی برای صفحه سنتی
افزودن لیستی از پیوندها به صفحه سنتی
توصیف وضعیت های پیوند در CSS
بازگشت پیوندها به سبک اصلی "بازدید نشده".
استفاده از CSS های مختلف برای انواع مختلف لینک ها
استفاده از نماد CSS برای سازماندهی نحو
انتخاب رنگ یا تصویر پس زمینه
اعمال یک تصویر پس زمینه تکراری
شکل دادن به صفحه آرایی سنتی
تجزیه و تحلیل عناصر تایپوگرافی سنتی در سایت های حرفه ای
7. شکل دادن به یک صفحه تایپوگرافی مدرنیستی
طراحی لینک های تایپوگرافی برای صفحه مدرنیستی
ایجاد لیستی از پیوندهای اجرا شده در سراسر صفحه
افزودن و حذف فضای بین پیوندهای ناوبری
شکل دادن به پیوندهای درون خطی در صفحه مدرنیستی
انتخاب رنگ پس زمینه یا تصویر برای کتابشناسی مدرنیستی
اعمال یک تصویر پس زمینه بدون تکرار
شکل دادن به صفحه آرایی مدرنیستی
تجزیه و تحلیل عناصر تایپوگرافی مدرنیستی در سایت های حرفه ای
8. توجه به جزئیات تایپوگرافی
رفع گیومه و آپاستروف
رفع خط تیره
کار با شکل های آستر (اعداد) و کلمات اختصاری
اصلاح کاراکترهایی که درست به نظر نمی رسند
نشانه گذاری آویزان
استفاده از لهجه‌های تایپی
وسط عمودی متن
ایجاد دراپ کلاه
تجزیه و تحلیل جزئیات تایپوگرافی در سایت های حرفه ای
نتیجه
منابع اضافی