10 ترکیب عالی فونت گوگل که می توانید کپی کنید

 10 ترکیب عالی فونت گوگل که می توانید کپی کنید

John Morrison

10 ترکیب عالی فونت Google که می توانید کپی کنید

مرد معمولی در نظر می گیرد که کدام طعم Doritos با Heineken خود طعم خوبی خواهد داشت. مرد پیچیده در نظر می گیرد که کدام پنیر با شراب انتخابی او به خوبی جفت می شود. البته طراح در نظر می‌گیرد که کدام دو فونت در یک صفحه عالی به نظر می‌رسند.

امروز می‌خواهیم از Google Font API به عنوان زمین بازی برای ترکیب فونت‌ها و یافتن جفت‌های ایده‌آل استفاده کنیم. شما می‌توانید از میان آن‌ها عبور کنید و فوراً انتخاب‌هایی را که فکر می‌کنید برای پروژه‌هایتان مناسب هستند، انتخاب کنید.

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

Fonts را کاوش کنید

چرا Google Fonts؟

بازی فونت وب چند سال پیش در حال پخش بود. همه ایده و راه حلی داشتند، اما هیچ کس واقعاً نمی دانست که وقتی گرد و غبار فرو می نشیند، کدام یک باقی می ماند. به نظر من، این بحث تمام شد: @font-face برنده شد.

در اینجا دلیل برنده شدن @font-face است. اول، یک راه حل CSS خالص راه حلی است که توسعه دهندگان می توانند با آن همکاری کنند. در مرحله بعد، این واقعیت که @font-face به طور کامل از انتخاب متن و اقداماتی مانند کپی و چسباندن پشتیبانی می کند، به این معنی است که کارشناسان قابلیت استفاده آن را دوست دارند. در نهایت، این واقعیت که شما به راحتی می توانید دستور العمل @font-face را برای تقریباً هر فونتی تهیه کنید به این معنی است که طراحان آن را دوست دارند زیرا طیف گسترده ای از فونت های دارای مجوز مناسب را برای انتخاب دارند. اگر دریافت کنیدترکیبات فونت رایگان مورد علاقه دایرکتوری Google هیچ کمبودی از پیشنهادهای زشت ندارد، بنابراین در کمترین موارد دلخواه خود نیز به اشتراک بگذارید!

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

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

با این حال. ، من قبلاً چندین بار از این راه حل در Design Shack استفاده کرده ام بنابراین می خواستم امروز همه چیز را تغییر دهم و از چیز دیگری استفاده کنم. از آنجایی که فهرست فونت Google رایگان است و گزینه‌های زیادی دارد، به نظر می‌رسد که مناسب باشد!

نکته‌های سریع برای ترکیب فونت‌ها

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

از خانواده فونت استفاده کنید

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

کنتراست پادشاه است

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

Go Easy

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

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

در نهایت، اجازه دهید محتوا نقش مهمی در انتخاب فونت شما اگر محتوای شما مدرن و حرفه ای است، از فونت هایی استفاده کنید که این ویژگی ها را نشان می دهد. اگر قرار است شبیه چیزی از دهه 1700 باشد، Helvetica Neue Ultra Light ممکن است بهترین راه نباشد.

فونت ها!

بحث کافی است، بیایید به کار خود بپردازیم. به فهرست فونت گوگل بروید و گزینه های زیر را جستجو کنید.

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

Lobster &Cabin

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

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

HTML

1 2

CSS

1 2 3 4 5 6 7 8 9 10 11 h1 { فونت - خانواده : 'خرچنگ' , جورجیا , تایمز , serif ; اندازه فونت : 70px ; خط - ارتفاع : 100px ; } p { font-family : 'Cabin' , Helvetica , Arial , sans - serif ; اندازه فونت : 15px ; خط - ارتفاع : 25 پیکسل ; }

Raleway & Goudy Bookletter 1911

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

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

HTML

1 2

CSS

1 2 3 4 5 6 7 8 9 10 11 h1 { font - family : 'Raleway' , Helvetica , Arial , sans-serif ; اندازه فونت : 50px ; خط - ارتفاع : 70 پیکسل ; } p { font-family : 'Goudy Bookletter 1911' , Georgia , Times , serif ; اندازه فونت : 15px ; خط - ارتفاع : 25 پیکسل ; }

Allerta & Crimson Text

Allerta یک sans-serif نسبتاً جسور با شخصیت است. اگر چیزی کسل کننده یا چیز دیوانه کننده نمی خواهید، میانه خوبی است که هم در تیتر و هم در کپی بدنه عالی به نظر می رسد.

همچنین ببینید: Affinity Photo در مقابل Lightroom: کدام برنامه برای ویرایش عکس بهترین است؟

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

HTML

1 2

CSS

همچنین ببینید: نسبت طلایی در طراحی: مثال ها و amp; نکات
1 2 3 4 5 6 7 8 9 10 11 h1 { فونت - خانواده: 'Allerta'، Helvetica، Arial، sans-serif; اندازه فونت : 50px ; خط - ارتفاع : 55 پیکسل ; } p { font-family : 'Crimson Text' , Georgia , Times , serif ; اندازه فونت : 16px ; خط - ارتفاع : 25 پیکسل ; }

Arvo & PT Sans

