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

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

با این حال، پیروزی صنعت گرایی به معنای ناپدید شدن استادان بزرگ با ظهور ماشین های چاپ نبود. این دو جهان مستقل از یکدیگر به حیات خود ادامه دادند - چاپگرها استعداد صنعتگران را تشخیص دادند و آنها نیز به نوبه خود فهمیدند که پیشرفت نمی تواند متوقف شود. این دومین تغییر در تایپوگرافی بود که در نتیجه بخشی از "روح" یا به اصطلاح انسانیت خود را از دست داد. اما برای درک آنچه اخیراً اتفاق افتاده است، باید به 500 سال گذشته سفر کنید و بفهمید همه چیز از کجا شروع شد.

انتقال اول

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

قبل از این، تمام کتاب ها کاملاً با دست ساخته می شدند. نقوش گذشته با دست نوشته و با طرح ها و طرح های پیچیده تزئین می شد. پروسه کپی بسیار طولانی بود، اما در نتیجه، هر کتاب، حتی یک نسخه، یک اثر هنری بود.

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

مردم فقط از این تغییرات استقبال کردند. آن‌ها به کتاب‌هایی به زبانی که می‌فهمند و کتاب‌هایی که بتوانند با خود ببرند نیاز داشتند. عطش دانش داشتند و کتابهای چاپی آن را سیراب می کرد.

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

عصر دیجیتال

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

_______________________

«در دنیای کاملاً رایانه‌ای ما، تکثیر فونت‌ها و تنوع‌های مختلف آنها نشان‌دهنده است سطح جدیدماسیمو ویگنلی طراح می گوید: آلودگی بصری که مستقیماً فرهنگ ما را تهدید می کند. از هزاران فونت، ما فقط به چند قلم اصلی نیاز داریم، زیرا همه چیز فقط زباله است.
_______________________

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

خیلی وقت بود که کسی با قلم روی کاغذ پوست ننوشت. کاغذ خشن بوی جوهر چاپ رفته است. بازار چاپ براق به حجم های میکروسکوپی کاهش یافته است. امروز متن هایی را می خوانیم که چاپ نشده، بلکه تایپ شده اند و اصلاً آنها را روی کاغذ نمی خوانیم. و ظاهراً تایپوگرافی در حال گذار دیگری است. هیچ کس نمی داند چگونه خواهد بود، اما، ظاهرا، پس از کاغذ، نمایشگرهایی که ما با آنها آشنا هستیم منسوخ می شوند. سخت است که بگوییم انقلاب بعدی چه زمانی رخ خواهد داد، اما انتقال جدیدلزوما خواهد شد.

غم انگیزترین چیز در مورد همه اینها این است که مردم بخشی از خود را در جستجوی کمال از دست داده اند. امروزه تقریباً هیچکس به مهارت خوشنویسی نیاز ندارد. زمان زیادی طول می کشد، نیاز به مراقبت و پشتکار دارد. امروزه این هیچ معنایی ندارد - از این گذشته، هدست برای هر سلیقه ای وجود دارد. ما فونت هایی مانند زامبی ها را انتخاب می کنیم: نام، اندازه، سبک ... پیام؟ پیام؟ نه پیامی پشت فونت های کامپیوتر وجود دارد، نه داستانی، نه چیزی.

نوستالژی برای گذشته

امروزه، بسیاری از طراحان نیاز به فونت های جدیدی را احساس می کنند که به متن فردیت مورد نیاز خود را بدهد. راه های زیادی برای کار با تایپوگرافی وجود دارد و هر کدام از آنها هدف یکسانی را دنبال می کنند - فرار از غیرشخصی بودن حروف دیجیتال. همه چیز استفاده می شود - تضاد رنگ، توهم حجم، فضای منفی، به طور خلاصه، همه چیزهایی که می توانند یک فونت استاندارد را به یک فونت کمی کمتر استاندارد تبدیل کنند.

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

تایپوگرافی گرانج وینتیج

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

تایپوگرافی- یکی از مهمترین جنبه های طراحی وب، زیرا با کمک آن اطلاعات اولیه منتقل می شود. متأسفانه، بسیاری از طراحان و مشتریان از آزمایش‌های جسورانه می‌ترسند و یک یا دو فونت ثابت شده را برای پروژه‌های خود انتخاب می‌کنند.

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

