لرن بلاگ

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

معرفی هشت مورد فونت مناسب طراحی وب سایت

مقدمه

انتخاب فونت مناسب طرّاحی وب سایت یک مرحله ضروری در ساختن سایت است. شما برای انتخاب فونت گزینه‌های متعدّدی را در پیش روی خود خواهید داشت. در این مقاله ضمن توضیح مختصری در مورد هر یک از فونت‌ها، به بررسی هشت فونت مناسب طرّاحی وب‌سایت می‌پردازیم. از فونت‌های سنتی از نوع Serif تا فونت‌های خلّاقانه و با حالت‌های خاص که اصطلاحاً Script fonts نامیده می‌شوند، هر یک می‌توانند در مکان و کاربرد مناسب خود، استفاده شوند. با انتخاب فونت مناسب و به‌کارگیری آن در جای مناسب در طراحب وب سایت خود، یک سایت جذّاب را به مخاطبان عرضه کنید. در این مقاله بیشتر به بررسی فونت‌های انگلیسی می‌پردازیم و از بررسی فونت‌های فارسی در اینجا خبری نیست! اگر سایت شما وردپرسی است، یکی از افزونه‌های وردپرسی که می‌تواند به مدیریت فونت در سایت شما کمک کند، افزونه FontPress است. همچنین اگر به فونت‌های نمایشی یا Script علاقه دارید، پیشنهاد می‌کنیم این مقاله را بررسی بفرمایید.

روبوتو (Roboto): اولین گزینه فونت مناسب طراحی وب سایت

شاید نام این فونت به گوش اکثر خوانندگان این مقاله خورده باشد. انواع گوناگونی از این فونت طرّاحی شده است، مثلاً Sans Serif ، Condensed یا Slab از انواع متنوع فونت Roboto هستند.

فونت roboto، فونت مناسب طراحی وب سایت

همچنین از نظر وزن فونت1font weight، ابعاد و سبک‌های طرّاحی، تنوّع زیادی در فونت Roboto به چشم می‌خورد. لذا یک فونت مناسب طراحی وب سایت محسوب می‌گردد.

یکی دیگر از نکاتی که در طرّاحی فونت Roboto درنظر گرفته شده، پشتیبانی مناسب از انواع گوناگون کاراکترها است. شما می‌توانید کاراکترهای مربوط به زبان لاتین، زبان‌های روسی، بلغاری و … و همچنین حروف یونانی و امثال آن را در میان کاراکترهای طرّاحی شده برای این فونت بیابید. لذا برای سایت‌هایی که از چند زبان قرار است استفاده کنند، گزینه مناسبی است.

فونت طرّاحی وب Libre Franklin

فونت Libre Franklin یکی از فونت‌های مدرن برای طراحی وب سایت است. این فونت نیز علاوه بر کاراکترهای لاتین، از زبان‌های غیرلاتین مانند روسی، یونانی و … پشتیبانی می‌کند و به‌ عنوان یک فونت مناسب طراحی وب سایت‌های چندزبانه مطرح است.

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

فونت Raleway

فونت طرّاحی وب Raleway از نوع فونت‌های Sans Serif است. لذا خوانایی خوبی برای مخاطبان وب‌سایت‌ها ایجاد می‌کند. دارای وزن‌ها، استایل‌ها و تنوّع فراوان است. از این‌رو طرّاحان وب گزینه‌های انتخاب فراوانی دارند.

تصویر مربوط به فونت raleway

همچنین در سیستم عامل‌های ویندوز و مک از این فونت زیبا به‌خوبی پشتیبانی می‌شود. این فونت ازجمله فونت‌هایی است که در Google Fonts نیز پیدا می‌شود. لذا از نظر لایسنس و دسترسی به فونت (مشابه اکثر فونت‌های معرفی‌شده در این مقاله) مشکلی برای علاقه‌مندان وجود نخواهد داشت.

