آموزش روشهای تایپوگرافی Responsive

سرفصل ها و درس ها

مقدمه Introduction

• خوش آمدی Welcome

• آنچه باید قبل از تماشای این دوره بدانید What you should know before watching this course

• با استفاده از پرونده های تمرینی Using the exercise files

• با استفاده از چالش ها Using challenges

1. مقایسه و انتخاب فونت های وب 1. Comparing and Choosing Web Fonts

• بررسی اهداف تایپوگرافی و طراحی پاسخگو Exploring the goals of typography and responsive design

• شناسایی قلمهای وب با کیفیت Identifying quality web fonts

• تطابق قلم به تکه های محتوای متن Matching fonts to chunks of text content

• تصمیم گیری بین فونت های خود میزبان و میزبان Deciding between self-hosted and hosted fonts

• درک چگونگی تأثیر قلم های وب بر وزن صفحه Understanding how web fonts affect page weight

2. ایجاد ریتم در سیستم تایپوگرافیک شما 2. Establishing Rhythm in Your Typographic System

• بررسی مقیاس تایپوگرافی و ریتم عمودی Exploring typography scale and vertical rhythm

• اجرای مقیاس مدولار برای ایجاد سلسله مراتب چاپی Implementing a modular scale to create typographic hierarchy

• ریتم عمودی با واحد پایه Vertical rhythm with a base unit

• اندازه نوع خود: پیکسل ها ، ایمیل ها و ریموت ها Sizing your type: Pixels, ems, and rems

• استفاده از واحدهای مشاهده (vh و vw) در تایپوگرافی Applying viewport units (vh and vw) to typography

• استفاده و انتخاب مقیاس چاپی ما Applying and choosing our typographic scale

• چالش: مقیاسی متفاوت را انتخاب و اعمال کنید Challenge: Select and apply a different scale

• راه حل: مقیاسی متفاوت را انتخاب و اعمال کنید Solution: Select and apply a different scale

3. ایجاد صفحات نمونه اولیه 3. Creating Type Prototype Pages

• تنظیم و پر کردن صفحات نمونه اولیه Setting up and populating prototype pages

• نوع تست در مرورگرها و دستگاه ها Testing type across browsers and devices

• ایجاد پشته فونت Establishing the font stack

• چالش: یک پشته فونت ایجاد کنید Challenge: Create a font stack

• راه حل: یک پشته فونت ایجاد کنید Solution: Create a font stack

4. تنظیم نوع خوانایی در اندازه صفحه 4. Setting Type for Readability Across Screen Sizes

• حفظ طول خط برای خواندن راحت در اندازه صفحه نمایش Maintaining line lengths for comfortable reading across screen sizes

• استفاده از پرس و جوهای رسانه ای برای تعیین نقاط عطف تایپوگرافی طبیعی Using media queries to set natural typographic breakpoints

• شکست خط کنترل برای عناوین Controlling line breaks for headings

• مدیریت فلاش های متن غیرقابل استفاده (FOUT) با استفاده از رویدادهای قلم وب Managing flashes of unstyled text (FOUT) using web font events

• چالش: رسیدگی به رویدادهای فونت وب خود Challenge: Handling your own web font events

• راه حل: رسیدگی به رویدادهای فونت وب خود Solution: Handling your own web font events

5- ابزارها و اسکریپت های آنلاین مفید 5. Helpful Online Tools and Scripts

• پیش نمایش گزینه های نوع وب با برنامه typecast Previewing web type choices with the Typecast app

• ابزاری برای پیش نمایش نوع و سؤالات رسانه ای: ish ، Edge Inspect و موارد دیگر Tools for previewing type and media queries: ish., Edge Inspect, and more

• ابزارهایی برای کنترل پویا نوع با JavaScript و jQuery Tools for controlling type dynamically with JavaScript and jQuery

نتیجه Conclusion

• مراحل بعدی: آینده تایپوگرافی پاسخگو Next steps: The future of responsive typography