تایپ فیس در مقابل فونت - چه تفاوتی دارد؟

بسیاری از مردم از کلمات "typeface" و "font" به جای یکدیگر استفاده می کنند. در واقع، این یک چیز نیست، حالا دلیل آن را توضیح خواهم داد.

هدستمجموعه‌ای از شخصیت‌های مشابه سبک‌شناسی است که می‌توان نوشت/چاپ کرد. اینها اعداد، حروف، نمادها هستند. فونت- این یک مفهوم محدودتر است که توسط عوامل مختلفی مانند اندازه و سبک تعیین می شود. به طور کلی، Arial یک فونت است و Arial Bold یک فونت است.

طبقه بندی

فونت ها را می توان به چند گروه تقسیم کرد - serif (serif)، sans serif (sans-serif)، دست نویس (اسکریپت)، نمایش (نمایش). با این حال، انواع دیگری از طبقه بندی وجود دارد.

فونت های Serif، Antiqua (Serif)

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

فونت های Serif دارای چندین نوع فرعی هستند - برای مثال، سبک قدیمی("سبک قدیمی" - به آنها اومانیست نیز می گویند، سریف انسان گرایانه) - اولین فونت های این طبقه بندی، در سال 1400 مورد استفاده قرار گرفتند. آنها ویژگی متمایز- اینکه قسمتی از نماد که در زاویه قرار دارد نازک شود. نمونه هایی از فونت ها عبارتند از Adobe Jenson، Centaur و Goudy Old Style.

سری های انتقالی- در دهه 1700 استفاده شد. این شامل فونت هایی مانند Times New Roman و Baskerville، و همچنین Caslon، Georgia، و Bookman است. تفاوت آنها بین قسمت های ضخیم و نازک حروف بیشتر از سبک قدیمی است، اما کمتر از مدرن قابل توجه است.

سریف های مدرن (آنتیک سبک جدید)- بعد از 1700 استفاده شده است و دارای کنتراست قوی بین قسمت های ضخیم و نازک شخصیت ها است. این شامل فونت هایی مانند Didot و Bodoni می شود

و در نهایت , سری های اسلب (فونت های اسلب)- به طور کلی ضخامت همه خطوط یکسان و سریف های بزرگ در انتها دارند

فونت های خرد شده، گروتسک (Sans Serif)

فونت های سریف به این دلیل نامیده می شوند که سریف ندارند). آنها مدرن تر به نظر می رسند و در قرن 18 شروع به استفاده از آنها کردند.

در اینجا 4 نوع اصلی فونت sans serif آورده شده است: گروتسک (گروتسک قدیم)، نئوگروتسک (گروتسک جدید)، اومانیست (انسان گرایانه) و هندسی (هندسی).
گروتسک های قدیمی- اولین ها، آنها شبیه به فونت های سریف هستند، اما بدون سریف.
مثلا فرانکلین گوتیک و آکزیدنزه

گروتسک های جدیددر مقایسه با گروتسک های قدیمی ظاهری ساده دارند. بسیاری از محبوب ترین فونت های امروزی sans serif های جدید هستند، به عنوان مثال، MS Sans Serif، Arial، Helvetica و Univers.

اومانیست ها- خوشنویسی تر از تمام فونت های sans serif دیگر (یعنی ضخامت خط آنها تغییر می کند). به عنوان مثال، اینها عبارتند از Gill Sans، Frutiger، Tahoma، Verdana، Optima، و Lucide Grande - آنها اغلب در پر کردن بدنه سایت استفاده می شوند.

هندسیبر اساس ارقام منظم، به عنوان مثال، "O" یک دایره و غیره است. مدرن ترین فونت های sans serif محسوب می شوند. مثال - ITC Avant Garde Gothic، Erbar Grotesk، Eurostile، Futura، Kabel، Metro، Neuzeit Grotesk، Rodchenko، Spartan.

دست نویس (فیلم نامه)

