Css: font s, the ultimate list of web
Designer Michael Bierut has said that fonts are to lớn written text what tone and accent are to lớn your speech. Basically, fonts are your brand"s voice. If you"re choosing the HTML & CSS fonts you"ll use on your website, what do you want your audience to hear?
Do you want the elegant tones of Optima or the trustworthy frankness of Baskerville? Is the neutral tone of Arial or quirkiness of American Typewriter a better fit for your brand?
Your website’s phông is an important part of your sale message.
Bạn đang xem: Css: font s, the ultimate list of web
It plays a crucial role in creating a chất lượng brand identity. For instance, Facebook, Amazon, Disney, và Microsoft all have distinct fonts that phối them apart. Most are custom-made và variations of existing fonts.
Not long ago, the same monotonous fonts appeared on almost every website, regardless of industry or brand. It was difficult to showroom unique fonts because there was no way khổng lồ display them properly on all browsers.
Now there’s a greater variety of web-safe CSS and HTML fonts that you can use to aid your website development process & better brand your digital marketing efforts.
Keep reading lớn learn about the right web-safe fonts for your brand, or jump ahead with the liên kết below.
What are web-safe fonts?
Web-safe fonts are fonts that can adapt to lớn any browser on any device. By using these types of fonts, website designers and developers ensure that the intended fonts will always display properly on a website page, even if these fonts aren’t installed on the user"s computer.
Before web-safe fonts, if a user didn"t have your particular website’s fonts installed on their computer, their browser would display a generic phông as a backup, like Times New Roman.
As a result, marketers didn’t know how their website pages appeared to lớn the end-user. If a page’s nội dung doesn’t perfectly adapt to a different font, the user can run into functionality và design issues.
Featured Resource
25 HTML & CSS Coding Hacks
Fill out the size to access your coding tips và templates.
Web-safe fonts solve this problem & are now a standard in website design. By choosing a web-safe font, you can be sure that your text will always appear as intended. Let"s take a look at the different types of fonts.
What are the different types of web fonts?
For web-safe fonts, you can use serif, sans-serif, monospace, cursive, fantasy, & MS fonts.
These fonts contain serifs — small decorative strokes that protrude from the main body of the letter. Serif fonts are easier to lớn read in physical, printed formats, as the serifs lead the viewer’s eyes from character to character. Times New Roman is a serif font.
Sans-SerifThese fonts do not have serifs. Sans-serif fonts are easier khổng lồ read on screens, so they are much more common in website copy. Arial is a sans-serif font.
MonospaceThis term refers khổng lồ fonts that have equal spacing between characters. Courier is a monospace font.
CursiveThese fonts resemble handwriting. Brush Script MT is a cursive font.
FantasyFantasy fonts are highly stylized decorative fonts. Luminari is a fantasy font.
MSThe MS in fonts names stands for Microsoft. It shows that Microsoft created this fonts for its digital devices. Trebuchet MS is an example.
Let’s now go into some of the best web-safe fonts you can use.
Web-Safe Fonts for HTML và CSS
Helvetica (sans-serif) Arial (sans-serif) Arial đen (sans-serif) Verdana (sans-serif) Tahoma (sans-serif) Trebuchet MS (sans-serif) Impact (sans-serif) Gill Sans (sans-serif) Times New Roman (serif) Georgia (serif) Palatino (serif) Baskerville (serif) Andalé Mono (monospace) Courier (monospace) Lucida (monospace) Monaco (monospace) Bradley Hand (cursive) Brush Script MT (cursive) Luminari (fantasy) Comic Sans MS (cursive)
1. Helvetica (sans-serif)
Helvetica is one of the most popular & versatile fonts in the world. It"s a neutral và simple sans-serif phông that makes it easy to use in different scenarios and designs.
When lớn use this font: This font is popular for branding, signage, và online applications.
Why we like this HTML and CSS font:
Elegant and clean lookEasy to readMinimalist feelNeutral
2. Arial (sans-serif)
Arial is the most widely used sans-serif font on the web. Made for printers who wanted to use the popular Helvetica phông without the licensing fees, it looks and feels similar.
Many consider Arial & members of the Arial font family the safest website fonts because they’re available on all major operating systems.
When to lớn use this font:
This fonts is popular for all types of online media. You"ll see it in reports, presentations, logos, brochures, jdomain.vns, and advertising.
Why we lượt thích this HTML và CSS font:
CleanIndustrial and professional lookNeutralEasy khổng lồ readGood for long blocks of text
3. Arial black (sans-serif)
Arial đen is another related font in the Arial family. It"s a bold version more suitable for headers, decorative text, & emphasized text. However, its prominence means designers should use it strategically and carefully.
When lớn use this font:
This phông is great for trắng papers, case studies, and other promotional projects. It"s also popular for advertising, ebooks, and business sites.
Why we like this HTML & CSS font:
VersatileBoldGood for headers and decorative textClean & minimalNote: This phông may not display on tiện ích ios or app android devices.
4. Verdana (sans-serif)
Verdana is popular both online and off. While it resembles Arial và Helvetica, it has a simple structure that makes the letters large and clear. Some of its characters have elongated lines, which may be incompatible with some designs. Otherwise, it"s a solid alternative lớn Arial.
When khổng lồ use this font:
This phông is ideal for when you need to put a lot of text in a small space, like in jdomain.vn posts. It"s also very readable, even at small point sizes.
Why we like this HTML & CSS font:
Great for mobile and other small-screen devicesGood for large blocks of text
5. Tahoma (sans-serif)
Like Verdana, the Tahoma font sports a bolder weight và narrower tracking (less space between characters). It"s often used as an alternative to lớn Arial.
When lớn use this font:
This phông is great for mobile apps, websites, & other onscreen use cases.
Why we lượt thích this HTML and CSS font:
Created for screensEasy to read, even at small sizesFlexibleGood for emailNote: This phông may not display on game ios devices.
6. Trebuchet MS (sans-serif)
Trebuchet MS is another web-safe sans-serif font, designed by the Microsoft Corporation in 1996. It’s commonly used for the body toàn thân copy of many websites and can be a solid alternative lớn your site’s sans-serif font. It also may not look as "basic" as Arial.
When lớn use this font:
This font is popular for spreadsheets, websites, và instructions online. Its friendly look also makes Trebuchet MS common in marketing.
Why we lượt thích this HTML & CSS font:
Easy to readDistinct lookNote: This phông may not display on app android devices.
7. Impact (sans-serif)
Impact is a heavy sans-serif font great for drawing attention và creating … well, impact. It’s also notable for being a particularly narrow font. Its characters have a higher width-to-height ratio than other comparable fonts.
Impact was first introduced to lớn digital devices in Microsoft Windows in 1998. Since then it"s seen a resurgence in popularity in mạng internet memes, superimposed atop images for a humorous effect.
When to use this font:
Use this phông to attract attention, usually in headlines or handouts.
Why we like this HTML & CSS font:
Bold and blockyPopular meme fontCommands attentionNote: This fonts may not display on tiện ích ios or apk devices.
8. Gill Sans (sans-serif)
Monotype released Gill Sans in 1928. This phông blends classic and modern influences to lớn create a simple and clean typeface for both print và digital use.
When to use this font: This phông works for most applications, including body copy, branding, & headlines.
Why we lượt thích this HTML and CSS font:
NeutralEasy to lớn readModern và classicNote: This phông may not display on game android devices.
9. Times New Roman (serif)
Times New Roman is the ultimate serif font. It"s extremely popular và the primary phông for Windows devices & applications, lượt thích Microsoft Word. Browsers often revert to lớn it when they can"t display the specified serif font.
Technically, Times New Roman is an updated version of the Times newspaper font, which is used in print newspapers and, as a result, is one of the most recognizable fonts in the world.
When to lớn use this font:
This phông is good for large blocks of text and is familiar lớn most viewers because of its use in publishing. This also makes it a good font choice for websites where visitors may want to print out pages lớn read later.
Why we like this HTML và CSS font:
TimelessBest for page titles, headings, và subheadings onlineGrand & classic look
10. Georgia (serif)
Georgia is another elegant serif font. It was designed to be more readable at different phông sizes than other serif fonts. It accomplishes this with a heavier weight, making it an ideal candidate for mobile-responsive design.
When khổng lồ use this font:
This phông is easy lớn read on-screen, making it ideal for jdomain.vns and body toàn thân copy. It’s often used in newspapers and other online publications.
Why we lượt thích this HTML and CSS font:
Readable on screen, even at small sizesCharming và modernGood for headlines
11. Palatino (serif)
Hermann Zapf designed the old-style Palatino phông in 1949. It was initially used in book publishing and is now popular in all online applications. This is in part because its wide structure và openness make it easy to read at a distance.
Xem thêm: Hướng Dẫn Cài Lamp Trên Centos 7, Hướng Dẫn Cài Đặt Lamp Server Trên Centos 6
When to lớn use this font: Palatino is a good phông for headings, ads, and body copy. It"s also a popular fonts for branding.
Why we like this HTML & CSS font:
Easy to read on screenGood at small sizes
12. Baskerville (serif)
Baskerville has been around since the 1940s & strikes a balance between classic & modern styles. Originally a font for chất lượng book-making, Baskerville has gone through several updates for digital use.
When to use this font: This phông is good for business & agency websites that need to lớn create an aura of establishment & trust.
Why we lượt thích this HTML and CSS font:
ProfessionalEasy to lớn read on screens
13. Andalé Mono (monospace)
Evenly-spaced letters are a feature of all monospaced fonts. This lends a mechanical unique to the text.
Andalé Mono is a perfect example of a monospace font. Apple and IBM developed this sans-serif font and it"s often used in software development environments.
When to use this font:
This font is useful for software development, so it could be a good font if you are building a technology-focused site.
Why we lượt thích this HTML & CSS font:
Consistent lookingCleanNote: This phông may not display on iOS, Windows, or android devices.
14. Courier (monospace)
Courier is a monospace serif phông that closely resembles typewriter text. Many thư điện tử providers use it as their mặc định font. It"s also widely used with coding application displays.
Note that the font Courier New is in the same family as Courier. You can menu Courier after Courier New in your font stack to lớn offer two different, but similar, options to the browser.
When lớn use this font: This font is great for reports and technical documentation, và it"s popular in the legal and tech industries. It"s also a standard phông for screenwriting.
Why we like this HTML and CSS font:
Rare on websitesGood for emailEasy to read
15. Lucida Console (monospace)
Lucida Console was designed khổng lồ be a highly legible monospaced iteration of the broader Lucida typeface. It’s monospace but resembles human handwriting more than other monospace choices we’ve covered, so it looks less mechanical.
When to use this font:
This phông is popular in Windows operating systems & applications. If you are creating something new, this is a simple phông that will feel familiar khổng lồ your audience.
Why we like this HTML & CSS font:
Simple & clearTakes up less space than other similar fontsNote: This font may not display on quả táo or apk devices.
16. Monaco (monospace)
The monospace sans-serif Monaco phông is native to lớn macOS and will be more familiar to táo bị cắn users as a result.
When khổng lồ use this font: This phông is simple but has some chất lượng characters. It"s great for landing pages, pop-ups, and when you want lớn draw attention. This fonts is also popular on gaming and coding sites.
Why we lượt thích this HTML & CSS font:
CleanDistinctDraws attentionNote: This phông may not display on iOS, Windows, or android devices.
17. Bradley Hand (cursive)
Based on designer Richard Bradley"s handwriting, this calligraphic typeface evokes a casual, personal quality. It’s ideal for use in headings, decorative text, and short bodies of text.
When khổng lồ use this font: This fonts is popular in advertising & branding. It"s also good for brands that want khổng lồ make their trang web or e-mail copy feel more casual or personal.
Why we lượt thích this HTML & CSS font:
Easy khổng lồ read, even at small sizesHandwriting lookNote: This phông may not display on game android devices.
18. Brush Script MT (cursive)
Brush Script MT is a heavily embellished script phông designed khổng lồ mimic quick handwritten strokes. While it can evoke nostalgia in some readers, it’s best to lớn limit this font to decorative uses, as its style comes at the cost of legibility.
When khổng lồ use this font: When you want your website to feel more personal this phông is another option. It"s also often used in posters và signage.
Why we lượt thích this HTML & CSS font:
VersatileNostalgicMimics cursive handwritingMore formal than Bradley HandNote: This font may not display on ios or apk devices.
19. Luminari (fantasy)
Fantasy fonts are typically decorative and best used in headlines that only contain a few words. Luminari is a decorative fonts with a medieval quality. Use it to showroom a Gothic essence lớn your website pages.
When khổng lồ use this font: This fonts is popular for wedding websites, greeting cards, & branding. It has a whimsical Gothic chất lượng that may be hard khổng lồ read in body toàn thân copy but works well in headlines and subheadings.
Why we lượt thích this HTML and CSS font:
WhimsicalNostalgicNote: This font may not display on iOS, Windows, or android devices.
20. Comic Sans MS (cursive)
At last, we arrive at the phông that everyone likes to lớn poke fun at, Comic Sans. Designed lớn imitate the style of lettering found in comic books, Comic Sans MS feels informal và fun. It"s also been the target of many mạng internet jokes.
Still, Comic Sans is useful for accessibility reasons. Because it lacks similar letterforms lượt thích p/q và b/d, people with dyslexia tend to lớn experience less difficulty with it than with commonplace fonts.
When to use this font: This fonts is great for brands that focus on fun, lượt thích resources for young children.
Why we like this HTML và CSS font:
Easy lớn readCasualNote: This font may not display on game ios or game android devices.
Web-Safe HTML và CSS Fonts for Mac and iOS Devices
21. Optima (sans-serif)
Optima is another versatile & elegant font. Its clean & classic look makes it especially popular in beauty niches.
When to lớn use this font: Whether you"re creating a jdomain.vn, landing page, ebook, or store signage, this font is useful và versatile.
Why we lượt thích this HTML và CSS font:
ElegantClassicCleanVersatile
22. Didot (serif)
This old French typeface was originally used for printing presses. It’s notable for its elegant aesthetic & can showroom a formal unique to your copy.
When to lớn use this font: Many modern & luxury brands use this fonts in their logos & other materials. This fonts is good on websites because it’s easy khổng lồ read at low resolution.
Why we lượt thích this HTML and CSS font:
Good for headers & taglinesElegant
23. American Typewriter (serif)
If you want lớn invoke a classic, nostalgic unique with your text, this is an ideal phông to vày it. American Typewriter imitates typewriter print and works well for stylized body text.
When khổng lồ use this font: This phông is good for branding, headlines, và adding flair lớn your trang web pages.
Why we like this HTML & CSS font:
Easy to readVersatileDistinct
As you scanned these web-safe fonts you may have noticed some exceptions for usage. You may also have a fonts you already love và are using for your brand that isn"t on this list.
How vì chưng you think your audience will feel once they get comfortable with your chosen font, then that experience abruptly changes when they"re online? Maybe a long-time customer usually scans your site at trang chủ on their laptop. Every time they log in, they see the elegant lines of the serif font Didot.
But one day they want lớn show a friend your site on their Android, và sans-serif Arial pops up instead. Will they still feel the same about your site và your products?
These are important decisions lớn make as you think about web-safe fonts. This is where font stacks come in.
Font Stacks
CSS phông stacks allow you to lớn give several fonts backups lớn the browser. Và they’re not just backups in case of technical or vps failures, either. For example, consider a user who dislikes the system’s mặc định font và deletes it from their operating system. You can’t control that, so it’s better lớn be safe.
To address this problem, CSS allows you to địa chỉ cửa hàng a danh mục of similar backup fonts in a font stack. A fonts stack improves your site’s universal compatibility with different browsers & operating systems. If the first phông doesn’t work, the browser will try the next one in the stack, và so on.
To make a font stack, địa chỉ several related fonts names khổng lồ the font-family property. Order your fonts by priority — the phông you want most should appear first, & a generic fonts family should kết thúc the list. Here’s an example:
p. font-family: "Playfair Display", "Didot", "Times New Roman", Times, serif;
These are all serif fonts, ensuring the experience stays consistent. Or you can use another type of font across your phông stack.
Do I need to download web-safe fonts to lớn use them in a font stack?
No. Because these fonts are web-safe, there’s no need to tải về a font file. When you specify these fonts in your font stack, your browser will quickly recognize the font that you’re referring to and show it khổng lồ your site visitor.
Learn More: The Beginner"s Guide lớn HTML và CSS
Want to lớn learn more about HTML? tải về our miễn phí guide for best practices for getting started with HTML.
With so many advances in web design, it’s easy to wonder whether web-safe fonts are obsolete or whether phông stacks are too complicated. After all, we now have AI bots & a dedicated framework for designing smartphone pages. Surely a công nghệ exists that makes all fonts web-safe.
But this is simply not true. Let’s discuss why web-safe fonts are still important today.
Chuyên mục: Domain Hosting
