Break the grid ≠ Ignore the grid.
Grid là để layout thống nhất, ngăn nắp, nhưng cũng gây ra sự nhàm chán đơn điệu. Với người thiết kế chuyên nghiệp thì sẽ biết cách phá lưới để tạo sự đột phá, ấn tượng mới mẽ.
Breaking the grid không có nghĩa là bỏ grid, mà là cố ý cho vài thành phần vượt ra ngoài hệ thống grid để tạo điểm nhấn, chuyển động và visual hierarchy.
1. Phóng to tiêu đề (Oversized headline)
Cho headline span qua nhiều columns/modules, thậm chí chồng lên image.
Grid vẫn tồn tại → headline cố ý vượt qua boundaries.
Hiệu quả: mạnh, hiện đại, tạo focal point.
2. Hình ảnh lấn ra ngoài trang giấy (Image bleeding)
Cho ảnh chạy:
- sát mép trang
- qua margin
- qua gutter
- hoặc full bleed toàn trang.
Đây là một trong những cách phổ biến nhất.
Grid: vẫn dùng để xác định vị trí ảnh.
Break: ảnh vượt khỏi vùng module.
3. Image crossing the gutter
Đặc biệt phù hợp với two-page spread. Ảnh bắt đầu ở trang trái nhưng chạy xuyên qua gutter sang trang phải.
Lưu ý: tránh đặt mặt người hoặc text quan trọng đúng gutter.
4. Overlapping — Chồng các element
Cho các thành phần đè lên nhau:
- Image → text
- Image → image
- Headline → image
- Caption → image
- Graphic → image
→ Tạo depth và cảm giác dynamic.
5. Pull quote phá grid
Pull quote thường được đặt đè lên body text hoặc image, thay vì nằm trong một column.
Ví dụ: “The city never sleeps.” chạy ngang qua 2–3 columns.
Đây là cách rất hiệu quả để ngắt một vùng text dày đặc.
6. Rotated typography
Xoay chữ: 90° / vertical / diagonal thay vì giữ typography theo horizontal grid.
Ví dụ: WORLD TRAVELING
↑
vertical text
Hình bạn vừa đưa trước đó có “world-traveling” chạy dọc bên trái — đây là một dạng phá grid khá rõ.
7. Diagonal elements
Cho text box, line, image hoặc graphic nghiêng khỏi hệ thống ngang/dọc.
Hiệu quả: tạo movement, energy, youthful/editorial feeling.
8. Irregular / organic shapes
Thay vì module hình chữ nhật:
- Circle
- Organic shape
- Cut-out
- Polygon
- Freeform image
được đặt vào grid.
→ Grid tạo cấu trúc, hình đa giác tạo sự phá cách.
9. Text wrapping quanh image
Cho text ôm theo contour của image/object.
Rất phù hợp với portrait cut-out hoặc object photography.
10. Elements vượt khỏi margin
Cho một phần element cắt khỏi vùng trang:
chữ bị crop
image bị crop
graphic chạy ra ngoài edge
Ví dụ:
ADVENTU—
Headline bị cắt ở mép trang.
Cách này tạo cảm giác large scale / immersive.
11. Breaking the baseline
Grid không chỉ có columns; typography cũng có baseline rhythm.
Thông thường:
Text
Text
Text
Text
Text
Khi break:
Text
Text
BIG
QUOTE
Text
Text
Một headline hoặc quote phá vertical rhythm của body copy.
12. Empty space — Phá grid bằng khoảng trống
Đây là cách rất tinh tế.
Không nhất thiết phải thêm một element.
Có thể bỏ trống một hoặc nhiều modules:
┌────┬────┬────┬────┐
│TXT │TXT │ │ │
├────┼────┤ │IMG │
│TXT │TXT │ │ │
└────┴────┴────┴────┘
→ Negative space becomes the break.
Đặc biệt phù hợp với magazine art / culture / luxury.