فونت های دست نویس بر اساس دست خط هستند. دو نوع از این فونت ها وجود دارد - رسمی و معمولی. به نظر می رسد که نسخه های رسمی دست نویس هستند و مربوط به قرن های 17 و 18 هستند. برخی از فونت ها بر اساس دستخط هنرمندان مشهوری مانند جورج اسنل و جورج بیکهام ساخته شده اند. به عنوان نمونه ای از فونت های مدرن، می توانید از Kuenstler Script استفاده کنید. در عین زیبایی و شکیل بودن، به بدنه صفحه نمی خورد.

فونت های معمولی نسخه مدرن تری هستند که در قرن بیستم ایجاد شدند. کمتر رسمی است، اغلب با ضربات برجسته و یک اثر ضربه قلم مو. این فونت ها عبارتند از Mistral و Brush Script.

نمایش فونت ها

دسته بندی فونت های نمایشی شامل آن دسته از فونت هایی است که عموماً برای نوشتن متن مناسب نیستند. اغلب آنها به عنوان یک لهجه عمل می کنند. آنها معمولاً در چاپ استفاده می شوند، اگرچه در صفحات اینترنت ظاهر می شوند. در بین نمایشگرها می توانید مثلاً سیاه نامه - فونت های اصلی اولین ماشین های چاپ را پیدا کنید.

فونت های غیر الفبایی (Dingbats)

فونت های غیر الفبایی- اینها آن دسته از فونت هایی هستند که به هیچ وجه حاوی حروف نیستند، اما حاوی نمادها و تزئینات هستند.

متناسب در مقابل تک فاصله

در فونت های متناسب، یک کاراکتر به اندازه املای طبیعی آن فضایی را اشغال می کند. به عنوان مثال، Times New Roman یک فونت متناسب است. اما فونت های monospace همه کاراکترهای یک عرض دارند. از جمله فونت هایی می توان به Courier New اشاره کرد

حالت

حالت فونت تا حد زیادی بر مناسب بودن استفاده از آن در یک موقعیت خاص تأثیر می گذارد. از کنتراست ها نیز اغلب استفاده می شود - سبک کسب و کار با غیر رسمی، سبک با نمایشی ترکیب می شود. به عنوان مثال، Times New Roman یک فونت سختگیرانه است، و فونتی است که اغلب برای آن استفاده می شود مکاتبات تجاری. اما، به عنوان مثال، Helvetica به طور کلی حالت خود را بسته به فونت های اطراف تغییر می دهد.

ضخامت و سبک

ضخامت فونت ها: سبک، نازک، منظم، متوسط، پررنگ، سنگین یا سیاه.

سه سبک فونت وجود دارد - ایتالیک، مورب و حروف کوچک. کلاهک های کوچک معمولا برای سرفصل ها استفاده می شود.

مورب و مورب قابل تعویض هستند، اگرچه سبک های متفاوتی هستند. Oblique یک نسخه اریب از فونت های معمولی است. برای دریافت آن، فقط از تابع Free Transform-Distort در فتوشاپ استفاده کنید. اما Italic یک مجموعه کاراکتر جداگانه است که مسئولیت نسخه اریب فونت را بر عهده دارد.

ساختار فونت

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

خط فونت (خط پایه)- یک خط خیالی که متن روی آن قرار دارد. گاهی اوقات فونت های گرد کمی از خط فونت فاصله می گیرند.

میانگیننشان دهنده ارتفاع بیشتر حروف کوچک است که معمولاً با ارتفاع حرف "x" تعیین می شود. مفهوم ارتفاع x از اینجا می آید.

خط بالای حروف بزرگ (کلاه)- ارتفاع حرف بزرگ"آ".

تصویر بالا سه قسمت مشترک همه حروف را نشان می دهد.

ضربه اصلی، ساقه- عمود اصلی هر نماد، از جمله مایل.

میله متقاطع (نوار)- قسمت افقی فونت

بیضی (کاسه)- قسمت گرد شده فونت

پسوند فوقانی (Ascender)- قسمتی از حروف چسبیده مانند «د»، «ه» و «ب».

فرود آمدن- قسمتی که به سمت پایین حروف مانند "p"، "q" و "f" بیرون زده است.

سریف ها- ویژگی متمایز فونت های سریف). در برخی از فونت ها تلفظ آنها بیشتر است، در حالی که در برخی دیگر کمتر تلفظ می شوند.

