Website Widths and Font Sizes: A Practical Responsive Design Guide
There is no universal best website width or font size. The content, typeface and reader matter more than copying one desktop screenshot. Here is a practical set of starting points, followed by a way to test them.
Quick answer: website widths and readable type
- Page container: try a centred maximum width between 1140 and 1440 CSS pixels for a broad business layout. A reading column should usually be narrower.
- Body text: around 16 to 18 CSS pixels is a useful starting point. Test the actual font and enlarged text.
- Reading width: try roughly 60 to 80 characters per line, then adjust for the language and content.
- Phone layout: use flexible widths with side padding. Cards, navigation and long headings need to wrap.
- Breakpoints: change the layout when the content needs it, rather than assume a device label predicts every screen.
The numbers below are design recommendations, not universal requirements or ranking rules. Accessibility criteria should be checked separately against the standard.
Start with structure and readability
1.1 One H1 per page
Use a clear main heading for the page topic and organise the sections beneath it. A single main H1 is a useful editorial convention, not a guarantee of rankings.
1.2 Logical heading order
Use H2 for major sections.
Use H3 only as children of H2.
Keep heading levels consistent with the document structure.
1.3 Minimum body text size
Around 16px is a useful starting point for body text. Check the actual typeface, readability and behaviour when readers enlarge the text.
1.4 Touch target size
Aim for comfortable touch targets, often 44px or larger. WCAG 2.2 Level AA specifies a 24 by 24 CSS pixel minimum or qualifying exceptions; 44 by 44 is the enhanced Level AAA target.
1.5 Maximum readable line width
A text measure around 60 to 80 characters is a useful starting point. Check the font, language and reading context.
1.6 Spacing system
An 8px spacing rhythm can help consistency. Optical adjustments and content needs still matter.
Breakpoints you should design for
2.1 Mobile
Up to 599px
2.2 Tablet
600px to 991px
2.3 Desktop
992px to 1439px
2.4 Large and ultra wide screens
1440px and above
Mobile design rules up to 599px
3.1 Layout
Max website width is full width of the screen.
Side padding can start at 16px.
Main content must never touch the screen edge.
3.2 Typography
Paragraph size 16px
H1 size 28px to 32px
H2 size 22px to 26px
H3 size 18px to 20px
Line height 1.5 to 1.7
3.3 Navigation and menu
Menu link size 16px to 18px
Mobile header height minimum 56px
Menu items height minimum 44px
3.4 Buttons
Button text size 16px
Button height minimum 44px
Horizontal padding minimum 16px
3.5 Spacing
Section top and bottom spacing 32px
Card padding 16px to 24px
Gap between stacked elements 16px to 24px
Tablet design rules from 600px to 991px
4.1 Layout
Max content width 720px to 960px
Side padding 24px
4.2 Typography
Paragraph size 16px to 18px
H1 size 32px to 40px
H2 size 24px to 32px
H3 size 18px to 22px
Line height 1.5 to 1.6
4.3 Navigation and menu
Menu link size 16px to 18px
Header height 64px to 72px
4.4 Buttons
Button text size 16px to 18px
Button height 44px to 52px
Horizontal padding 20px to 28px
4.5 Spacing
Section spacing 40px to 56px
Card padding 24px
Grid gutter 24px
Desktop design rules from 992px to 1439px
5.1 Layout
Max website width 1140px to 1280px
Website must be centered on the screen
Side padding inside container 24px to 32px
5.2 Typography
Paragraph size 16px to 18px
H1 size 40px to 52px
H2 size 28px to 40px
H3 size 20px to 26px
Line height 1.5 to 1.6
5.3 Navigation and menu
Menu link size 16px to 18px
Header height 72px to 88px
Horizontal menu spacing 24px to 32px
5.4 Buttons
Button text size 16px to 18px
Button height 44px to 52px
Horizontal padding 24px to 32px
5.5 Spacing
Section spacing 64px to 96px
Card padding 24px to 32px
Grid gutter 24px to 32px
Ultra wide screen design rules 1440px and above
6.1 Layout
A content width around 1140px to 1280px is one useful starting range; a 1440px container can also suit a visual portfolio
Content must remain centered
Extra space must be used only for background, decoration, imagery, or multi column layouts
Do not stretch text full width
6.2 Typography
Paragraph size 17px to 18px
H1 size 44px to 56px
H2 size 34px to 44px
H3 size 24px to 28px
6.3 Spacing
Side margin around main container 48px to 80px
Section spacing 96px to 128px
Image size and media rules
7.1 Images must never exceed their container width
7.2 Use 2x resolution images for retina displays
7.3 Hero images should be 1600px to 2560px wide for large screens
7.4 Inline content images should match the content column width
Navigation usability rules
8.1 Navigation must always be reachable within one tap on mobile
8.2 The logo must link to the homepage
8.3 The active menu item must be visually highlighted
8.4 The menu must never wrap onto multiple messy lines
Content width and readability rules
9.1 Blog article width ideal range is 640px to 760px
9.2 Landing page content width ideal range is 960px to 1140px
9.3 Long form text must never be full width on desktop or ultra wide screens
Breakpoint count recommendation
10.1 Minimum professional setup
Mobile
Tablet
Desktop
Ultra wide
10.2 Add breakpoints when the content needs them. Four sizes are a testing framework, not a professional minimum.
Common sizing mistakes to avoid
11.1 Body text under 16px
11.2 Buttons under 44px height
11.3 Full width text on ultra wide screens
11.4 Random spacing values not based on a grid
11.5 Headings that fail to explain the page structure
Final principle
A good website does not feel small, cramped, stretched, or chaotic.
It feels measured, balanced, readable, and intentional.
Correct sizing is the invisible foundation of that feeling.
Do you need help
Contact me
Test the numbers against the content
Preview the layout at narrow widths and enlarge text to 200 percent. Check that navigation, forms and buttons still work, and that longer headings do not overlap. A beautiful desktop composition should still make sense when its columns stack.
For a practical next step, read my beginner Webflow guide. To see how I apply these decisions to client work, explore my Webflow web design service.
Typography, imagery and responsive layout need to work together on the real pages, with the actual content. See my website design and implementation service for help with the project, and the BGI project for a real example of my work.
Sources and design recommendations
The numerical layout suggestions in this article are design starting points. Accessibility requirements should be checked against the standard.
Have a project behind the idea?
I work on websites, branding and film. If you need help turning your next idea into something people can see and use, tell me what you have in mind.
What did you think?
A thought, a different perspective, a little appreciation. You’re welcome here.
.png){kind=icon}
