تایپوگرافی اصولی در وب

29
www.siamak.us sia_mac Front–End Engineer & Web/Mobile Designer. Siamak Mokhtari وب در اﺻﻮﻟﯽ ﺗﺎﯾﭙـﻮﮔﺮاﻓﯽ

Upload: web-standards-school

Post on 23-Jan-2017

629 views

Category:

Education


3 download

TRANSCRIPT

Page 1: تایپوگرافی اصولی در وب

www.siamak.ussia_mac

Front–End Engineer & Web/Mobile Designer.

Siamak Mokhtari

تایپـوگرافی اصولی در وب

Page 2: تایپوگرافی اصولی در وب

تایپـوگرافیTYPOGRAPHY

Page 3: تایپوگرافی اصولی در وب

siamak.us sia_mac@

تایپـوگرافی تعریف واحد ندارد!

تایپوگرافی یک هنر است؛ هنر تغییر عناصر متن و پاراگراف بندی.

Page 4: تایپوگرافی اصولی در وب

siamak.us sia_mac@

در آن نفس که بمیرم در آرزوی تو باشمدر آن نفس که بمیرم در آرزوی تو باشمدر آن نفس که بمیرم در آرزوی تو باشم

خوشنویسی نوعی تایپـوگرافی است!

Page 5: تایپوگرافی اصولی در وب

siamak.us sia_mac@

نیمی از تایپـوگرافی خوب از فونت خوب

او در جریان تنش‌های پیش از فروپاشی دیوار برلین در سال ۱۹۸۹ یکی از شهروندان سرشناس

شهر الیپزیگ بود و فعاالنه در جلوگیری از خونین شدن اعتراض‌ها در این شهر شرقی آلمان نقش داشت. دیوار برلین چند هفته پس از آن

حوادث فرو ریخت.

او در جریان تنشهاي پیش از فروپاشی دیوار برلین در سال 1989 یکی از شهروندان سرشناس شهر لایپزیگ بود و فعالانه در جلوگیري

از خونین شدن اعتراضها در این شهر شرقی آلمان نقش داشت. دیوار برلین چند هفته پس از آن حوادث فرو ریخت.

Page 6: تایپوگرافی اصولی در وب

siamak.us sia_mac@

نیم دیگری از تایپـوگرافی خوب، ساختار خوب

او در جریان تنش‌های پیش از فروپاشی دیوار برلین در سال ۱۹۸۹ یکی از شهروندان سرشناس شهر الیپزیگ بود و فعاالنه در

جلوگیری از خونین شدن اعتراض‌ها در این شهر شرقی آلمان نقش داشت. دیوار برلین چند هفته پس از آن حوادث فرو ریخت.

او در جریان تنش‌های پیش از فروپاشی دیوار برلین در سال ۱۹۸۹ یکی از شهروندان سرشناس شهر الیپزیگ بود و فعاالنه در

جلوگیری از خونین شدن اعتراض‌ها در این شهر شرقی آلمان نقش داشت. دیوار برلین چند هفته پس از آن حوادث فرو ریخت.

Page 7: تایپوگرافی اصولی در وب

siamak.us sia_mac@

تایپـوگرافی خوب، بهشت است!

کورت مازور که موسیقی را در شهر الیپزیگ آلمان آموخته بود نقش مهمی در جنبش صلح‌آمیز یکپارچه شدن آلمان شرقی و

غربی داشت

Page 8: تایپوگرافی اصولی در وب

siamak.us sia_mac@

تایپـوگرافی خوب، بهشت است!

کورت مازور که موسیقی را در شهر الیپزیگ آلمان آموخته بود نقش مهمی در جنبش صلح‌آمیز یکپارچه شدن آلمان شرقی و

غربی داشت

Page 9: تایپوگرافی اصولی در وب

siamak.us sia_mac@

تایپـوگرافی خوب، بهشت است!

کورت مازور که موسیقی را در شهر الیپزیگ آلمان آموخته بود نقش مهمی در جنبش صلح‌آمیز یکپارچه شدن آلمان شرقی و

غربی داشت

Page 10: تایپوگرافی اصولی در وب

siamak.us sia_mac@

تایپـوگرافی خوب، بهشت است!

کورت مازور که موسیقی را در شهر الیپزیگ آلمان آموخته بود نقش مهمی در جنبش صلح‌آمیز یکپارچه شدن آلمان شرقی و غربی داشت

Page 11: تایپوگرافی اصولی در وب

siamak.us sia_mac@

تایپـوگرافی خوب، بهشت است!

کورت مازور که موسیقی را در شهر الیپزیگ آلمان آموخته بود نقش مهمی در جنبش صلح‌آمیز یکپارچه شدن آلمان شرقی و غربی داشت.

Page 12: تایپوگرافی اصولی در وب

خانواده قلمFont Family

Page 13: تایپوگرافی اصولی در وب

siamak.us sia_mac@

دنیای وبفونت در وب فارسی

Page 14: تایپوگرافی اصولی در وب

siamak.us sia_mac@

وبفونت کم،کیفیت پایین

× Auto–Kerning

آگاهآگاه

Page 15: تایپوگرافی اصولی در وب

siamak.us sia_mac@

وبفونت کم،کیفیت پایین