دیافراگم- فضایی را برای کاراکترهای باز مانند "A"، "c" یا "m" نشان می دهد.

گوشاین یک نماد تزئینی است، مانند حرف "g" در مثال بالا.

اتصال سکته مغزی (خط مو)این نازک ترین قسمت یک فونت سریف است.

میله متقاطع - خط افقیمانند نمادهای "A" و "H".

رها کردن (ترمینال)- انتهای گرد یا بیضی شکل (قطره ای شکل) در طراحی برخی از کاراکترهای فونت.

حلقهفقط در برخی از حروف کوچک "g" رخ می دهد و ممکن است کاملا بسته یا تا حدی بسته باشد.

Spur- علامت کوچک روی برخی از حروف، مانند "G".

اتصال (پیوند)بالا و قسمت پایینحروف "g".

ستون فقرات- منحنی مرکزی که حرف "s" دارد.

حروف دم (دم)- یک خط تزئینی، به عنوان مثال، روی حرف "R" یا "Q".

عنصر پایانی (پایانه، نهایی)- پایان سکته مغزی بدون سریف

شانه- یک خط گرد که از سکته مغزی اصلی امتداد می یابد. (راستش را بخواهید، بسیاری از سایت های روسی تعریف کاملاً متفاوتی از این مفهوم ارائه می دهند)

از نویسنده:درود، دوستان! ما به بررسی پیچیدگی های طراحی وب حرفه ای ادامه می دهیم و امروز یک موضوع بسیار داغ داریم - تایپوگرافی وب. متأسفانه بسیاری از توسعه دهندگان حتی اصول و قوانین این حوزه را نمی دانند. شاید آنها فقط اذیت نمی‌شوند و نمی‌خواهند وقت خود را برای آن تلف کنند، یا شاید معنای آن را کاملاً درک نکرده باشند. به طور کلی هدف من این است که به شما بگویم تایپوگرافی در طراحی وب اساس اصول است و بدون آن حرکت رو به جلو بسیار دشوار خواهد بود.

تایپوگرافی و پیام رسانی

هدف هر منبع اینترنتی یک پیام اطلاعاتی است مخاطب هدف. بازدیدکنندگان وب سایت شما ابتدا به چه چیزی توجه خواهند کرد؟ البته روی متن! (البته اگر با تبلیغات تصادفی و تعداد زیادی بنر احمقانه مسدود نشده باشد). موفقیت پروژه شما در نهایت به متن و فقط به متن بستگی دارد.

بیایید بفهمیم که تایپوگرافی واقعاً چه تأثیری در طراحی وب دارد.

اول، تصویر منبع وب. توسعه با کیفیت بالا با چشم غیرمسلح قابل مشاهده است و لازم نیست برای تخمین مدت زمانی که می خواهید در سایت بمانید، یک متخصص بزرگ باشید. متن کج و ناخوانا اولین دلیلی است که بازدید کننده لینک شما را 10 تا 15 ثانیه پس از وارد کردن ترک می کند.

دوم، منحصر به فرد بودن منبع وب. با در نظر گرفتن این واقعیت که با سرعت پیشرفت روزافزون فضای اینترنت امروزی، یافتن محتوای کاملا منحصر به فرد به سادگی یک کار غیر واقعی است، وظیفه شما ارائه منحصر به فرد این محتوا است. در نبرد سایت های رقیب، کسی که غفلت نمی کند همیشه برنده است قوانین سادهتحولات، اما برعکس، آنها را به طور موثر اعمال می کند و حداکثر سود را می برد.

مبانی تایپوگرافی در طراحی وب

فونت در طراحی وب

تایپوگرافی در طراحی وب سایتقوانین و قوانین کاملاً طبیعی دارد. بیایید با فونت ها شروع کنیم. انتخاب درستفونت ها تا حد زیادی مفهوم توسعه شما را تعیین می کنند و بر درک کلی از منبع تأثیر می گذارند.

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

معرفی ویژگی @font-face CSS به سادگی دست طراحان را آزاد کرد. من پیوندی به هر فایل فونتی ثبت کردم و اکنون در صفحات سایت استفاده شده است. نارضایتی از این موضوع از سوی توسعه دهندگان وجود دارد، اما معلوم شد که این یک مشکل کاملا قابل حل است.

