حالا بیایید کمی تایپوگرافی جذاب به پروژه‌مون اضافه کنیم
و با خود ♪♪فونت♪♪ شروع می‌کنیم
پس بیایید کمی این صفحه وب را تحلیل کنیم
این صفحه وب در اصل
برای یک فروشگاه کوچک طراحی صندلی در لیسبون است
پس این افراد در اصل طراح یا معمار هستند
که این صندلی‌های مینیمالیستی را ساخته‌اند
این‌ها و این‌ها
و واضح است که ما می‌خواهیم
به این رابط کاربری ظاهری ♪♪تمیز و مدرن♪♪ بدهیم
یعنی چه؟ یعنی ما باید سراغ
یک ♪♪فونت سنس‌سریف♪♪ برویم
و یکی از فونت‌های سنس‌سریف که من خیلی دوست دارم
خصوصاً برای پروژه‌هایی مثل طراحان یا معماران
فونت ♪♪Inter♪♪ است
پس بیایید به ♪♪Google Fonts♪♪ برویم
که آدرسش ♪♪fontsgooglecom♪♪ است
و دوباره لینک آن هم در صفحه منابع من قرار دارد
که فعلاً نمی‌توانیم استفاده کنیم چون هنوز آماده نیست
اما وقتی شما این دوره را می‌بینید آماده خواهد بود
به هر حال می‌بینید که الان بیش از ۱۰۰۰ فونت
در Google Fonts وجود دارد
و این تعداد همیشه در حال افزایش است
و اینجا به عنوان مثال ♪♪Roboto♪♪ است
که یکی از فونت‌هایی بود که به شما پیشنهاد داده بودم
یا ♪♪Open Sans♪♪
فکر کنم ♪♪Lato♪♪ هم یکی از فونت‌های بسیار محبوب باشد
اما همان‌طور که گفتم در این پروژه ما از ♪♪Inter♪♪ استفاده می‌کنیم
و بعداً می‌توانیم با چند فونت دیگر هم آزمایش کنیم
پس حالا در Google Fonts
کافی است روی فونت کلیک کنید مانند این
و بعد می‌توانیم سبک‌هایی که نیاز داریم را انتخاب کنیم
و سبک‌ها در واقع
به معنی وزن‌های مختلف فونت هستند که می‌خواهیم
یادتان هست؟
که گفتم معمولاً
نباید از وزن ۴۰۰ پایین‌تر بروید؟
این‌ها خیلی نازک و سبک هستند پس از آن‌ها استفاده نکنید
پس با وزن ۴۰۰ شروع می‌کنیم که ♪♪معمولی♪♪ است
پس باید این سبک را انتخاب کنیم
پس کافی است روی این دکمه کلیک کنید
حالا وقتی شما این درس را می‌بینید
این کل رابط
ممکن است کاملاً متفاوت به نظر برسد
چون Google Fonts دائماً
ظاهر خودش را تغییر می‌دهد
پس اگر ظاهر متفاوت شد
هنوز باید به دنبال دکمه‌ای باشید
که بتوانید سبک‌های مختلف را اضافه کنید
پس معمولاً ما به وزن ۴۰۰ نیاز داریم
بعد یک ♪♪Bold♪♪ هم لازم داریم
که معمولاً وزن ۷۰۰ است و همچنین یک وزن متوسط
مثلاً ۵۰۰ یا ۶۰۰ که ♪♪Medium♪♪ یا ♪♪Semi-Bold♪♪ است
و من اینجا وزن ۵۰۰ را انتخاب می‌کنم
خوب وقتی آماده شدیم روی این دکمه کلیک می‌کنیم
و فونت‌های انتخاب‌شده را می‌بینیم
که شامل Inter 400500 و 700 هستند
این تمام چیزی است که می‌خواهیم
و می‌توانستیم فونت‌های بیشتری اضافه کنیم
اما فعلاً این کار را نمی‌کنیم
فقط با ♪♪Inter♪♪ ادامه می‌دهیم
و بعد تنها کاری که باید انجام دهیم این است که این لینک را کپی کنیم
پس الان آن را کپی می‌کنم و بعد در HTML و در بخش head
می‌توانیم آن را لینک کنیم
و باید قبل از فایل CSS خودمان این کار را انجام دهیم
خوب سپس ذخیره کنید
حالا دو عنصر link جدید از Google Fonts داریم
که اضافه شده‌اند
و آن چیزی که برای ما مهم است این یکی است
یعنی لینک دوم
که در واقع یک استایل‌شیت جدید بارگذاری می‌شود
اما از Google Fonts
یادتان باشد که ما فایل CSS خودمان را هم با لینک و href متصل می‌کنیم
به فایل CSS خودمان
و این هم مشابه است
پس باز هم یک استایل‌شیت است و باز هم href دارد
با این تفاوت که این یک URL است
که از یک سرور دیگر آمده است
و این سرور در اینجا Google است
یعنی ♪♪fontsgoogleapiscom♪♪
و حالا کاری که می‌توانیم انجام دهیم
تنظیم ♪♪font-family♪♪ در body به ♪♪Inter♪♪ است
پس از کوتیشن استفاده کنید
که واقعاً ضروری نیست
اما فکر می‌کنم بهتر است همیشه از آن‌ها استفاده شود
پس این ویرگول به چه معناست؟
یعنی ♪♪font-family♪♪ اصلی ما Inter خواهد بود
اما اگر به هر دلیلی در دسترس نبود
از گزینه دوم استفاده می‌کنیم
که همان ♪♪Sans-Serif♪♪ پیش‌فرض است
برای مثال اگر اتصال اینترنتی وجود نداشته باشد
فونت Inter از Google Fonts بارگذاری نمی‌شود
و در این حالت ♪♪Sans-Serif♪♪ استفاده می‌شود
و در اینجا می‌توانستیم گزینه‌های بیشتری اضافه کنیم
اما فعلاً فقط این دو گزینه داریم
و همان‌طور که می‌دانید
تمام عناصر ♪♪font-family♪♪ خود را از body به ارث می‌برند
که عنصر والد است
و اگر حالا نگاه کنیم
می‌بینید که تغییر کرده است تما! ترجمه خط به خط ۱۰۴ خط بعدی با رعایت تمام نکاتی که گفتی و بدون ادغام یا اضافه کردن جمله با لحن روان و تخصصی به صورت زیر است:
و اگر از من بپرسید این در واقع خیلی زیباتر به نظر می‌رسد
نسبت به آن چیزی که قبلاً داشتیم یعنی همان Sans-Serif پیش‌فرض
می‌توانیم این را بررسی کنیم و آن را روشن یا خاموش کنیم
فقط برای دیدن نتیجه
پس اینجا خوب به طور پیش‌فرض
در واقع فونت Serif دریافت می‌کنیم
اما می‌توانیم اینجا را حذف کنیم
و بعد ببینیم چه اتفاقی می‌افتد
تفاوت زیادی وجود ندارد
اما همین تفاوت‌های کوچک همه چیز را تغییر می‌دهند
بین یک طراحی خوب
و یک رابط متوسط یا بگذارید بگوییم نه چندان حرفه‌ای
پس البته آن را برمی‌گردانیم
و حالا بیایید کمی درباره اندازه فونت صحبت کنیم
یکی از چیزهایی که در درس قبلی گفتم
این است که هنگام انتخاب اندازه فونت
خوب است یک ♪♪سیستم♪♪ داشته باشیم
چون با این کار همیشه مجبور نیستیم فکر کنیم
که چه اندازه‌ای به یک عنصر خاص بدهیم
این کار خیلی وقت‌گیر خواهد بود
و همچنین منجر به نتایج ناسازگار خواهد شد
پس من این سیستم را دارم
و هر وقت نیاز به انتخاب اندازه فونت دارم
می‌توانم فقط یکی از این گزینه‌های مختلف را انتخاب کنم
حالا این ♪♪Type Scale♪♪ همانطور که نامیده می‌شود
از ابزاری آمده که قبلاً هم ذکر شد
یعنی ♪♪typescalecom♪♪
و من در واقع دقیقاً از این نسخه استفاده نکردم
پس خودم یک سیستم ساختم که همان است که استفاده خواهیم کرد
در پروژه Omni Foot
و به همین دلیل همینجا هم از آن استفاده می‌کنیم
اما شما هم می‌توانید سیستم خودتان را بسازید
مثلاً می‌توانید یکی از این‌ها را انتخاب کنید
بگذارید این یکی باشد و سپس خوب
کافی است این مقادیر را کپی کنید
و اگر به مقادیر بیشتری نیاز دارید می‌توانید به کلیک کردن ادامه دهید
و برای کم کردن مقدار
تعداد اندازه‌های متفاوت بیشتری خواهید داشت
و هرچه مقادیر شبیه‌تر باشند در واقع همه مشابه خواهند بود
اگر دوباره این کار را انجام دهیم می‌بینید
که هر کدام بسیار بزرگ‌تر از قبلی هستند
به هر حال برگردیم به صفحه خودمان
و باید با دادن اندازه فونت بزرگ‌تر به این عنوان شروع کنیم
این همان H1 است
پس دقیقاً همینجا
و با نگاه به سیستم خودمان
که الان بالا است بیایید برگردیم
می‌توانیم مقادیر مختلف را امتحان کنیم
مثلاً 4452 و 62
فقط این‌ها را بردارید
پس اندازه فونت بگذارید با بزرگ‌ترین شروع کنیم 62 پیکسل
و این خیلی بزرگ است (می‌خندد)
این خیلی خیلی بزرگ است
پس بیایید به مقدار پایین‌تر برویم
پس یک قدم پایین‌تر می‌رویم
تصور کنید که این انتخاب‌های محدود را نداشتیم
آنگاه می‌توانستید بگویید خوب شاید 40
چیزی شبیه این اما چرا نه 45؟
و شاید 50 و اینجا دیگر نمی‌دانستید چه انتخاب کنید
پس با این سیستم گزینه‌ها محدود است
و دیدیم که 62 مناسب نیست
بیایید 52 را امتحان کنیم
فکر کنم آن هم خیلی بزرگ است
پس با 44 می‌رویم
این ظاهر خوبی دارد
پس آن را نگه می‌دارم
اما می‌خواهم فاصله خطوط را هم کم کنم
در واقع این را حذف می‌کنم
این به اندازه کافی است
پس کار با آن راحت‌تر است
بیایید ببینیم ارتفاع خط پیش‌فرض چیست
احتمالاً در همین محدوده است
و اگر نبود ترفندی به شما نشان می‌دهم
که قبلاً نشان نداده بودم
چون تب اول که نوشته Styles
فقط استایل‌هایی است که اعمال شده‌اند
در کد ما یا شاید به صورت پیش‌فرض
اما اگر به Computed بروید
می‌توانید بهتر ببینید
حالا می‌توانید ارتفاع خط را ببینید
و آن را اینجا بنویسید
خب اینجا پیدا نمی‌شود
که کمی عجیب است
بیایید روی Show all کلیک کنیم
حالا می‌بینید ارتفاع خط ♪♪normal♪♪ است
که هنوز دقیق توضیح نمی‌دهد
به هر حال
بیایید یک مقدار امتحان کنیم
یادتان باشد این برای H1 است
و باید زیر 15 بمانیم
یادتان هست از درس قبلی؟
برای متن‌های خیلی بزرگ باید مقدار خیلی کوچک بدهیم
مثلاً می‌توانیم 12 بدهیم
این تفاوت زیادی ایجاد نمی‌کند
پس 11 را امتحان می‌کنیم چون خطوط هنوز کمی جدا هستند
و فکر می‌کنم این بهتر به نظر می‌رسد
اما اغلب
من این مقادیر را مستقیم در inspector تنظیم می‌کنم
می‌توانم از کلیدهای جهت استفاده کنم
که یکی اضافه یا کم می‌کند
که در اینجا خیلی زیاد است
یا می‌توانم Alt یا Option + بالا و پایین
استفاده کنم
که فقط 01 اضافه یا کم می‌کند
پس با این کار می‌توانیم راحت‌تر آن را دقیقاً همان‌طور که می‌خواهیم نشان دهیم
دقیقاً همان‌طور که می‌خواهیم باشد
پس مثلاً مقدار یک به نظر من خیلی کم است
۱۲ کمی جدا افتاده به نظر می‌رسد حداقل از دید من
ولی خب این موضوع کمی سلیقه‌ای است
و مقدار ۱۱ به نظر دقیق و مناسب می‌آید
پس بگذارید روی همین مقدار بمانیم
و حالا یک کار دیگر که می‌توانیم انجام دهیم
اضافه کردن فاصله بین حروف است یادتان باشد
که در واقع باعث می‌شود متن‌های بزرگی مثل اینجا
کمی طبیعی‌تر به نظر برسند
پس بین هر کاراکتر فاصله‌ای ایجاد می‌شود
بیایید شاید یک پیکسل از آن کم کنیم
و همان‌طور که می‌بینید همین یک پیکسل
تفاوت زیادی ایجاد می‌کند
پس اگر این را روشن و خاموش کنیم تغییر زیادی می‌بینیم
و واقعاً فکر می‌کنم این حالت خیلی بهتر به نظر می‌رسد
خوب به نظر من این حالت مناسب است
پس دیگر نیازی به تغییر ندارد
بیایید برویم سراغ مورد بعدی که همین‌جاست
و اولین کاری که می‌خواهم انجام بدهم
این است که شاید کمی بزرگ‌ترش کنم
یادتان باشد که اندازه پیش‌فرض ۱۶ پیکسل است؟
و الان هیچ سایز فونتی روی آن تعریف نشده
همان‌طور که اینجا می‌بینید
پس این متن عنوان (header text) است
پس بیایید دوباره به سیستم خودمان برگردیم
و الان همان ۱۶ است یادتان باشد
پس اگر بخواهیم بزرگ‌ترش کنیم می‌توانیم ۱۸ یا ۲۰ امتحان کنیم
اندازه فونت ۱۸ پیکسل
این تقریباً درست به نظر می‌رسد
بگذارید ۲۰ را امتحان کنیم این شاید زیادی بزرگ است
پس روی ۱۸ می‌مانیم و ارتفاع خط را هم تنظیم می‌کنیم
حالا این یکی خیلی کوچک است
پس می‌توانیم روی ۱۵ یا حتی بزرگ‌تر بگذاریم
خُب این همین حالا هم خوب به نظر می‌رسد
اما باز هم بیایید کمی آزمایش کنیم
و الان دارم کلید Alt یا Option + بالا را می‌زنم
خُب این یا آن هر دو خوب هستند
پس اجازه بدهید روی ۱۶ همین‌جا بمانم
حالا درباره این دکمه اینجا
یا در واقع این لینک اینجا
هنوز نمی‌دانم در نهایت چطور به نظر می‌رسد
بنابراین فعلاً نمی‌خواهم
با اندازه‌اش کاری داشته باشم
پس برویم سراغ این یکی که H2 ماست
یعنی در واقع این یکی
و این یکی و این یکی همین‌جا
پس بیایید آن‌ها را بزرگ‌تر کنیم
و به دلایلی آن‌ها را این بالا قرار دادند
بله چون این‌ها قابل استفاده مجدد هستند
این چیزی است که من به آن سبک‌های عمومی می‌گویم
که همان سبک‌های قابل استفاده مجدد هستند
و پایین‌تر سبک‌های اجزای (component styles) را داریم
پس بیایید به سراغ سبک‌هایمان برویم
و معمولاً ممکن است این‌ها را
در یک پنجره دیگر داشته باشیم مثلاً
تا مجبور نباشیم دائم بالا و پایین برویم
به هر حال بیایید امتحان کنیم نه ۴۴
بیایید این سه مورد را امتحان کنیم
پس من فقط آن‌ها را کپی کردم و اینجا جای‌گذاری می‌کنم
ولی شما لازم نیست این کار را بکنید
پس اندازه فونت و اولین مقداری که امتحان می‌کنم ۲۴ است
و در واقع احتمالاً همان مقدار پیش‌فرض است
پس هیچ تغییری ایجاد نشد
بیایید ۳۰ را امتحان کنیم
این کمی بهتر است
بیایید ۳۶ را هم امتحان کنیم
و خوب است
فکر می‌کنم این همان مقداری است که می‌پسندم جز این یکی
خُب باید به نوعی این یکی را تغییر دهیم
باشه به آن هم می‌رسیم
کمی بعدتر این کار را انجام خواهیم داد
فعلاً بگذارید روی همین اندازه بمانیم
و چون این متن حالا خیلی بزرگ شده
می‌توانیم دوباره کمی فاصله بین حروف را کمتر کنیم
بگذارید بگوییم یک پیکسل در واقع منفی یک پیکسل
و این در واقع کمی زیادی است
حالا خیلی فشرده به نظر می‌رسد برعکس قبلی
پس اگر دقیق نگاه کنید
این یکی حالا خیلی فشرده شده است
این زیاد جالب نیست
اینجا حتی می‌توانیم از نیم‌پیکسل هم استفاده کنیم مثلاً منفی ۰۵
این در واقع بهتر است
پس بیایید برویم سراغ عنوان ویژگی‌ها (features titles)
که همین‌ها هستند
و بیایید اندازه فونت ۲۰ پیکسل را
اینجا امتحان کنیم
و این تقریباً درست به نظر می‌رسد
زیرش هم ۱۸ وجود دارد
اما این تفاوت کافی بین این دو عنوان ایجاد نمی‌کند
بین این دو عنوان
پس تعیین اندازه فونت‌ها تا حدی مربوط به ایجاد سلسله‌مراتب است
بین تیترهای مختلف
و به طور کلی بین تمام بخش‌های مختلف متن
در سایت
پس این متن اینجا طبیعتاً
از این یکی مهم‌تر است
و بنابراین باید بزرگ‌تر باشد
اما نه بیش از حد بزرگ
خب به هر حال بیایید حالا بریم سراغ بعدی
پس بیایید این یکی رو ۱۸ قرار بدیم
و بعد طبیعتاً باید ارتفاع خطش رو هم افزایش بدیم
من بالاتر از ۱۶ استفاده کرده بودم
پس اینجا هم باید خوب باشه
بیایید ۱۷ رو امتحان کنیم شاید حتی بهتر باشه
خب چرا که نه؟
ما داریم فضای تنفسی زیادی بهش می‌دیم
و این چیز بدی نیست
حالا برای اینکه هماهنگ بمونه
بیایید اون یکی رو هم ۱۷ بدیم
چون نمی‌خوایم کلی مقدار مختلف
تو صفحه‌مون داشته باشیم
پس اگر یک‌جا ۱۷ استفاده کردیم
باید همه‌جا همین رو ادامه بدیم
خب حالا بیایید واقعاً سایز این یکی رو تغییر بدیم
در واقع من همینجا اون رو انتخاب کرده‌ام
کل این عنصر اینجاست جعبه‌ی نظرات یا همون Testimonial box
که همیشه به راحتی با inspector می‌تونیم ببینیم
اینجا داریم grid سه ستونه
یا شاید همون testimonial box باشه
آره فقط این قسمتشه
پس این جعبه‌ی نظراته
و حالا اون H2 داخلش
بیایید یکم کوچیک‌ترش کنیم
و ببینیم چه گزینه‌هایی برای این کار داریم
می‌خوام این سه‌تا رو تست کنم
که البته شما نیازی به کپی کردنش ندارید
این فقط برای اینه که ببینید اینجا چه اتفاقی می‌افته
مثلاً ۲۰ پیکسل
ولی الان یکم زیادی کوچیک به نظر میاد
پس شاید ۲۴ باشه
این بهتره
۳۰ چی؟
اون دیگه به دو خط می‌شکنه
پس باید برگردیم روی ۲۴
می‌بینید که با چنین سیستمی خیلی ساده‌ست
وگرنه مجبور بودیم هی ور بریم
با همه اعداد مختلف این بازه
مثلاً ۲۹ چی میشه
یا ۲۸ یا ۲۷ یا ۲۶؟
کلی گزینه پیش میاد
و این فقط وقت رو می‌گیره
و به همین خاطره که من سیستم رو خیلی دوست دارم
خب بعدی متنیه که عادی‌تر به نظر میاد
اینجا همون متن Testimonial
که همینجاست
و برای هماهنگی با بقیه صفحه
اینجا هم یک متن عادی محسوب میشه
و این یکی هم همینطور
پس بیایید همون اندازه‌ها
و همون ارتفاع خط رو اینجا هم بدیم
فقط برش داریم
خب انجام شد
طبیعتاً این یه صفحه خیلی ساده‌ست
پس می‌تونیم این کارها رو راحت انجام بدیم
یعنی این همه متن رو به‌عنوان متن عادی در نظر بگیریم
که توی یه صفحه واقعی و بزرگ‌تر
طبیعتاً اینجوری جواب نمی‌ده
ولی خب اینجا داریم یکم تمرین می‌کنیم
و در نهایت اینجا المان‌های H3 رو داریم
پس براشون هم یک سایز فونت بدیم
مثلاً ۲۰ پیکسل
و در واقع اینجا مثل حالت پیش‌فرض دیده میشه
خب بعدی جزئیات صندلی‌هاست
که همین چهار متن متفاوت اینجان
و فعلاً خوب به نظر میان
خب در واقع این متن‌ها همون‌ها هستن
یعنی آیتم‌های لیست داخلش
ولی به هر حال فعلاً خوب به نظر میان
به جز اینجا که مربوط به قیمت میشه
چون قیمت اینجا خیلی مهمه
و الان هم بولد هست
پس بیایید بزرگ‌ترش کنیم
شاید هم‌اندازه با تیتر باشه
که اینجا دوباره ۲۰ پیکسله
پس احتمالاً کل این قسمت همون بخش قیمته
چون یه Flex container هست حدس می‌زنم
آره کل این بخش قیمت صندلیه
پس اگر سایز فونتش رو افزایش بدیم
اون دو تا المان فرزند هم ازش ارث می‌برن
خب بیایید بذاریم روی ۲۰ پیکسل
و این الان عالی به نظر میاد
و بعداً هم این لینک رو یه کم فرمت‌بندی می‌کنیم
که احتمالاً بعدش دوباره
یکم کوچیک‌تر بشه
مثل همین یکی اینجا
که اون رو هم بعداً سایز می‌کنیم
وقتی لینک‌ها یا دکمه‌ها رو طراحی کنیم
و در آخر هم این متن فوتر رو داریم
که الان در واقع زیادی بزرگه
چون این متن خیلی مهم نیست
پس کوچیک‌ترش کنیم
خب برای متن کوچک چه گزینه‌هایی داریم؟
۱۲۱۶
آه در واقع این سیستم فاصله‌ست
که بعداً دربارش صحبت می‌کنیم
پس داریم ۱۲۱۴۱۶
پیش‌فرض الان روی ۱۶ه
پس بیایید ۱۲ و ۱۴ رو امتحان کنیم
۱۴ این خوب به نظر می‌رسه
این خیلی کوچیک به نظر میاد
پس برگردیم عقب
و با این در واقع کارمون تموم شد
خب دوباره می‌گم این یک مثال خیلی کوچیک بود
پس طبیعتاً نمی‌تونستیم همه‌ی دستورالعمل‌ها رو اجرا کنیم
اما در واقع بیشتر از چیزی که به نظر میاد اجرا کردیم
مثلاً هیچ متنی رو تراز کامل (Justify) نکردیم
و هیچ متنی رو وسط‌چین نکردیم
و احتمالاً هیچ متنی نداریم
که طولش بیشتر از ۷۵ کاراکتر باشه به جز شاید همین یکی
اما دوباره می‌گم این متن مهم نیست
و پس این یک استثنای خوبه
خب ما اینجا طبیعتاً نمیایم بشماریم
که به صورت دستی چند کاراکتر وجود داره
اما کاملاً به نظر میاد کمتر از ۷۵ تا باشه
پس فکر می‌کنم با این کار
ما یک تجربه‌ی خواندن خوب برای کاربرهامون ایجاد کردیم
و حالا بیاییم این ویدیو رو جمع‌بندی کنیم
و در ویدیوی بعدی درباره رنگ‌ها صحبت کنیم