{"id":40008,"date":"2016-10-12T05:00:03","date_gmt":"2016-10-12T12:00:03","guid":{"rendered":"https:\/\/creativemarket.com\/blog\/?p=40008"},"modified":"2024-04-12T02:55:31","modified_gmt":"2024-04-12T09:55:31","slug":"bold-serif-fonts-in-web-design-20-stunning-examples","status":"publish","type":"post","link":"https:\/\/creativemarket.com\/blog\/bold-serif-fonts-in-web-design-20-stunning-examples","title":{"rendered":"Bold Serif Fonts in Web Design: 20 Stunning Examples"},"content":{"rendered":"Serif fonts

are seen as decorative, but some believe that their short projections at the ends of letters actually help reading speed and overall readability. Regardless of where you stand on this, various websites have been using bold serif fonts in their hero sections with awesome results.\nHere’s a rundown of the 20 best.\n<\/p>

<\/span>1. The Next Rembrandt<\/a><\/span><\/h2>\"the-next-rembrandt-bold-serif-fonts\"

\nNote the large typeface and confident lines that make up this bold serif font, which is Garamond Premier Pro. The white-on-black contrast makes it easy to admire the characters in the hero section of this site.\n<\/p>

<\/span>2. World<\/a> Chess<\/a><\/span><\/h2>\"world-chess-bold-serif-fonts\"

\nA great resource for chess fans all over the globe, this site features bold serif fonts in the hero image. You’re looking at Superior Title font.\n<\/p>

<\/span>3. Femme Fatale Studio<\/a><\/span><\/h2>\"femme-fatale-studio-bold-serif-fonts\"

\nFemme Fatale Studio uses lowercase, bold serif fonts that are subtle, more than anything else. Imposed over the faded background, this Sang_bleuregular font adds a touch of the dramatic.\n<\/p>

<\/span>4. Centurion Magazine<\/a><\/span><\/h2>\"centurion-magazine-bold-serif-fonts\"

\nYou’ll see bold serif fonts in the rotating carousel of images in the hero section. Centurion Magazine chose to go with Domaine Display Web Semibold, a choice that’s easy to read.\n<\/p>

<\/span>5. 12 Dishes<\/a><\/span><\/h2>\"12-dishes-bold-serif-fonts\"

\nThis site featuring tasty recipes from small-food producers relies on Majesti Bannerbold as its font choice. The serif is both stylish and legible, making it easy to see the site’s unique value proposition.\n<\/p>

<\/span>6. Benjamin Guedj<\/a><\/span><\/h2>\"benjamin-guedj-bold-serif-fonts\"

\nBenjamin’s site showcases all of his projects, but it also showcases lovely Portrait serif fonts in the middle of the page, where it can’t be missed. The overly large fonts offer a luxurious reading experience.\n<\/p>

<\/span>7. Bonne Marque<\/a><\/span><\/h2>\"bonne-marque-bold-serif-fonts\"

\nThis design firm’s homepage features its own name in the header in stylish and thought-provoking lettering. The white Quarto B font stands out effectively against a pitch-black background.\n<\/p>

<\/span>8. Ben Lukas Boysen<\/a><\/span><\/h2>\"ben-lukas-boysen-bold-serif-fonts\"

\nBen Lukas Boysen’s portfolio site boasts a minimalist design scheme, so it’s not unexpected to see the only bold serif font in the title of his About page. Didot LTPro Bold makes for an ultra-simple typeface.\n<\/p>

<\/span>9. Haute Horlogerie<\/a><\/span><\/h2>\"haute-horlogerie-bold-serif-fonts\"

\nRight in the center of the screen, in the hero section, you’ll see the site’s use of Playfair_displayregular. The font choice is interesting while not damaging readability.\n<\/p>

<\/span>10. SA Studio<\/a><\/span><\/h2>\"sa-studio-bold-serif-fonts\"

\nThis creative studio features bold serif font as part of the faded-out background, which is a unique touch. The Rasmus typeface is legible and provides a sense of majesty to the page.\n<\/p>

<\/span>11. Le Printemps du Polar: La Femme Fatale<\/a><\/span><\/h2>\"la-femme-fatale-bold-serif-fonts\"

\nThere seems to be a burgeoning pattern of bold serifs and “femme fatale†happening here! This site uses all uppercase characters in its Yorker font that gives the page an evocative look and feel.\n<\/p>

<\/span>12. Sassi Holford<\/a><\/span><\/h2>\"sassi-holford-bold-serif-fonts\"

\nSassi Holford, maker of wedding dresses, has a gorgeous site that shows off not only its dresses in moving animations in the background, but also displays fancy and readable Freight Display Pro font.\n<\/p>

<\/span>13. Vito Salvatore<\/a><\/span><\/h2>\"vito-salvatore-bold-serif-fonts\"

\nInteractive art director Vito Salvatore’s site boasts Latin Modern Roman 10 Regular font in the hero section of his portfolio. Each time you scroll down, you see more projects with that bold font choice.\n<\/p>

<\/span>14. Skybrud<\/a><\/span><\/h2>\"skybrud-bold-serif-fonts\"

\nDigital agency Skybrud presents bolded serif font at the bottom-left of its homepage, which is a curious choice. The Vogue Paris Regular font nevertheless looks bold and imposing.\n<\/p>

<\/span>15. Dishoom<\/a><\/span><\/h2>\"dishoom-bold-serif-fonts\"

\nDishoom’s plain and stripped-down aesthetics allow its Cheltenham serif font to be the star of the entire homepage. The typeface’s unassuming and quiet presentation matches the minimalism of the site.\n<\/p>

<\/span>16. Wikiwand<\/a><\/span><\/h2>\"wikiwand-bold-serif-fonts\"

\nThis interesting site that updates Wikipedia’s retro look and makes it more modern also features attractive and big Lora font right on top of the site’s moving animations.\n<\/p>

<\/span>17. Palais Coburg<\/a><\/span><\/h2>\"palais-coburg-bold-serif-fonts\"

\nRight in the header, you’ll notice the site’s Excelsior typeface that blesses the homepage with a dignified and classy look. The black-on-white contrast makes for effective reading.\n<\/p>

<\/span>18. Cerveza Austral<\/a><\/span><\/h2>\"cerveza-austral-bold-serif-fonts\"

\nThis website shows off fine Zebrawood Fill fonts right in the center of the page. The height and distance between the characters in the hero section makes for easy readability and a nice design touch.\n<\/p>

<\/span>19. Typewolf<\/a><\/span><\/h2>\"typewolf-bold-serif-fonts\"

\nTypography resource Typewolf sports some very elegant and noticeable bold serif fonts in the header. The use of Domaine Text gives its homepage a clean and professional look.\n<\/p>

<\/span>20. DuJour<\/a><\/span><\/h2>\"dujour-bold-serif-fonts\"

\nCelebrity and lifestyle magazine DuJour’s bold serif fonts in the header are quite striking. The contrast between some of the very fat stems and stresses and the thin serifs is remarkable.\n<\/p>

<\/span>Bold Serifs for Effectiveness<\/span><\/h2>

\nHero sections are meant to grab a site visitor’s attention as soon as he or she lands on the page. These beautiful and impressive typefaces<\/a> use bold and serifs strategically to capture that attention immediately and never let it go!\nWhat do you think of this selection of the best bold serif fonts on the hero sections of sites all over the web? Which appeal to you the most or the least? Leave a comment, and let everyone know.\n<\/p>

Products Seen In This Post:<\/strong><\/p>

<\/figure>\n \n
<\/figure>\n \n<\/p><\/a>\n","protected":false},"excerpt":{"rendered":"

Serif fonts are seen as decorative, but some believe that their short projections at the ends of letters actually help reading speed and overall readability. Regardless of where you stand on this, various websites have been using bold serif fonts in their hero sections with awesome results. Here’s a rundown of the 20 best. 1. The […]<\/p>\n","protected":false},"author":144,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[1659,59],"tags":[288],"topics":[],"class_list":["post-40008","post","type-post","status-publish","format-standard","hentry","category-trend-reports","category-design-trends","tag-font-collection"],"acf":[],"yoast_head":"\nBold Serif Fonts in Web Design: 20 Stunning Examples - Creative Market Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/creativemarket.com\/blog\/bold-serif-fonts-in-web-design-20-stunning-examples\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bold Serif Fonts in Web Design: 20 Stunning Examples\" \/>\n<meta property=\"og:description\" content=\"Serif fonts are seen as decorative, but some believe that their short projections at the ends of letters actually help reading speed and overall\" \/>\n<meta property=\"og:url\" content=\"https:\/\/creativemarket.com\/blog\/bold-serif-fonts-in-web-design-20-stunning-examples\" \/>\n<meta property=\"og:site_name\" content=\"Creative Market Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/crtvmrkt\" \/>\n<meta property=\"article:published_time\" content=\"2016-10-12T12:00:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-12T09:55:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2016\/10\/11232045\/the-next-rembrandt-bold-serif-fonts.jpg.webp\" \/>\n<meta name=\"author\" content=\"Marc Schenker\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:site\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marc Schenker\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/bold-serif-fonts-in-web-design-20-stunning-examples\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/bold-serif-fonts-in-web-design-20-stunning-examples\",\"name\":\"Bold Serif Fonts in Web Design: 20 Stunning Examples - Creative Market Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/bold-serif-fonts-in-web-design-20-stunning-examples#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/bold-serif-fonts-in-web-design-20-stunning-examples#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2016\\\/10\\\/11232045\\\/the-next-rembrandt-bold-serif-fonts.jpg.webp\",\"datePublished\":\"2016-10-12T12:00:03+00:00\",\"dateModified\":\"2024-04-12T09:55:31+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#\\\/schema\\\/person\\\/b1e20fb9aeef6b45762dbab55e31c7c8\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/bold-serif-fonts-in-web-design-20-stunning-examples#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/creativemarket.com\\\/blog\\\/bold-serif-fonts-in-web-design-20-stunning-examples\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/bold-serif-fonts-in-web-design-20-stunning-examples#primaryimage\",\"url\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2016\\\/10\\\/11232045\\\/the-next-rembrandt-bold-serif-fonts.jpg.webp\",\"contentUrl\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2016\\\/10\\\/11232045\\\/the-next-rembrandt-bold-serif-fonts.jpg.webp\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/bold-serif-fonts-in-web-design-20-stunning-examples#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bold Serif Fonts in Web Design: 20 Stunning Examples\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\",\"name\":\"Creative Market Blog\",\"description\":\"Creative Market Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Bold Serif Fonts in Web Design: 20 Stunning Examples - Creative Market Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/creativemarket.com\/blog\/bold-serif-fonts-in-web-design-20-stunning-examples","og_locale":"en_US","og_type":"article","og_title":"Bold Serif Fonts in Web Design: 20 Stunning Examples","og_description":"Serif fonts are seen as decorative, but some believe that their short projections at the ends of letters actually help reading speed and overall","og_url":"https:\/\/creativemarket.com\/blog\/bold-serif-fonts-in-web-design-20-stunning-examples","og_site_name":"Creative Market Blog","article_publisher":"https:\/\/www.facebook.com\/crtvmrkt","article_published_time":"2016-10-12T12:00:03+00:00","article_modified_time":"2024-04-12T09:55:31+00:00","og_image":[{"url":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2016\/10\/11232045\/the-next-rembrandt-bold-serif-fonts.jpg.webp","type":"","width":"","height":""}],"author":"Marc Schenker","twitter_card":"summary_large_image","twitter_creator":"@creativemarket","twitter_site":"@creativemarket","twitter_misc":{"Written by":"Marc Schenker","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/creativemarket.com\/blog\/bold-serif-fonts-in-web-design-20-stunning-examples","url":"https:\/\/creativemarket.com\/blog\/bold-serif-fonts-in-web-design-20-stunning-examples","name":"Bold Serif Fonts in Web Design: 20 Stunning Examples - Creative Market Blog","isPartOf":{"@id":"https:\/\/creativemarket.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/creativemarket.com\/blog\/bold-serif-fonts-in-web-design-20-stunning-examples#primaryimage"},"image":{"@id":"https:\/\/creativemarket.com\/blog\/bold-serif-fonts-in-web-design-20-stunning-examples#primaryimage"},"thumbnailUrl":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2016\/10\/11232045\/the-next-rembrandt-bold-serif-fonts.jpg.webp","datePublished":"2016-10-12T12:00:03+00:00","dateModified":"2024-04-12T09:55:31+00:00","author":{"@id":"https:\/\/creativemarket.com\/blog\/#\/schema\/person\/b1e20fb9aeef6b45762dbab55e31c7c8"},"breadcrumb":{"@id":"https:\/\/creativemarket.com\/blog\/bold-serif-fonts-in-web-design-20-stunning-examples#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/creativemarket.com\/blog\/bold-serif-fonts-in-web-design-20-stunning-examples"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/creativemarket.com\/blog\/bold-serif-fonts-in-web-design-20-stunning-examples#primaryimage","url":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2016\/10\/11232045\/the-next-rembrandt-bold-serif-fonts.jpg.webp","contentUrl":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2016\/10\/11232045\/the-next-rembrandt-bold-serif-fonts.jpg.webp"},{"@type":"BreadcrumbList","@id":"https:\/\/creativemarket.com\/blog\/bold-serif-fonts-in-web-design-20-stunning-examples#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/creativemarket.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Bold Serif Fonts in Web Design: 20 Stunning Examples"}]},{"@type":"WebSite","@id":"https:\/\/creativemarket.com\/blog\/#website","url":"https:\/\/creativemarket.com\/blog\/","name":"Creative Market Blog","description":"Creative Market Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/creativemarket.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/40008","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/users\/144"}],"replies":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/comments?post=40008"}],"version-history":[{"count":0,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/40008\/revisions"}],"wp:attachment":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/media?parent=40008"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/categories?post=40008"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/tags?post=40008"},{"taxonomy":"topics","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/topics?post=40008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}