× Anti-Aliasing “Rendering“

Page 16: تایپوگرافی اصولی در وب

siamak.us sia_mac@

توصیه میشوند

ایران سنسسریف؛ قلمی مدرن و ماشینی

ایران‌شارپ؛ فونتی برای متون فارسیایران؛ فونتی با حال و هوای فونت های رایج فارسی

میترا «نسخه تصحیح شده»؛ فونتی آشنا و زیبا

Page 17: تایپوگرافی اصولی در وب

siamak.us sia_mac@

دو نکتهای که کم دیده میشوند!

| از وزن‌های مختلف فونت استفاده کنیم || قواعد نگارشی زبان‌فارسی را رعایت کنیم |

Page 18: تایپوگرافی اصولی در وب

siamak.us sia_mac@

فارسی با عربی فرق دارد!

کورت مازور که موسیقی را در شهر الیپزیگ آلمان آموخته بود نقش مهمی در جنبش صلح‌آمیز یکپارچه شدن آلمان شرقی و غربی داشت.

۱۲۳۴۵۶۷۸۹۰

كورت مازور كه موسيقي را رد شهر اليبزيك آلمان آموخته بود نقش مهمي در جنبش صلح آميز يكبارجه شدن آلمان شرقي و غربي داشت.

١٢٣٤٥٦٧٨٩٠

عربـی فارسـی

Page 19: تایپوگرافی اصولی در وب

نسبتRatio

Page 20: تایپوگرافی اصولی در وب

siamak.us sia_mac@

باغ بزرگ، درخت گیالس

درخت‌هایی که در باغ بزرگ پرورش پیدا می‌کنند، توانایی تولید ۴ ُتن گیالس را در یک‌سال دارند. این یک قانون کلی است.

این گیاه احتماال از منطقه‌ای بین دریای سیاه و دریای خزر منشا گرفته است. ولی به نظر می‌رسد که در زمان‌های قدیم آن را به اروپا برده باشند. بیشتر ارقام کشت شده

آن در سرتاسر دنیا از اروپا منشا گرفته‌اند، ولی تعدادی از ارقام مهم، در مناطق گیالس خیز محلی انتخاب یا اصالح گردیده‌اند.

Lead

Sty

leN

orm

al S

tyle

Hea

ding

Sty

le

Page 21: تایپوگرافی اصولی در وب

siamak.us sia_mac@

باغ بزرگ، درخت گیالس

درخت‌هایی که در باغ بزرگ پرورش پیدا می‌کنند، توانایی تولید ۴ ُتن گیالس را در یک‌سال دارند. این یک قانون کلی است.

این گیاه احتماال از منطقه‌ای بین دریای سیاه و دریای خزر منشا گرفته است. ولی به نظر می‌رسد که در زمان‌های قدیم آن را به اروپا برده باشند.

بیشتر ارقام کشت شده آن در سرتاسر دنیا از اروپا منشا گرفته‌اند، ولی تعدادی از ارقام مهم، در مناطق گیالس خیز محلی انتخاب یا اصالح

گردیده‌اند.

Page 22: تایپوگرافی اصولی در وب

siamak.us sia_mac@

باغ بزرگ، درخت گیالس

درخت‌هایی که در باغ بزرگ پرورش پیدا می‌کنند، توانایی تولید ۴ ُتن گیالس را در یک‌سال دارند. این یک قانون کلی است.

این گیاه احتماال از منطقه‌ای بین دریای سیاه و دریای خزر منشا گرفته است. ولی به نظر می‌رسد که در زمان‌های قدیم آن را به اروپا برده باشند. بیشتر ارقام کشت شده

آن در سرتاسر دنیا از اروپا منشا گرفته‌اند، ولی تعدادی از ارقام مهم، در مناطق گیالس خیز محلی انتخاب یا اصالح گردیده‌اند.

Page 23: تایپوگرافی اصولی در وب

siamak.us sia_mac@

نسبتطالیی؛ ۱.۶۱۸

( 1 + √5 ) ÷ 2 = 1.61803398874… = φ

( a + b ) / (a) = (a / b) = φ

Page 24: تایپوگرافی اصولی در وب

siamak.us sia_mac@

در راه توانایی‌های خویش تالش باید کرددر راه توانایی‌های خویش تالش باید کرد

در راه توانایی‌های خویش تالش باید کرددر راه توانایی‌های خویش تالش باید کرد

نسبتطالیی؛ ۱.۶۱۸

Page 25: تایپوگرافی اصولی در وب

siamak.us sia_mac@

بیشتر بدانید...

Page 26: تایپوگرافی اصولی در وب

siamak.us sia_mac@

گریدبندی در تایپوگرافیاثر: کیمبرلی االم — مترجم: محمدرضا عبدالعلی

bit.ly/RWDC-1

Page 27: تایپوگرافی اصولی در وب

siamak.us sia_mac@

تایپوگــرافیاثـر: فرشــید مثقـالی

bit.ly/RWDC-2

Page 28: تایپوگرافی اصولی در وب

siamak.us sia_mac@

؟

Page 29: تایپوگرافی اصولی در وب

www.siamak.ussia_mac

Front–End Engineer & Web/Mobile Designer.

Siamak Mokhtari