Centered Column
You might say
Keep the content in a narrow column with space on both sides instead of stretching it across the whole screen, like a blog.
Keep one narrow content column centered on the pageA centered column focuses attention on reading or one simple task such as signing in, composing a post, or changing settings. Set a comfortable maximum width and keep supporting actions nearby. It is not suitable for dense dashboards that need side-by-side comparison.
When to use it
- Article or essay↔ 60–75 characters per line
- Sign-in and account setupContent column
- Focused formoil-oil••••••••Sign in
- Simple settings or editorBody text needs a readable size and line height for long-form reading.
When NOT to use it
- Place wide tables in a narrow column
- Center-align long body paragraphs
- Let the column grow too wide on large screensSign-in card
- Use excessive empty margins when more context is neededThis is a long center-aligned paragraph. Every line starts somewhere different, making it tiring after only two lines.
Anatomy
Login card
Leave blank space on both sides to help focus attention on the middle
Centered width limit 600~720px, 60~75 characters per line
Article, form, or a login card
Variants
Reading
Long text reading, 60~75 characters per line
Auth Card
Log in, register, retrieve password
Form
Settings page, single column form
Typical use cases
Article
Why did I move my blog to a static site
Login
Login
Register
Forgot your password?
Create post
Personal information
Nickname
Weekly featured emails
Profile settings
✓
Subscription successful!
Front-end Weekly is delivered to you@example.com on time at 8 a.m. every Friday
Further reading