فونت مناسب طراحی وب سایت Poppins

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

از ویژگی‌های OpenType نیز در طرّاحی آن استفاده شده است. همچنین در طرّاحی برخی قالب‌های وردپرسی (مانند قالب inbio) به‌صورت پیش‌فرض از آن استفاده شده است.

فونت DM Sans

اگر به طرّاحی minimalist علاقه دارید، شاید فونت DM Sans برای شما مناسب باشد. از ظاهر مدرن و جذاب این فونت می‌توانید در طراحی وب سایت خود بهره ببرید.

تصویر فونت مناسب طراحی وب سایت DM-Sans

علاوه بر پشتیبانی از ویژگی‌های OpenType مانند fractions ، ordinals ، superscripts و …، این فونت در حدّاقل 5 وزن مختلف ارائه شده است.

از حروف لاتین و زبان‌های کشورهای غربی به خوبی پشتیبانی می‌کند. لذا اگر قصد ساخت سایت انگلیسی زبان را دارید، فونت DM Sans می‌تواند یک فونت طرّاحی وب ایده‌آل برای شما باشد.

فونت Inter

در ابتدا در مورد فونت Inter باید عرض کنیم که یک فونت طرّاحی شده به‌صورت خاص برای صفحات مانیتور و رابط‌های کاربری2user interfaces است. این فونت از نوع فونت‌های متغیّر3variable fonts محسوب می‌شود. لذا برای طرّاحی واکنش‌گرا گزینه بسیار مناسبی است.

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

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

تصویر قالب وردپرس Grogin

فونت FA

اگر با آیکون‌ها در طرّاحی وب آشنا باشید قطعاً نام Font Awesome یا FA به گوش شما خورده است. در واقع این فونت‌ها از نوع نوشتار معمولی نیستند. بلکه برای ایجاد آیکون در وب‌سایت‌ها استفاده می‌شوند. ازجمله سری فونت‌های معروف این مجموعه می‌توان FA Solid و FA Brand 400 را نام برد. شما با مراجعه به سایت اصلی Font Awesome بیشتر با این ابزار معروف آیکون آشنا خواهید شد.

به‌عنوان توضیح بیشتر باید گفت که FA Solid نسبت به سایر انواع این فونت‌ تضاد رنگی بیشتری داشته و پررنگ‌تر است. لذا برای هدر وب‌سایت‌ها می‌تواند به‌عنوان یک گزینه مناسب مطرح باشد. همچنین FA 400 یک فونت مناسب طراحی وب سایت است که برای قسمت‌هایی از سایت که نیاز به جزئیات بیشتر دارند (در طرّاحی آیکون) می‌تواند مفید باشد.

فونت طرّاحی وب Rubik

اکنون که چندین فونت مناسب طراحی وب سایت را معرّفی کرده‌ایم، بد نیست که با فونت Rubik نیز آشنا شوید. این فونت و طرّاحی خاص آن به گونه‌ای است که آن را به گزینه‌ای مناسب برای استفاده در عناوین4headings تبدیل کرده است. خود فونت Rubik از نوع Sans Serif است که در ترکیب با فونت‌های Serif که برای متن مقالات استفاده می‌شوند، طرّاحی مناسب و کاربرپسندی را ایجاد خواهد کرد.

ازنظر سازگاری با ویژگی‌های OpenType بسیار فونت مناسبی محسوب می‌گردد. همچنین در 9 وزن مختلف ارائه شده و در ابزار Google Fonts نیز در درسترس قرار دارد. از دیگر ویژگی‌های فونت Rubik می‌توان به پشتیبانی از کاراکترهای غیرلاتین (مانند روسی و بلغاری) اشاره کرد که آن را یک فونت طرّاحی وب مناسب کرده است.

جمع‌بندی

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

پاورقی:

  • 1
    font weight
  • 2
    user interfaces
  • 3
    variable fonts
  • 4
    headings

دیدگاهتان را بنویسید

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