Website Dimensions & Typography in 2026: A Practical Guide for Web Designers

If you’ve ever asked yourself:
“What should my H1 size be on mobile?”
“How wide should my website really be on desktop?”
“How much padding is actually correct?”
“How do I design for ultra-wide screens?”

This article gives you the answers in numbers, not opinions.

Below is a complete, practical sizing system for modern websites. Every breakpoint includes exact font sizes, layout widths, and spacing rules you can apply immediately to create clean, consistent, and professional designs.

1. The core rules every web designer must follow

1.1 One H1 per page
Every page must have exactly 1 H1. It defines the main topic of the page and is critical for accessibility and SEO.

1.2 Logical heading order
Use H2 for major sections.
Use H3 only as children of H2.
Never skip levels.

1.3 Minimum body text size
Body text must never be smaller than 16px on any device.

1.4 Touch target size
All clickable elements on mobile must be at least 44px to 48px in height and width.

1.5 Maximum readable line width
Text blocks should never exceed 70 to 80 characters per line for comfortable reading.

1.6 Spacing system
All padding and margin values should follow an 8px rhythm such as 8, 16, 24, 32, 40, 48.

‍

2. 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

‍

3. Mobile design rules up to 599px

3.1 Layout
Max website width is full width of the screen.
Side padding must be 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

‍

4. 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

‍

‍

5. 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

‍

6. Ultra wide screen design rules 1440px and above

6.1 Layout
Max website content width must stay between 1140px and 1280px
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

‍

7. 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

‍

8. 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

‍

9. 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

‍

10. Breakpoint count recommendation

10.1 Minimum professional setup
Mobile
Tablet
Desktop
Ultra wide

10.2 That means 4 breakpoints is the practical minimum for modern websites

‍

11. 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 Multiple H1 tags on one page

‍

12. 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.