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

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

مقدمه Introduction

• خوش آمدی Welcome

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

• چیزهایی که باید قبل از شروع این دوره در نظر بگیرید Things to consider before starting this course

1. استفاده از قلم ها برای ارتباط معنی یک کلمه یا عنوان 1. Using Fonts to Communicate the Meaning of a Word or Headline

• درک چگونگی تایپوگرافی خوب خواندن را ارتقا می دهد Understanding how good typography promotes reading

• درک خوانایی Understanding legibility

• درک چگونگی انتقال فونتها به معنی Understanding how fonts convey meaning

• انتخاب قلمهای وب ایمن برای انتقال معنی Choosing web-safe fonts to convey meaning

• استفاده از اندازه ، قلم ، سبک ، فاصله نامه ، وزن و رنگ برای انتقال معنی Using font size, case, style, letter spacing, weight, and color to convey meaning

• انتخاب قلمهای وب برای انتقال معنی Choosing web fonts to convey meaning

• بارگیری فونت های وب Downloading web fonts

• اعمال فونت های وب در CSS با @ font-face Applying web fonts in CSS with @font-face

2. استفاده از فونت ها برای متن 2. Using Fonts for Text

• انتخاب یک فونت وب امن برای استفاده در متن Choosing a web-safe font for use in text

• اعمال قلم وب امن روی متن و عنوان Applying the web-safe font to the text and the heading

• تنظیم یک کلاس برای عناوین منابع در متن Setting a class for the resource titles in the text

• انتخاب یک فونت وب امن برای عنوان Choosing a second web-safe font for the heading

• اعمال فونت دوم در عنوان Applying the second font to the heading

• انتخاب یک فونت وب از APP قلم گوگل برای استفاده در متن Choosing a web font from the Google Font API for use in text

• افزودن و استفاده از نحوی Google Font API Adding and applying the Google Font API syntax

• انتخاب یک فونت وب دوم از APT فونت گوگل برای عنوان Choosing a second web font from the Google Font API for the heading

• افزودن و اعمال فونت دوم به عنوان Adding and applying the second font to the heading

• تجزیه و تحلیل قلم ها در برخی سایت های حرفه ای Analyzing the fonts on some professional sites

3. به حداکثر رساندن خوانایی 3. Maximizing Readability

• درک چگونگی خواندن ما Understanding how we read

• اندازه و ارتفاع خط را پیدا کنید و استفاده کنید Finding and applying a good font size and line height

• طول خط مناسب را پیدا کنید و استفاده کنید Finding and applying a good line length

• درک ام.ام. Understanding ems

• با استفاده از ایمیل برای تعیین اندازه فونت Using ems to set font size

• با استفاده از ایمیل برای تعیین طول خط Using ems to set line length

• درک چگونگی رنگ بر خوانایی تأثیر می گذارد Understanding how color affects readability

• بهبود یک پالت رنگ با بهبود کنتراست Improving a color palette by improving contrast

• بهبود پالت رنگ با کاهش لرزش نوری Improving a color palette by reducing optical vibration

• تجزیه و تحلیل خوانایی متن در سایت های حرفه ای Analyzing text readability on the professional sites

4- متن بصری Chunking 4. Visually Chunking Text

• درک اینکه چگونه عناصر بصری را "تکه" می کنیم Understanding how we "chunk" visual elements

• توسعه سیستم سلسله مراتبی Developing a system of hierarchy

• اعمال سلسله مراتب در HTML و CSS Applying hierarchy in HTML and CSS

• ایجاد سیستمی برای کمک به متن متن برای خوانندگان Developing a system to help chunk text for readers

• استفاده از سیستم در CSS Applying the system in the CSS

• تغییر یک عنصر با ایجاد و استفاده از کلاس Changing an element by creating and applying a class

• استفاده از چند ستون برای ایجاد سلسله مراتب Using multiple columns to create hierarchy

• ساختن یک سیستم دو ستونی در HTML و CSS Building a two-column system in HTML and CSS

• پالایش فضای افقی در یک طرح دو ستونی Refining the horizontal space in a two-column layout

• اضافه کردن خطوط قانون برای بهبود chunking Adding rule lines to improve chunking

• تأکید در یک عنوان Adding emphasis within a heading

• تجزیه و تحلیل chunking در سایت های حرفه ای Analyzing the chunking on the professional sites

5. شکل دادن به صفحه با استفاده از تایپوگرافی 5. Shaping a Page Using Typography

• آشنایی با صفحات کلاسیک و مدرنیستی Understanding classic and modernist typographic pages

• درک نحوه ایجاد ریتم و تنش Understanding how to create rhythm and tension

• استفاده از مهارت های تایپوگرافی هنگام تصمیم گیری در مورد طراحی Applying typography skills when making design decisions

6. شکل دادن به یک صفحه معمولی تایپی 6. Shaping a Traditional Typographic Page

• طراحی پیوندهای چاپی برای صفحه سنتی Designing typographic links for the traditional page

• افزودن لیست پیوندها به صفحه سنتی Adding a list of links to the traditional page

• توصیف حالتهای لینک در CSS Describing the link states in CSS

• بازگشت به پیوندها به سبک اصلی "ناظر" آنها Returning links to their original "unvisited" style

• استفاده از CSS مختلف برای انواع مختلف پیوند Using different CSS for different kinds of links

• استفاده از نماد CSS برای سازماندهی نحو Using CSS notation to organize syntax

• انتخاب یک رنگ یا تصویر پس زمینه Choosing a background color or image

• با استفاده از یک تصویر پس زمینه تکرار شونده Applying a repeating background image

• شکل دادن به صفحه سنتی طرح Shaping the traditional page layout

• تجزیه و تحلیل عناصر چاپی سنتی در سایت های حرفه ای Analyzing the traditional typographic elements on the professional sites

7. شکل دادن به یک صفحه چاپی نوین 7. Shaping a Modernist Typographic Page

• طراحی پیوندهای چاپی برای صفحه مدرنیستی Designing typographic links for the modernist page

• تهیه لیست پیوندها در طول صفحه Making a list of links run across the page

• افزودن و حذف فضای بین پیوندهای ناوبری Adding and removing space between the navigation links

• پیوندهای درون خطی در صفحه مدرنیستی قرار دهید Styling the inline links on the modernist page

• انتخاب یک رنگ یا تصویر پس زمینه برای کتابشناسی مدرن Choosing a background color or image for the modernist bibliography

• با استفاده از یک تصویر پس زمینه بدون تکرار Applying a no-repeat background image

• طرح بندی صفحه مدرنیست ها Shaping the modernist page layout

• تجزیه و تحلیل عناصر تایپوگرافی مدرنیستی در سایت های حرفه ای Analyzing the modernist typographic elements on the professional sites

8. حضور در جزئیات تایپوگرافی 8. Attending to the Typographic Details

• رفع علامت های نقل قول و رسولان Fixing quotation marks and apostrophes

• رفع خطوط Fixing dashes

• کار با چهره های شماره گذاری (اعداد) و کلمات اختصاری Working with lining figures (numbers) and acronyms

• رفع کاراکترهایی که درست به نظر نمی رسند Fixing characters that don't look right

• حلق آویز Hanging punctuation

• اعمال لهجه های تایپی Applying typographic accents

• متن به صورت عمودی محور است Vertically centering text

• ایجاد درپوش قطره ای Creating drop caps

• تجزیه و تحلیل جزئیات تایپی در سایت های حرفه ای Analyzing the typographic details on the professional sites

نتیجه Conclusion

• منابع اضافی Additional resources