Brand presence on a website is not about picking a nice template. It comes from making four sets of parameters—typography, grid, whitespace and motion—into reusable rules. The test is simple: cover the logo on your homepage screenshot and users should still recognize the brand. To get there, limit yourself to 2 font families, a 12-column grid, line height of 1.5–1.7, and motion durations of 200–500ms.
Typography: two families, three sizes, one line-height range
The first layer of brand presence is text. Chinese font choices are limited, which actually makes it easier to create order. Assign roles: headlines use a distinctive typeface for recognition, body text uses a system sans-serif for loading speed and readability. Set type sizes in increments of 1.25–1.333 to create three levels—not six.
- Number of families: 1–2 for Chinese, 1 for English. No more than 3 total, or the page feels scattered.
- Type scale: body 16px, subheads 20–24px, main headlines 32–48px. Keep the ratio fixed at 1.25 or 1.333.
- Line height: 1.6–1.75 for body, 1.2–1.3 for headlines. Line length: 28–38 Chinese characters per line.
- Font weight: 600–700 for headlines, 400 for body, 500 for emphasis. Never use light weights for body text.
A common problem among Guangzhou companies is using calligraphy for headlines, a serif for body, and a third font for buttons—three competing logics. Cut down to two families and brand presence returns immediately. Once typography rules are set, move on to visual identity consistency, as described in our logo and visual identity system approach.
Grid: 12 columns, 8px baseline, only four spacing values
The grid determines whether a page feels stable. You don't need a complex grid—12 columns cover responsive breakpoints from 1440 to 375. All spacing should come from the same baseline so the page doesn't feel tight in one place and loose in another.
- Columns and gutters: desktop 12 columns, 24px gutter; tablet 8 columns, 20px gutter; mobile 4 columns, 16px gutter.
- Baseline unit: 8px. Use only six spacing values: 8, 16, 24, 32, 48, 64. Avoid arbitrary values like 13px or 27px.
- Content width: 1200px or 1280px for desktop body area. Leave margins on ultra-wide screens; don't stretch to full width.
- Alignment: choose left-align or center-align within a section and apply it site-wide. Don't mix.
How to check: zoom out to 50%. If block edges align to a few vertical lines, the grid works. If edges are ragged, your spacing isn't on the baseline.
Whitespace: 40% on the first screen, three tiers for section spacing
Whitespace is the most overlooked brand asset. A website with too little whitespace looks cheap no matter how much information it holds. Control it by ratio, not by feel.
- First screen: whitespace (excluding text and graphics) should occupy 35%–45% of the first screen. Minimum 48px above and below the main headline.
- Section spacing: 64–96px between modules, 24–32px inside modules, 20–24px card padding.
- Image-text ratio: when side by side, images take 5–7 columns, text 4–5 columns, with 1 column gap.
- Paragraph spacing: 16–24px between paragraphs, 12–16px between paragraph and list. Don't use empty lines to force spacing.
More whitespace isn't always better. For B2B websites, over 50% whitespace on the first screen makes the page feel information-poor. 35%–45% balances brand presence and information density.
Motion: 200–500ms, three types only, respect reduced-motion settings
Motion rhythm is the fourth layer of brand presence. Many websites get motion wrong not because it's not flashy enough, but because durations and triggers are inconsistent. Limit motion to three types: entrance, transition, and feedback.
- Duration: micro-interactions 150–200ms, entrance 300–500ms, page transitions 400–600ms. Over 600ms feels sluggish.
- Easing: ease-out for entrance, ease-in for exit. Never use linear site-wide.
- Triggers: trigger once when elements below the fold enter the viewport. Don't replay on every scroll.
- Accessibility: must respond to prefers-reduced-motion. Content must remain fully visible when motion is off.
Be especially restrained before peak seasons. During Chinese New Year campaigns, websites often get last-minute pop-ups and carousels. Stacked motion slows down the first screen. Put campaign materials on dedicated landing pages and keep only one entry point on the homepage.
Checklist: 8 parameters for a brand-driven website
Use this table when reviewing designs with your agency. Tick each item. If any fails, the page will look like a template.
| Item | Recommended value | Failure symptom |
|---|---|---|
| Font families | ≤ 3 | Three different fonts for headline, body, buttons |
| Type scale | 1.25 or 1.333 ratio | Arbitrary sizes, unclear hierarchy |
| Grid | 12 columns on desktop | Block edges don't align |
| Spacing baseline | 8px, six values | 13px, 27px appear |
| First-screen whitespace | 35%–45% | Banners and pop-ups crowd the screen |
| Motion duration | 200–500ms | Animations over 1 second |
| Content width | 1200–1280px | Body text stretched full width |
| Reduced motion | Must support | Content missing when motion is off |
Beyond parameters, brand presence ultimately comes from a unified identity system. See how Amber Hotel · Premium Series built recognition anchors from naming to application systems, with the website as one touchpoint—typography, color, layout and offline materials all from the same source, so users see the same brand in every context. For the full scope of website design delivery, visit our website design service page.
Frequently asked questions
Should I fix typography or layout first to improve brand presence?
Start with typography and type scale. Fonts are the first layer of reading and changes are immediate and low-cost. Recommended order: reduce font families to 2, set three type levels at a 1.25 ratio, adjust line height to 1.6–1.75, then move to grid and whitespace.
What motion durations are appropriate, and will they affect loading?
Micro-interactions 150–200ms, entrance 300–500ms, page transitions 400–600ms. Motion itself doesn't slow loading—large images and uncompressed scripts do. Keep first-screen images under 300KB, use CSS transitions only, and support prefers-reduced-motion.
How should I schedule website work before Chinese New Year marketing campaigns?
Campaign materials are usually finalized 6–8 weeks in advance. Launch the dedicated landing page 3–4 weeks before the holiday, leaving 5–7 working days for testing and compatibility checks. Keep only one campaign entry on the homepage; put other materials on the landing page to avoid stacked motion and pop-ups affecting the first screen.
Brand presence on a website isn't locked in by a single redesign. It's about whether a set of parameters can be reused. Once typography, grid, whitespace and motion values are set, every new page and campaign landing page draws from the same rules, so the site doesn't become more scattered over time.
If your team isn't confident in defining these parameters, score your existing website against the checklist above. Problems usually cluster around too many font families and spacing that isn't on the baseline.
Xingkong Dahai's website design service covers the full process from brand identity to page rules. Visit our website design page for delivery scope, or call +86-400-6619-020 for project inquiries.