Websites With Large Headers
15+ Beautiful Website Headers and Why They Work So Well
What’s the first thing a user sees on your website?
Exactly, the header.
If that’s not appealing enough, if it doesn’t bring clarity, your users might just go away, and maybe never come back.
We don’t want that, do we?
Website headers are a central part of designing a website. They play a key role in grabbing the users’ attention and establishing a connection with the website’s visitors.
This is why, in the following lines, we’ll tackle some header design principles you should be aware of when designing a website header.
Header Design Principles to Follow
Research studies have found that the users’ eyes move on a webpage by following one of the 3 patterns:
The Gutenberg pattern
Image Source: Gutenberg pattern can be applied to text-heavy content. It suggests the readers’ eyes sweep across and down the page in a series of horizontal movements.
Example:
The Z-shaped pattern
Image Source: The Z-pattern defines the path the users’ eyes follow when scanning a page, a path that takes the shape of a Z letter. It is recommended for the design of landing pages, that readers quickly scan.
The F-shaped pattern
Image Source: This pattern describes the most commonly used style of reading blocks of content in the online medium. Users quickly scan a webpage, and their eyes follow an F-pattern.
Without going into further details about these patterns, we’d like to strengthen that for any of these models, the upper horizontal line is where the visitors begin scanning a page.
What to integrate into a website header?
These patterns show why a web designer must carefully decide what users should see first. The header should serve as a hook that will catch their attention and invite them to explore the rest of the page.
There’s no chance to make a second impression. So, you should think twice about what to include in the header:
Strong hero image
A hero image is a very large banner image that is shown above the fold on a webpage. It is included in the header section and is the first thing the users see when arriving on a website. Hero images also have the purpose of attracting visitors’ attention to the unique selling point (USP) of the business. A best-case practice states that using faces of real people in the hero images can help visitors relate better to the brand. Communication gets more humane and personal.
Source:
Unique selling point (USP)
The USP is a phrase that explains the reason a business exists. It should reveal what the business does, why, and for whom. It should also emphasize unique features and benefits, that make the brand stand out among its competitors. A strong USP is vital in conveying the right message to the website visitors, and, ultimately, in converting them into customers.
Brand name
The brand name gets people accustomed to the site identity or reinforces the image people have of your business identity.
The image should reflect your brand personality and ensure your brand voice is consistent throughout the whole website. It should be easily recognizable even if cut out from the website header. And when placed into the website header, it should play a key role in establishing a personal connection with every user.
Product video
Because it only takes 50 milliseconds for users to form an opinion about a website, it means that you should have the most important messages in the header. This is why many businesses don’t wait for their users to scroll down and get to the features of their product/service, but they’re using the power of video to convey their message better. Also, let’s not forget that 78% of people watch online videos every week, and 55% view online videos every day.
Call to action (CTA)
A CTA is a message (usually on a button), that triggers a certain response from the website visitors. The Call-to-action should be clearly defined and easy to understand by the website visitors. Naturally, a CTA placed in the header, right where visitors start their journey into the website, increases the chances to get the wanted action from the respective users.
Product featuring
In case you run an eCommerce store, you will want to emphasize the quality and convenience of a certain product, and the best way to do it is to include that product in the header. The users’ attention will be driven towards that best deal, and they will be prone to step into the buying process.
In any of the above cases, the general rule of thumb is: keep it simple, keep it clear, make the header engaging! Research shows that “the average difference in how users treat info above vs. below the fold is 84%. ” So, it is best to focus your efforts on reducing those numbers as much as possible. And you’ll do it best if you’ve set yourself some goals as to what you want to transmit.
Large websites, like, limit the space dedicated to the header to only a small amount. This is done on purpose, as the intention is to let the users’ attention be directed to something of more importance, like products, or services, or videos (e. g. YouTube).
Sometimes you don’t even need a header, or if you do, you need just a small one.
It all depends on the website’s particularities. Think about it and give your website the personality it needs, no matter what the web design trends are “telling” you now and then.
What Does Your Website Header Inspire?
Besides transmitting certain messages, you can also consider instilling certain emotions in the readers. Depending on the purpose you give to the header, it may inspire in the readers one of the following:
Curiosity
For certain websites, it would be suitable to set up a header that inspires curiosity in the readers. They will want to find out more, they will long for more, they will rush into exploring the rest of the story.
It’s how I feel about this header from Canva. They make a huge promise right there: “Design anything”. And you’re invited to test this. Can you resist?
Action
In some cases, it’s better to stir action directly from the header. With a call-to-action, you can invite users to click on a button, or perform some other interaction with the website, right off the bat. In the case of Planable, their USP is directly connected to the CTA below. also, if you’re not quite ready to buy, there’s an option to schedule a demo as well.
Trust
It might be useful to start by inspiring trust in your visitors. You want them to take some action later on, and for doing that, they have to feel fully confident that they make the right decision.
Let’s see how Salesforce does it. They state that they are the world’s largest CRM. Okay, you might say that 99% of the companies out there aren’t the first in their field. And you’d be right. But, if you read below, there’s definitely something that you can use. There’s a case study that shows how efficient the product is. You can leverage such a case study yourself.
Pain
Why on earth would you want to inspire pain in the readers, especially from the header? Well, many companies have their marketing based on the FUD principle (Fear, Uncertainty, Doubt). At an early stage of the conversion process, fear/pain will trigger the decision to immediately apply a solution and make that pain fade out.
This can be an approach for cybersecurity services, physical security services, but also in healthcare or pension funds.
Such an approach can be leveraged in campaigns that want to make people aware that you need to vaccinate against COVID, or to wear a seatbelt.
Laughter
Maybe you want to emotionally connect with the visitors, from the very beginning. And there’s no better way to do this than make them laugh. And laugh loud. A sense of complicity is being formed and you’ll have your users stand by your side, while they’re exploring the website.
Familiarity
Connecting the users’ situation with a similar situation presented in the header can create a certain degree of familiarity.
Types of Headers for Different Types of Websites
Depending on the website specificities, a header will fit better the overall design than another. Accordingly, you should have a clear idea of what type of header will best suit your own website (be it eCommerce, blog, portfolio, online newspaper, etc. ).
CTA-focused header
In the case of Blue Apron, the website header uses a large video, instead of a large hero image. It transmits a sense of coziness, familiarity, appetite.
Next, we have a CTA that invites the user to take action to benefit from the same cozy and yummy experience.
The CrazyEgg website comes with a header that invites users to take their product for a live demonstration. Their product is just a perfect fit for such real-time demonstrations. And it proves instantly the benefits of the product. Their are also using a visual cue, pointing out to the CTA: the hand of the man in the balloon is directing the eye towards the button.
Brand-focused header
This is a beautiful example of a website with a header focusing on brand identity and branding elements. It includes the logo, a replication of the brand logo colors in the upper part, as well as their slogan.
Content-focused header
This is very suitable for blogs, and magazines, which promote articles and stories.
But, I also found some exceptions.
Patagonia is not promoting their shop on the homepage, but, they push stories that show their commitment to making a change in the world. This current story, featured in the website’s header, is about slavery and activism.
In the case of Ikea, the left-hand side of the screen prompts visitors to one of the online stores, while the other half prompts users to read the story of Ikea.
Video background-focused header
BUKWILD integrated 3 different videos in the website header. Each of the videos can be played by placing the mouse over the corresponding section. What’s interesting in this is the creative way they use videos as parts of a bigger “picture”, one that represents their brand.
Product-focused header
In the case of Cropp, an online fashion store, the latest collections are being featured in the header.
puts wall-art in a context and features a CMYK Squad. The header also includes a clear CTA, for all those who feel they belong in a way to that scenario presented in the header by the “squad”.
Personal branding-focused header
In the case of the travel blog Alex in Wanderland, in the website header, apart from a photo of Alex, users can see the beginning of a story in this header: “Five years and counting on the road…”. This is an invitation for the readers to want to explore more stories.
To wrap up…
Headers greatly contribute to a website’s success or failure. Technically speaking, this upper part is naturally the first thing on the website that people interact with.
What is the Right Website Header Size for Your Site? – SEOptimer
Table of contents
Introduction
Website header key principles
Branding
Size
Content
How to find the right size Using WordPress
How to find any page header banner Image size
What? Not every header banner image is the same size
Recommended website header image size for your website
What is the right size for your website?
In conclusion
Its true what they say – first impressions count. Your website’s header is the first thing people see when landing on your site. Multiple eye-tracking studies have discovered humans scan computer and mobile screens starting at the top and making a zig-zag pattern down the screen. The website header’s primary function is navigation. But it also plays an important role in communicating your brand’s style and look. In this guide, we’ll explore the world of website headers and tackle the question of what the ideal website header size should be.
1. Branding
Begin with creating an image, graphic, or other visual concepts that show the essence of your product or service. The graphic should show the brand of your business and have a logo as well. An artistic header will have a proper choice of style and color that matches your website that inspires readers.
Big, bold, unconventional: Atlassian
Atlassian’s header is big and bold. Perhaps a nod to its namesake, Atlas the Greek Titan God who “carried the heavens upon his shoulders”. Atlassian’s blue brand is featured throughout hyperlinked copy, call to action buttons and imagery.
Muted, minimal: Apple
Few brands can achieve the kind of minimalist feel that Apple does. For an organization with many divisions and over 130, 000 staff worldwide, it excels at simplifying everything and visually communicating its brand so succinctly.
Action-driven: Oxfam
Global NGO Oxfam use their header to drive the most important action: donations. The placement, size, color and prominence of the “action bar” serves not only as a navigation tool but a way to communicate their purpose but most importantly to encourage action.
Search front and centre: Shutterstock
Stock image site Shutterstock is all about search. The search bar is prominent and branded seamlessly utilizing the brand font, color and iconography.
2. Size
For websites selling products, the header is a useful tool for showcasing popular products and promotions. Carousels or sliders are frequently used to rotate through featured products or sections serving as a launching point into key parts of the site.
Zara’s header serves almost as a roadblock, highlighting a carousel of collections. The carousel indicators (dots) are shown vertically in the bottom right while the header fills the screen 100% with navigation overlayed at the top. Its a striking look.
is another example of a full-frame header with muted top navigation. But instead of a carousel it uses the left side of the header as a dual navigation and content area. When the user makes a selection the site slides to the left, moving the hero image to the left side revealing the body content on the right side.
In this full-width variation from Virgin Galactic, the header serves as a hero navigation element with background video providing awe-inspiring visuals.
3. Content
Every element in your site header must work together. The location and size of each object in the header gives users visual clues about how to navigate and use your website when they immediately land. The color of a button, the spacing and padding around elements or the font size of a title can mean all the difference between the user taking the desired action, or not.
The Image Carousel
An image carousel is used commonly in website headers because they achieve a number of things:
Communicates one piece of content at a time to avoid confusion
Relies heavily on visual communication (which is best because people generally scan content, as opposed to read content)
Gives prominence to important content
Behaves like pre-navigation, enabling the user to explore different content without leaving the main page
Familiar and expected website element that users know how to use and interact with: swipe through or tap the dots to advance the slides
HTC’s header has three slides featuring three new technologies:
The Call to Action (CTA)
Sometimes you just want the user to take action. In this case, The Information wants to capture the visitor’s email address. By removing every other element and focusing 100% on the CTA, The Information is able to optimize for the desired action:
The Editorial style
BMW have reimagined their site as if they were a publisher and present stories and articles to the user starting with the hero article in the header about the history of the M logo and colors:
The Catalog style
Target’s website emulates their physical catalog with the header used to showcase Women’s New Arrivals followed by the various other departments within the store mixing collections, promotions, individual products and information.
The best place to start is to check your “Media Settings” under the “Appearance” tab from the WordPress Admin.
The best image width for an image in a blog post (for example, 1024px is for the Showcase Pro theme), and
What size image will work best in your theme’s sidebar (300)
However, this section won’t provide optimal image dimensions for your Home page, Header image, or page banners.
Depending on your theme, WordPress should list optimal image sizes for your home page/ header image under Appearance —> Customize —> Front Page Header Image. Most sizes shown here are around 1600 px by 1050 px.
Enter the URL of your website on Chrome Browser and use Inspect to get the exact image size using the following steps:
Right + Click / Control + Click (Mac) on the web page
Click Inspect
Click on the 3 dot menu so you can view the Elements at the bottom so the page view is not responsive
Here’s the Element at the bottom of the page:
Right-click the header image. Choose an image which is the same as the header banner
Dimensions: Set exact image size used in the theme’s demo
In this example below, the size is 2548 px x 227 px. While the width of the header is responsive, the height of the header might be too small to be a header.
If the Home header (1600px x 1050px), it is not the same size as the Blog header banner (1080px x 960px), use images that look good in long and narrow spaces.
While screens are getting larger, a header width of 1024px is still the most popular size. Websites are designed for 1024 x 768px resolution.
If you intend to use a header that is more than 1000 pixels, use one of these header sizes:
1280px
1366px
1440px
1600px
1920px.
These are high-resolution sizes that can adjust to maintain resolutions of more than 1920 without a problem.
The most popular header sizes for websites:
HEADER SIZE
WIDTH
HEIGHT
RATIO
Header size 1024
1024
256
4:1
One Third Page (Extra Height)
300
24:7
Half Page
384
8:3
Header size 1024 Full Page(Hero Header)
768
4:3
Header size 1280
One Third Page
1280
267
24:5
One third Page (Extra Height)
375
Header Size 1280
Half page
400
16:5
Full Page (Hero Header)
800
8:5
Header size 1366
1366
16:3
Header Size 1366
32:9
16:9
Header Size 1440
1440
Header Size 1400
450
900
Header Size 1600
1600
Header Size 1920
1920
360
540
1080
Think first about what you want your users to do when they land on your site and optimize your header for that action. Ensure your images are no larger than 72 dpi and that they use the RGB color format. The less elements you have in your header the more focused the desired action. Conversely the more elements in the header the more the user is burdened with scanning the content and interpreting what is most relevant to them. There is no right or wrong, it all depends on your typical user journeys and intended action you want to drive. Keep in mind, the more rich media in your header, the longer your loading time and larger your website page size. Always check your website load speed with SEOptimer to ensure you strike a good balance of optimal user experience and optimal load speed.
Typographic Design Patterns And Best Practices – Smashing Magazine
12 min read
Typography,
Fonts,
Design,
Web Design,
Studies
Quick summary ↬
Even with a relatively limited set of options in CSS, typography can vary tremendously using pure CSS syntax. Serif or sans-serif? Large or small font? Line height, spacing, font size and padding… The list goes on and on. [Links checked February/09/2017]
To find typographic design patterns that are common in modern Web design and to resolve some common typographic issues, we conducted extensive research on 50 popular websites on which typography matters more than usual (or at least should matter more than usual). We’ve chosen popular newspapers, magazines and blogs as well as various typography-related websites.
We’ve carefully analyzed their typography and style sheets and searched for similarities and differences. We have also put together a spreadsheet of the study that displays the websites’ various values (for example, the ratio between the line height and line length).
More after jump! Continue reading below ↓
Ultimately, we identified 13 general typographic problems and issues related to typographic design and tried to find answers to them through our research:
How popular are serif and sans-serif typefaces in body copy and headlines?
Which fonts are used most frequently?
What is the average font size?
What is the average ratio between the font size of headlines and body copy?
What is the average line height of body copy?
What is the average ratio between line height and font size in body copy?
What is the average ratio between line height and line length in body copy?
What is the average amount of spacing between paragraphs?
What is the average ratio of paragraph spacing to line height in body copy?
How are links styled?
How many characters per line are common in body copy?
How often are links underlined?
How often is font replacement (sIFR, etc. ) used?
We ended up with solid data, which we evaluated and prepared for this article. Based on the statistics, we have identified several “rules of thumb” for working with type. Please note that these rules can often, but not always, be considered best practice.
1. Serif vs. Sans-serif
Whether designers should use serif or sans-serif fonts for body copy is one of the most discussed and unresolved questions about typesetting on the Web. Some designers prefer to give their headlines serifs (which are short, decorative lines at the end of letter strokes) to give them more appeal. The main reason to choose a serif font for your headlines is that, at a large size, serif fonts are easy to read and look great. The contrast between a serif font for headlines and a sans-serif font for body copy can be interesting, too.
Some designers prefer serif fonts for body copy because they believe the lines at the end of letter strokes help guide readers from one letter to the next, making scanning and reading more comfortable.
According to our study, sans-serif fonts are still more popular than serif fonts for headlines, although they seem to have dropped in popularity in recent years.
60% of websites use sans-serif typefaces for headlines, mostly Arial, Verdana, Lucida Grande and Helvetica. Among them: CNN, ArsTechnica, Slate, BBC and NewScientist.
Only 34% of websites use a serif typeface for body copy. Among them: New York Times, Typographica, Time, AIGA and Newsweek.
The most popular serif typefaces for headlines are Georgia (28%) and Baskerville (4%).
The most popular serif typefaces for body copy are Georgia (32%) and Times New Roman (4%).
The most popular sans-serif typefaces for headlines are Arial (28%), Helvetica (20%) and Verdana (8%).
The most popular sans-serif typefaces for body copy are Arial (28%), Verdana (20%) and Lucida Grande (10%).
Two thirds of the websites we surveyed used sans-serif fonts for body copy. The main reason is probably because, despite the growing popularity of advanced font replacement techniques, such as Cufón, most designers stick to the core Web fonts, which essentially give them only two viable options: Georgia and Times New Roman. And because of the stigma attached to Times New Roman (that it often makes a modern website look outdated), they’re left with only Georgia. Sans-serif fonts offer a wider variety of options for the Web.
2. Which Typeface Is Most Popular?
Surprisingly, despite the growing popularity of font replacement techniques and growing availability of new pre-installed fonts (e. g. Windows Vista and Mac fonts), designs in our study mainly used the traditional, core Web fonts, the only exceptions being Lucida Grande (which comes installed only on Macs), Helvetica and Baskerville.
As one would expect, Arial, Georgia and Verdana are used for the majority of body copy today. In our study, around 80% of websites used one of these three fonts. For the remaining 20%, designers’ favorite Helvetica is a popular choice, as is Lucida Grande.
With options such as Verdana and Arial available as fall-backs, a designer really has no reason not to specify other non-standard fonts to achieve the best effect. You can learn more about advanced CSS font stacks in Nathan Ford’s article Better CSS Font Stacks and CodeStyle’s Build Better CSS Font Stacks.
Jon Tan used serif typeface Baskerville for headlines and serif typeface Georgia for body copy.
Verdana is used minimally for headlines. Only 10 websites use it for body copy to begin with, and only four use it for headlines. The main reason is that Verdana puts a lot of spacing between letters, which makes it not as tidy to read at a large size. If you are going to use it for headlines, you may want to take advantage of the CSS letter-spacing property. Georgia and Arial are most popular fonts for headings.
Finally, we note that “alternative” fonts are used much more for headlines than for body copy. Designers seem more willing to experiment with their headings than with the main body. If you want to bring some typographic variation into your next design, headings may be the easiest place to start.
3. Light Or Dark Background?
We were curious to learn the extent to which designers were willing to experiment with dark background colors. We looked out for any typography-oriented websites that had a dark color scheme and were surprised to find not a single one.
The New Yorker has a light color scheme, with Times New Roman used for headlines and body copy.
Pure white background for body copy won by a landslide. However, many of the designs avoid the high contrast of pure white on pure black; text color is often made a bit lighter than pure black. Designers clearly focus on legibility and avoid experimenting with background colors. The contrast of black on white is easy to read and is, at least among these websites, the status quo.
4. Average Font Size For Headlines
Of course, the choice of headline font size depends on the font used in the design. In any case, in our study by far the most popular font sizes ranged from 18 to 29 pixels, with 18 to 20 pixels and 24 to 26 pixels being the most popular choices.
Our study didn’t yield any clear winners. The average font size for headings is 25. 6 pixels. But note that any size between 18 and 29 pixels could be effective; it depends, after all, on how your headings fit the overall design of your website. Still, you could try experimenting with larger sizes, because displays are always getting larger, as are display resolutions.
An obvious outlier is Wilson Miner (screenshot below), who uses a massive font size of 48 pixels for his headlines. His website is a special case, though, because all of his posts have extremely short titles, only a few words.
5. Average Font Size For Body Copy
Do you remember about seven years ago when Web designs had tiny, barely readable elements, and body copy was set to 8 pixels in Tahoma? Small font sizes are out, and more and more modern designers are turning to large font sizes. From our sample size, we saw a clear tendency towards sizes between 12 and 14 pixels. The most popular font size (38%) is 13 pixels, with 14 pixels slightly more popular than 12 pixels. Overall, the average font size for body copy is 13 pixels.
We noted (as one would expect) more and more attention being paid to the smallest typographic details. Dashes, quotes, footnotes, author names, introductory text and paragraphs have been carefully set, with optimal legibility in mind. Type setting is usually very consistent, with a lot of white space, leading and padding.
Typographica uses a large font size for the introductory paragraphs of its articles, and then reverts to a normal size for the rest of text.
Heading to Body Font-Size Ratio
To better understand the relationship between heading and body font size, we divided each website’s heading font size by its body font size. We took the average of these ratios and derived a rule of thumb for you to work with:
Heading font size ÷ Body copy font size = 1. 96
The overall value, then, is 1. 96. This means that when you have chosen a font size for your body copy, you may want to multiply it by 2 to get your heading font size. This, of course, depends on your style; the rule of thumb won’t necessarily give you the optimal size for your particular design. Another option is to use a traditional scale (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72) or the Fibonacci sequence (e. 16 – 24 – 40 – 64 – 104) to get natural typographic results.
6. Optimal Line Height For Body Copy
Leading (or line height) will always depend on your chosen font size and measure (or line length). In general, the longer the measure, the longer the leading should be. Therefore, presenting a chart of the most popular choices for leading in pixels wouldn’t make sense here. More appropriate would be for you to use a relative unit, such as an em or percentage value, that determines the relation between leading and measure and between leading and font size.
According to our study:
line height (pixels) ÷ body copy font size (pixels) = 1. 48. Note that 1. 5 is a value that is commonly recommended in classic typographic books, so our study backs up this rule of thumb. Very few websites use anything less than that. The number of websites that go above 1. 48 decreases as you get further from this value.
line length (pixels) ÷ line height (pixels) = 27. 8. The average line length is 538. 64 pixels (excluding margins and paddings) which is pretty large, considering that many websites still use 12 to 13 pixels for their body copy font size.
space between paragraphs (pixels) ÷ line height (pixels) = 0. 754. We were surprised by this result. It turns out that paragraph spacing (i. e. the space between the last line of one paragraph and the first line of the next) rarely equals the leading (which would be the main characteristic of perfect vertical rhythm). More often, paragraph spacing is just 75% of the paragraph leading. The reason may be that leading usually includes the space taken up by descenders, and because most characters do not have descenders, additional white space is created under the line.
AIGA is a perfect example of optimal leading. Its font size is 13. 21 pixels (converted from ems) and its line height is 19. 833 pixels (conversion from ems). In fact, 19. 8333 ÷ 13. 2167 = 1. 5011.
So, once you have decided on your body copy font size, multiplying this value by 1. 5 will give you the optimal line height. Once you’ve got that, you can multiply this new value by 27. 8 to get your optimal line length. Note that the layout will also need gutters, margins and padding to let the body copy breathe.
The New Scientist has 20 pixels of spacing between paragraphs.
7. How Many Characters Per Line?
According to a classic rule of Web typography, 55 to 75 is an optimal number of characters per line. Surprisingly, our study shows that most websites have a higher number. We counted how many characters could fit on one line using the design’s default font size. The result, which is an average of 88. 74 characters per line (maximum), is extremely high. Of course, this maximal number is different from the average number of characters per line, which in general ranges between 75 and 85 characters per line. Still, the range is way above the conventional range – quite peculiar.
Between 73 and 90 characters per line is a popular choice among designers, yet we also found outliers: Monocle (47 characters per line) and Boxes and Arrows (125 characters per line). To get a more exact reading for each website, you would need to take an average character count from multiple lines.
Other Findings
46% of websites underlined the links in their body copy, while the others highlighted only with color or a bold font weight.
6% of websites used some kind of image replacement for headings or body copy (e. Monocle, New Yorker, Newsweek).
96% of websites do not justify text.
Websites gave their text a left padding of on average 11. 7 pixels (counting from the left content area border).
Conclusion
The study shows a clear set of common practices and guidelines for setting type in Web design. Note, though, that these findings are not scientific and should serve only as rough guidelines:
Either serif or sans-serif fonts are fine for body copy and headings, but sans-serif fonts are still more popular for both.
Common choices for headlines are Georgia, Arial and Helvetica.
Common choices for body copy are Georgia, Arial, Verdana and Lucida Grande.
The most popular font size for headings is a range between 18 and 29 pixels.
The most popular font size for body copy is a range between 12 and 14 pixels.
Header font size ÷ Body copy font size = 1. 96.
Line height (pixels) ÷ body copy font size (pixels) = 1. 48.
Line length (pixels) ÷ line height (pixels) = 27. 8.
Space between paragraphs (pixels) ÷ line height (pixels) = 0. 754.
The optimal number of characters per line is between 55 and 75, but between 75 and 85 characters per line is more popular,
Body text is left-aligned, image replacement is rarely used and links are either underlined or highlighted with bold or color.
Of course these “rules” aren’t set in stone. Rather, they are a set of rough guidelines that you can use as a basis for setting typography. Every website is unique, and you may want to modify your choices at each stage of your design to suit your layout. You can also take a look at the spreadsheet of the study and export its data for further analysis.
Be sure to check out our previous articles:
Typographic Design Patterns And Current Practices 2013 Study
The Perfect Paragraph
When Typography Speaks Louder Than Words
Why Subtle Typographic Choices Make All The Difference
Photoshop-Inspired Techniques with 100% CSS
(al)
Frequently Asked Questions about websites with large headers
What size should header be for website?
Recommended website header image pixel size for your website While screens are getting larger, a header width of 1024px is still the most popular size. Websites are designed for 1024 x 768px resolution.May 25, 2020
What is a good size for headers?
The most popular font size for headings is a range between 18 and 29 pixels. The most popular font size for body copy is a range between 12 and 14 pixels.Aug 20, 2009
What is the header of a website called?
The page header is usually where you would find the main common information about a website, such as company or site logo, site navigation and main contact information.