توجه داشته باشم که همه فونت ها برای طراحی وب مناسب مناسب نیستند. عمدتاً به دلیل ناخوانا بودن و دشواری مشاهده از روی صفحه نمایش. برخی از فونت ها بسیار سنگین هستند و منابع را کاهش می دهند - حتما به این نکته توجه کنید. بیشتر اضافه میکنم ویژگی فنیهنگام کار با فونت ها: نمایش آنها در مرورگرهای مختلف- چنین مشکلی در پردازش یک فایل یا حتی کل خانواده وجود دارد.

تایپوگرافی ماکرو و میکرو

همانطور که احتمالاً قبلاً از نام این اصطلاحات فهمیده اید:

سطح کلان - می سازد ساختار کلیمتن، محل قرارگیری محتوا را نسبت به طرح تعیین می کند.

سطح میکرو - به کوچکترین جزئیات، فضاها، فاصله ها، فرورفتگی ها و غیره توجه می کند.

وظیفه تایپوگرافی ماکرو جهانی است - ایجاد بلوک های متنی زنده، فعال، اما در عین حال هماهنگ و یکپارچه. میکروتایپوگرافی یک وظیفه ساده تر، اما نه کمتر مهم دارد - برای اطمینان از خوانایی. در اینترنت نمونه های زیادی از راه حل های موفق و ناموفق برای این مشکلات وجود دارد.

ساخت یک ترکیب جامع، اول از همه، در درک فضا نهفته است. یک طراح وب باید کل تصویر را ببیند، اما در عین حال آن را با شایستگی به جزئیات تقسیم کند. هیچ عنصر بی اهمیتی در اینجا وجود ندارد: عنوان، پاراگراف، فواصل عمودی بین عناصر، ثبات ها، ضخامت ...