هیچ قلمی بدون یک سری slab خوب کامل نخواهد بود. فهرست فونت گوگل تنها چند مورد از این موارد را دارد و Arvo در حال حاضر یکی از جسورانه ترین گزینه ها است. من خیلی از شخصیت ها را دوست دارم، اما اعتراف می کنم که "S" کمی ناخوشایند به نظر می رسد.سری: PT Sans. انواع مختلفی از این موجود است اما نسخه ساده بهترین برای کپی بدنه است. من خیلی دوست دارم شخصیت‌ها گرد هستند، احساس بسیار دوستانه‌ای را ایجاد می‌کند.

HTML

1 2

CSS

1 2 3 4 5 6 7 8 9 10 11 h1 { font-family : 'Arvo' , Georgia , Times , serif ; اندازه فونت : 59px ; خط - ارتفاع : 70 پیکسل ; } p { font-family : 'PT Sans' , Helvetica , Arial , sans - serif ; اندازه فونت : 16px ; خط - ارتفاع : 25 پیکسل ; }

Dancing Script & Josefin Sans

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

از آنجایی که Dancing Script بسیار زنانه تر از Lobster است، آن را جفت کردم. با Joesfin، یک sans-serif واقعا نازک برای پیشبرد این سبک. این ترکیب قطعاً برای هر محصول یا وب سایتی با شیار زنانه مناسب است.

HTML

1 2

CSS

1 2 3 4 5 6 7 8 9 10 11 12 h1 { font - family : 'Dancing Script' , Georgia , Times , Serif ; اندازه فونت : 59px ; خط - ارتفاع : 60 پیکسل . } p { font-family : 'Josefin Sans' , Helvetica , Arial , sans - serif ; اندازه فونت: 18 پیکسل ; خط - ارتفاع : 25 پیکسل ; حاشیه - بالا : 15 پیکسل ; }

Allan & Cardo

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

جفت شدن من با یک فونت سبک قدیمی (Cardo) تقریباً تضاد دوره‌های زمانی به نظر می‌رسد، اما من واقعاً از ظاهر آنها خوشم آمد. به‌راحتی یک sans-serif سبک را انتخاب کنید.

HTML

1 2

CSS

1 2 3 4 5 6 7 8 9 10 11 h1 { فونت - خانواده : 'Allan' , Helvetica , Arial , sans - serif ; اندازه فونت : 70px ; خط - ارتفاع : 75 پیکسل ; } p { font-family : 'Cardo' , Georgia , Times , serif ; اندازه فونت : 18 پیکسل ; خط - ارتفاع : 25 پیکسل ; }

Molengo & Lekton

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

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

HTML

1 2

CSS

1 2 3 4 5 6 7 8 9 10 11 h1 { font - family : 'Molengo' , Georgia , Times , serif ; اندازه فونت : 56px ; خط - ارتفاع : 80 پیکسل . } p { font - family : 'Lekton' ,Helvetica , Arial , sans - serif ; اندازه فونت : 16px ; خط - ارتفاع : 25 پیکسل ; }

Droid Serif & Droid Sans

یکی از نکات ما در بالا ماندن در یک خانواده را پیشنهاد کرد. من این را در اینجا با ترکیب طبیعی Droid Serif و Droid Sans عملی کردم.

همانطور که می بینید، هر دو تایپ فیس های زیبایی هستند که کاملا مکمل یکدیگر هستند. اینها به راحتی قابل تغییر هستند به طوری که Droid Serif فونت بدنه و Droid Sans فونت هدر باشد. شما می توانید Droid را در طبیعت در یک وبلاگ طراحی بسیار محبوب مشاهده کنید.

HTML

1 2

CSS

1 2 3 4 5 6 7 8 9 10 11 h1 { font - family : 'Droid Serif' , Georgia , Times , serif ; اندازه فونت : 49px ; خط - ارتفاع : 65 پیکسل ; } p { font-family : 'Droid Sans' , Helvetica , Arial , sans - serif ; اندازه فونت : 14 پیکسل ; خط - ارتفاع : 25 پیکسل ; }

Corbin & Nobile

اگر از طرفداران Cooper Black هستید، Corben یک جایگزین رایگان عالی است. این سریف چاق و تونی برای هر چیزی که باید حس دهه 1920 داشته باشد عالی است.

Nobile فونت مدرن تری با اشکال حروف است که به صورت عمودی کشیده به نظر می رسند. سبک مینیمال در اینجا تمرکز شما را روی تیترهای جسورانه حفظ می کند.

HTML

1 2

CSS

1 2 3 4 5 6 7 8 9 10 11 h1 { font -خانواده : 'کوربن' , جورجیا , تایمز , سریف ; اندازه فونت : 40px ; خط - ارتفاع : 55 پیکسل ; } p { font-family : 'Nobile' , Helvetica , Arial , sans - serif ; اندازه فونت : 13px ; خط - ارتفاع : 25 پیکسل ; }

Ubuntu & Vollkorn

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

Volkorn قطعاً یک نوع تایپ بسیار متفاوت است که دوران طولانی گذشته را منعکس می کند. باز هم، همیشه مراقب ترکیب فونت های دوره های زمانی مختلف باشید. مطمئن شوید که عمدی و با هدف است!

HTML

1 2

CSS

1 2 3 4 5 6 7 8 9 10 11 h1 { font - family : 'Ubuntu' , Helvetica , Arial , sans - serif ; اندازه فونت : 50px ; خط - ارتفاع : 65 پیکسل ; } p { font-family : 'Vollkorn' , Georgia , Times , serif ; اندازه فونت : 16px ; خط - ارتفاع : 25 پیکسل ; }

موارد دلخواه خود را به ما بگویید!

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

یک نظر در زیر بنویسید و نظر خود را به ما بگویید

John Morrison

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