توصیه می‌شود فونت‌ها را برای طراحی وب در واحدهای نسبی (% یا "em" مشخص کنید، این امر سازگاری و انعطاف‌پذیری محتوا را ارتقا می‌دهد. استفاده از پیکسل‌های آشناتر «px» برای محفظه‌های غیر پاسخگو، زمانی که بلوک‌ها با تغییر اندازه صفحه حرکت می‌کنند، اما فونت ثابت می‌ماند، منطقی است.

تزیین متن

بخش مهمی از تایپوگرافی، حروفچینی نمادین کامپیوتری است. این شامل: قرار دادن علائم نگارشی، استفاده از پرانتز، خط تیره و خط تیره، نقطه، فاصله و غیره است.

چنین خطاهایی، در نگاه اول، تهدید خاصی برای محتوا یا منحصر به فرد بودن محتوا ایجاد نمی کنند، با این حال، به یاد داشته باشید: هیچ منبع محترمانه ای اجازه خطاهای بدوی را در متون نمی دهد. در مورد تصویر به یاد داشته باشید، هیچ چیز کوچکی در آن وجود ندارد!

حالا در مورد چیدمان. قوانینی در اینجا وجود دارد:

بلوک متن باید به 40 تا 50 درصد از عرض صفحه محدود شود.

بین پاراگراف ها باید 1.5 فاصله وجود داشته باشد.

کنتراست بین پس‌زمینه و متن باید بین 75 تا 90 درصد باشد.

فونتی که برای چشم راحت است 12 تا 16 پیکسل است، اما حتی کوچکترین بلوک نباید کمتر از 10 پیکسل باشد.

فاصله خطوط نسبت به اندازه فونت حفظ می شود و به صورت درصدی اندازه گیری می شود، 140-150٪ کافی خواهد بود.

تراز کردن متن در مرکز یا توجیه شکل بسیار بدی در نظر گرفته می شود. فاصله های ناهموار بین کلمات، و همچنین لبه های ناهموار پاراگراف ها، ادراک را کاهش می دهد و اغلب به سادگی تحریک می شود.

سبک های CSS

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

من یک بار در یک مقاله جالب خواندم که طراحی وب 95٪ تایپوگرافی است. باور کردن یا نه، هر کسی برای خودش تصمیم می گیرد. اما متنی که قابل خواندن نیست محصولی بدون هدف است. توصیه من به شما این است که فوراً به کیفیت ارائه اطلاعات توجه کنید، آن را به تعویق نیندازید. این همه برای من است. در به روز رسانی ها مشترک شوید و جالب ترین چیزها را از دست نخواهید داد! خداحافظ!

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

فونت مجموعه ای از کاراکترها با اندازه و طرح معین است. یک فونت به طور مشابه خانواده سبک های فونت را تعریف می کند. به عنوان مثال، اینها می توانند serif، sans serif، دست نویس، نمایش، monospace و موارد دیگر باشند. می توان گفت که یک تایپ فیس مجموعه ای از فونت ها با سبک ها و اندازه های مختلف است که توسط یک سبک اجرای مشترک متحد شده اند. همانطور که می بینید، فونت مفهوم محدودتری است.

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

همچنین اصطلاحاتی مانند "وزن" و کرنینگ وجود دارد. همه آنها را می توان با استفاده از تغییر داد ابزارهای CSSو برای پاراگراف ها، سرفصل ها یا سایر عناصر متن اعمال شود. ویژگی "وزن" فونت میزان ضخامت خطوط را هنگام نوشتن تعیین می کند. این یک سری مقادیر از 100 تا 900 است، که در آن هر عدد نشان دهنده وزن مربوط به جسارت سبک است. فونت معمولی "normal" مربوط به عدد 400 است، فونت پررنگ "bold" مربوط به 700 است. کرنینگ تغییر در فاصله بین حروف بسته به شکل آنها است. این فرآیند قرار دادن صحیح نمادها، تنظیم فاصله بین آنها است که در نتیجه باید هماهنگی حاصل شود. اگرچه بسیاری از مردم توجه زیادی به کرنینگ نمی کنند، این چیزهای کوچک هستند که به دستیابی به نتایج بسیار خوب کمک می کنند.

نقض هنجارها

بحث در مورد نیاز به ایجاد فونت های جدید کاملا منطقی است. پشت اخیرابسیاری از وب سایت ها قدیمی هستند. آنها از فونت های استاندارد استفاده می کنند که ما در حال حاضر کاملاً از آنها خسته شده ایم.

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

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

علاوه بر این، باید اطمینان حاصل کنید که تمام لینک های متنی دارای فونت یکسان در سایت هستند. استفاده از لینک های فونت ها و طرح های مختلف مشکلات قابل توجهی را برای کاربر در مسیریابی ایجاد می کند.

انتخاب فونت مناسب

همچنین لازم به ذکر است که فونت های مختلف می توانند تأثیرات متفاوتی بر روحیه خوانندگان داشته باشند. به طور کلی، فونت های سریف برای مواد چاپی مناسب تر هستند. سریف ها به ایجاد فاصله بین حروف و همچنین جداسازی یک کاراکتر از دیگری کمک می کنند. غالباً، فونت‌های سریف حسی شخصی به همراه می‌آورند.

فونت های بدون سریف برای صفحات وب بهترین هستند. رزولوشن پایین صفحه به این معنی است که سریف ها تار به نظر می رسند و به نوبه خود درک ضعیفی دارند. فونت های Sans Serif تمایل دارند احساسات عقلانیت، شیک بودن، جوانی و مدرنیته را بیان کنند.

به عنوان مثال، انتخاب سریف ها حسی از حرفه ای بودن و اطلاعات معتبر می دهد. این اغلب در رسانه های اصلی مانند نیویورک تایمز دیده می شود. برای وبلاگ های کوچکتر، می توانید از فونت sans serif با ارتفاع خط بزرگ استفاده کنید. این به کاربران امکان مشاهده سریع متن وبلاگ را می دهد.

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

خوانایی

تایپوگرافی، و اغلب تایپوگرافی ناخوانا، می تواند برای چشم بسیار آزاردهنده باشد. البته، استثنائاتی وجود دارد که در آنها می توان از فونت های Funky یا سایر فونت های ناخوانا استفاده کرد، مانند تبلیغات کلوپ شبانه.

اما با این وجود، اگر تمایل به استفاده از سودا، Bored یا Akka دارید، بهتر است این ایده را کنار بگذارید. اگر میل هنوز به اندازه کافی قوی است، پس باید از این فونت ها کم استفاده کرد. مثلا به عنوان عنوان. اما متن اصلی باید خواناتر باشد. این می تواند به ایجاد حرکت در سایت شما کمک کند. و باید به یاد داشته باشید که استفاده از چنین فونت هایی باید یک مزیت طراحی باشد و نه یک نقطه ضعف.

محتوای اطلاعاتی

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

هنگام طراحی برای پروژه های تجاری، بیشتر باید از فونت های صاف سنتی استفاده کنید. اگر طرح رسمی ندارید، باید این را نیز در نظر گرفت. به خصوص اگر می خواهید مردم سایت شما را جدی بگیرند.

مکان و ابعاد

برای طراحی موثر بسیار مهم است - متن در چه مکان هایی باید قرار گیرد و اندازه آن باید چقدر باشد. هیچ کس نمی خواهد چشمان خود را برای خواندن اطلاعات یا دیدن کلمات فوق العاده بزرگ در یک وب سایت فشار دهد. هدف از طراحی خوب، یافتن تعادل است. و اولین قدم برای این کار این است که بفهمیم کدام اطلاعات مهم تر خواهد بود.

به طور معمول، کلماتی که باید به آنها توجه کنید باید کمی بیشتر انجام شوند. یا برعکس - موارد جزئی باید کوچکتر باشند. همه چیز به اهمیت آن بستگی دارد. به عبارت دیگر، شما باید یک سلسله مراتب از کلمات ایجاد کنید.

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

رنگ

این یکی از ساده ترین جنبه هاست. شما باید رنگی را انتخاب کنید که متن را از پس زمینه متمایز کند و خوانا بماند.

کمک های شما رنگ های متضاد و همچنین استفاده از افکت هایی مانند ضربه (سکته مغزی) و درخشش (درخشش) خواهد بود. این به جذاب‌تر شدن و خواندن آسان‌تر سایت کمک می‌کند. شما باید رنگی را انتخاب کنید که مردم را وادار به توقف و نگاه کند و اطلاعات را به بخش غالب طرح تبدیل کند.

نتیجه

استفاده از فونت ها در فتوشاپ تفاوت قابل توجهی با استفاده از آنها در صفحات وب دارد. این توضیح می دهد که چرا برخی از طراحان کار با تایپوگرافی را با مشکل مواجه می کنند. تایپوگرافی در وب موضوع نسبتاً گسترده ای است و نیاز به تحقیق زیادی دارد. همیشه باید به یاد داشته باشید که یافتن رویکردی برای استفاده از تایپوگرافی که با روحیه و زیبایی طراحی مطابقت داشته باشد بسیار مهم است. از ترکیب و تطبیق نترسید انواع مختلففونت ها، فقط مطمئن شوید که خوب هستند.

دوستان!

در این مقاله من به تجزیه و تحلیل رایج ترین اشتباهات طراحان تازه کار ادامه خواهم داد.

امروز در مورد استفاده از فونت صحبت خواهیم کرد. آیا می دانید چگونه می توانم کار یک مبتدی را از یک حرفه ای تشخیص دهم؟ یک مبتدی، به عنوان یک قاعده، سعی می کند هر چیزی را که آموخته است در کار خود نشان دهد. این امر در استفاده فراوان از رنگ های مختلف، افکت های متنوع و البته فونت های متعدد در یک اثر متجلی می شود. برعکس، یک طراح حرفه ای معمولاً از یک یا حداکثر دو فونت در یک پروژه و همچنین از یک پالت رنگ محدود استفاده می کند. و اگر او مطلقاً نمی تواند بدون جلوه های گرافیکی کار کند، سعی می کند استفاده از آنها را به حداقل برساند.

بنابراین، اگر قانون شماره یک برای طراحی خوب ساخت و ساز است شبکه مدولار(به مقاله مراجعه کنید)، سپس قانون شماره دو این است: تعداد فونت ها را محدود کنید!

تعداد حداقل فونت ها باعث انطباق و سازگاری در طراحی می شود. هرچه کار شما دارای سبک های مختلف باشد و مملو از انواع رنگ ها و فونت ها باشد، معنادارتر و حرفه ای تر به نظر می رسد.

اغلب، یک طراح یک فونت را برای یک پروژه انتخاب می کند. علاوه بر این، کاراکتر فونت انتخابی باید با ایده خلاقانه یا خلق و خوی طرح مطابقت داشته باشد. مثلاً اگر در حال ساخت جزوه ای هستیم که به تلفن همراهنسل سوم، سپس یک فونت سبک و مدرن sans-serif به احتمال زیاد مناسب ما خواهد بود. اما کتابچه ای با موضوع نمایشگاه امپرسیونیست ها در هرمیتاژ بیشتر برای فونت سریف کلاسیک و «استوار روی پاها» مناسب است. به طور کلی انتخاب موفق فونت ها در کار یک طراح از اهمیت فوق العاده ای برخوردار است، زیرا ناهماهنگی بین ماهیت فونت و ایده و ماهیت پروژه می تواند کل کار را خراب کند.

گاهی اوقات لازم است از یک فونت اضافی استفاده کنید. هنگام کار با دو فونت، به نظر می رسد فونت اول بر حال و هوا و شخصیت اثر تأکید دارد و اغلب به آن فردیت می بخشد. این فونت برای عنوان ها و زیر عنوان ها استفاده می شود. گاهی اوقات طراحان از فونت های غیر معمول برای این منظور استفاده می کنند. این کار به خاطر اصالت نیست، بلکه با هدف برجسته کردن بخش‌های خاصی از متن با افزایش کنتراست نسبت به فونت دوم و آشناتر انجام می‌شود.

از آنجایی که در یک اثر عناوین زیادی وجود ندارد، اصل کنتراست بی عیب و نقص عمل می کند، به خصوص که عناوین بسیار بزرگتر از متن اصلی هستند.

فونت دوم، به عنوان یک قاعده، برای چشم آشناتر است و وظیفه آن جلب توجه بینندگان نیست، بلکه انجام یک عملکرد صرفاً اطلاعاتی است. خواندن آن باید آسان باشد و چشمان شما را خسته نکند. مبتدیان معمولاً اشتباه فاحشی را مرتکب می شوند که تکه های متن بزرگ را با فونت های عجیب و غریب و خوانا ایجاد می کنند. من همچنین اکثریت قریب به اتفاق فونت‌های به اصطلاح «دست‌نویس» را به‌عنوان چنین فونت‌هایی درج می‌کنم. چنین فونت هایی مثلاً برای یک کارت تبریک کوچک خوب هستند، اما برای کار کردن با آنها نه مقدار زیادمتن

در اینجا نمونه هایی از استفاده خوب از فونت آورده شده است:

همانطور که می بینید، در اینجا فقط از دو فونت استفاده شده است. یکی برای عنوان و دیگری برای متن اصلی. این کار ظریف و سازگار به نظر می رسد.

در اینجا استفاده بد از فونت ها وجود دارد:

در اینجا من عمداً از برخی فونت های غیر معمول استفاده می کنم تا شما ناهماهنگی و ناهماهنگی این طراحی را احساس کنید. در کار خود از فونت های زیاد استفاده نکنید!هیچ چیز بدتر از کاری نیست که در آن 8 فونت مختلف و مخصوصاً فونت های عجیب و غریب و خوانا با هم ترکیب شوند.

در اینجا نمونه ای از چنین کارهایی آورده شده است:

این حاصل تخیل من نیست. من از این قبیل کارها زیاد دیدم و معمولاً توسط طراحان مبتدی یا آماتور انجام می شد.

اگر به یک کتاب درسی طراحی نگاه کنید، احتمالاً توصیه هایی برای استفاده از فونت sans serif برای سرفصل ها و فونت سریف برای متن بدن پیدا خواهید کرد.

اما این قانون خیلی کلی است و در عمل اغلب باید دور زد.
بنابراین، در نهایت، یک توصیه دیگر. اگر فونت عنوان مدرن به نظر می رسد، بهتر است فونت sans-serif را به عنوان فونت اصلی انتخاب کنید. اگر اولین فونت شما قدیمی است، فونت اصلی باید serif باشد.

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