/* ══════════════════════════════════════════════════════════════════
BỘ CHỮ THIỆP CƯỚI — v1.1
Hệ thống chữ dùng lại được cho mọi theme thiệp cưới tiếng Việt.
THAY ĐỔI SO VỚI v1.0 — sáu chỗ, đều là rủi ro sản xuất:
1. font-synthesis-weight:none — chặn trình duyệt tự bôi đậm giả
2. text-size-adjust:100% — chặn iOS phóng chữ khi xoay ngang
3. .tp-caption lên weight 400 — 12.5px/300 làm dấu huyền đứt nét
4. .tp-oneline có chặn tràn — tên quá dài không còn phá khung
5. Danh sách font dự phòng bổ sung nhánh Android
6. .tp-hero đổi max-width sang em, ch đo sai với chữ có dấu
CÁCH DÙNG NHANH
1. Dán vào , TRƯỚC file css của theme:
2. Thêm class "tp" vào thẻ .
3. Gắn các class tp-* vào từng loại chữ.
══════════════════════════════════════════════════════════════════ */
/* ── 1. BỐN QUY TẮC TIẾNG VIỆT ────────────────────────────────────
(a) KHÔNG để line-height dưới 1.15. Dấu chồng hai tầng (Ễ Ữ Ộ Ầ)
vươn cao hơn chữ Latin nhiều. Chặt hơn là dấu dòng dưới đâm
vào chân dòng trên.
(b) KHÔNG dùng độ đậm dưới 400 cho serif cỡ lớn. Nét dấu luôn
mảnh hơn nét thân chữ; ở weight 300 dấu huyền gần như mất.
(c) KHÔNG để font dự phòng thiếu chữ Việt. Georgia, Baskerville,
Didot đều KHÔNG đủ ữ ễ ợ ằ.
(d) MỚI — KHÔNG để trình duyệt tự tổng hợp nét đậm. Khi thiếu
weight, trình duyệt bôi dày chữ theo thuật toán. Thân chữ dày
lên thì còn đọc được, nhưng dấu vốn đã mảnh sẽ bị bôi thành
một cục mực. font-synthesis-weight:none buộc nó dùng weight
thật gần nhất thay vì bịa ra.
─────────────────────────────────────────────────────────────── */
/* ── 2. BỘ CHỮ ĐANG DÙNG ───────────────────────────────────────── */
:root{
/* Dự phòng theo ba nhánh: 'Times New Roman' cho Windows/macOS,
'Noto Serif' cho Android (Times New Roman KHÔNG tồn tại ở đó),
rồi mới tới generic. Thiếu nhánh giữa thì trong lúc font Google
chưa về, máy Android rơi thẳng xuống serif hệ thống — mỗi hãng
một kiểu, bề rộng lệch hẳn, tp-fit đo sai. */
--tp-serif:'Playfair Display','Times New Roman','Noto Serif',serif;
--tp-sans:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',
'Roboto',sans-serif;
/* HỆ SỐ THỊ GIÁC — chìa khoá của cả bộ.
Hai font cùng cỡ 30px trông to nhỏ khác nhau vì chiều cao chữ
thường khác nhau. Thang chữ căn chuẩn theo Playfair (= 1). Đổi
font thì chỉ sửa số này, toàn thang tự co giãn. */
--tp-optical:1;
/* Cormorant và EB Garamond mặc định dùng chữ số kiểu cũ, nhấp nhô
cao thấp. Ngày cưới và giờ lễ mà hiện kiểu đó là hỏng. */
--tp-figures:lining-nums tabular-nums;
}
/* ── 3. THANG CHỮ ─────────────────────────────────────────────────
Bốn bậc đầu là chữ giao diện (sans) — cố định.
Năm bậc sau là chữ nghi lễ (serif) — nhân theo --tp-optical.
─────────────────────────────────────────────────────────────── */
:root{
--tp-label:11px; /* nhãn chữ hoa */
--tp-caption:12.5px; /* chú thích, gợi ý */
--tp-small:14.5px; /* chữ phụ, nút phụ */
--tp-body:16px; /* thân bài */
--tp-name: calc(20.5px * var(--tp-optical));
--tp-sub: calc(clamp(20px,4.7vw,26px) * var(--tp-optical));
--tp-title: calc(clamp(25px,6.1vw,35px) * var(--tp-optical));
--tp-hero: calc(clamp(27px,6.7vw,38px) * var(--tp-optical));
--tp-cover: calc(clamp(33px,9.2vw,52px) * var(--tp-optical));
}
/* ── 4. GIÃN DÒNG & GIÃN CHỮ ──────────────────────────────────── */
:root{
--tp-lh-cover:1.2; /* tên ngoài bìa */
--tp-lh-title:1.34; /* tiêu đề nhiều dòng */
--tp-lh-tight:1.16; /* số lớn, giờ lễ — sàn an toàn cho dấu */
--tp-lh-body:1.7; /* thân bài */
--tp-lh-label:1.6; /* nhãn chữ hoa: dấu nằm trên đầu chữ hoa */
--tp-tr-label:.24em; /* chữ hoa nhỏ cần giãn mạnh mới đọc được */
--tp-tr-body:.004em;
--tp-tr-name:-.008em; /* serif cỡ lớn cần siết lại một chút */
--tp-w-body:300;
--tp-w-serif:400; /* sàn cho serif — xem quy tắc (b) */
--tp-w-em:500;
}
/* ── 5. NỀN ─────────────────────────────────────────────────────── */
.tp{
font-family:var(--tp-sans);
font-size:var(--tp-body);
font-weight:var(--tp-w-body);
line-height:var(--tp-lh-body);
letter-spacing:var(--tp-tr-body);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
/* Quy tắc (d): cấm bôi đậm/nghiêng giả. Chỉ ảnh hưởng khi thiếu
weight — mà lúc đó thà chữ nhạt hơn còn hơn dấu bị bôi bết. */
font-synthesis-weight:none;
font-synthesis-style:none;
/* iOS Safari tự phóng chữ khi xoay ngang, làm vỡ mọi phép đo của
tp-fit và mọi clamp() theo vw. Khoá lại. */
-webkit-text-size-adjust:100%;
text-size-adjust:100%;
}
.tp h1,.tp h2,.tp h3{
font-family:var(--tp-serif);
font-weight:var(--tp-w-serif);
line-height:var(--tp-lh-title);
margin:0;
}
/* ── 6. CÁC LỚP DÙNG HÀNG NGÀY ────────────────────────────────── */
/* Tên cô dâu chú rể ngoài bìa — chỉ dùng một lần trên cả thiệp */
.tp-cover{
font-family:var(--tp-serif);
font-size:var(--tp-cover);
font-weight:var(--tp-w-serif);
line-height:var(--tp-lh-cover);
letter-spacing:.005em;
text-wrap:balance;
}
/* Câu quan trọng nhất của mỗi phần.
max-width dùng em chứ không dùng ch: ch là bề rộng chữ số 0, mà
chữ Việt có dấu rộng hơn hẳn, nên 15ch thực tế chỉ chứa được
khoảng 11–12 ký tự và câu bị vỡ ba dòng. */
.tp-hero{
font-family:var(--tp-serif);
font-size:var(--tp-hero);
font-weight:var(--tp-w-serif);
line-height:var(--tp-lh-title);
text-wrap:balance;
max-width:9.5em;
margin-inline:auto;
}
/* Tiêu đề phần */
.tp-title{
font-family:var(--tp-serif);
font-size:var(--tp-title);
font-weight:var(--tp-w-serif);
line-height:var(--tp-lh-title);
text-wrap:balance;
}
/* Tiêu đề phụ, mục cần đọc chậm */
.tp-sub{
font-family:var(--tp-serif);
font-size:var(--tp-sub);
font-weight:var(--tp-w-em);
line-height:var(--tp-lh-title);
letter-spacing:.05em;
}
/* Tên riêng trong thẻ: cha mẹ hai họ, tên trên thẻ quà mừng. */
.tp-name{
font-family:var(--tp-serif);
font-size:var(--tp-fit,var(--tp-name));
font-weight:var(--tp-w-serif);
line-height:var(--tp-lh-title);
letter-spacing:var(--tp-tr-name);
}
/* Chặn tràn: tp-fit có sàn 13.5px, tên cực dài trong thẻ cực hẹp
vẫn có thể vượt. Không có dòng này thì chữ đâm ngang ra khỏi thẻ
và phá cả layout xung quanh. */
.tp-name.tp-oneline{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
min-width:0;
}
/* Số lớn: giờ lễ, số ngày đếm ngược */
.tp-figure{
font-family:var(--tp-serif);
font-size:var(--tp-hero);
font-weight:var(--tp-w-serif);
line-height:var(--tp-lh-tight);
font-variant-numeric:var(--tp-figures);
}
/* Ngày tháng, số tài khoản — chỗ nào chữ số cần đều hàng */
.tp-num{font-variant-numeric:var(--tp-figures)}
/* Câu dẫn dưới tiêu đề */
.tp-lead{
font-size:var(--tp-body);
line-height:1.8;
max-width:34ch;
margin-inline:auto;
text-wrap:pretty;
}
/* Thân bài */
.tp-text{
font-size:var(--tp-body);
line-height:var(--tp-lh-body);
max-width:42ch;
text-wrap:pretty;
}
/* Nhãn chữ hoa: CHÚ RỂ, NHÀ TRAI, LỄ VU QUY. */
.tp-label{
font-family:var(--tp-sans);
font-size:var(--tp-label);
font-weight:var(--tp-w-em);
line-height:var(--tp-lh-label);
letter-spacing:var(--tp-tr-label);
text-transform:uppercase;
}
/* Chú thích, ghi chú nhỏ.
weight 400 chứ không thừa hưởng 300 của .tp: ở 12.5px, nét dấu
huyền và dấu hỏi của Be Vietnam Pro weight 300 mảnh tới mức màn
hình mật độ thấp làm đứt nét. Bốn trăm là sàn cho cỡ này. */
.tp-caption{
font-size:var(--tp-caption);
font-weight:400;
line-height:1.6;
}
/* Lời chúc của khách — chữ nghiêng, giọng người thứ ba */
.tp-quote{
font-family:var(--tp-serif);
font-style:italic;
font-size:var(--tp-name);
line-height:1.6;
}
@media (prefers-reduced-motion:reduce){
.tp *{animation:none !important;transition-duration:.01ms !important}
}
/* ── 7. CÁC BỘ CHỮ THAY THẾ ───────────────────────────────────────
Copy khối bạn muốn, đè lên mục 2, thay link ở .
── KHUYẾN NGHỊ CHO BỘ THIỆP CAO CẤP: EB GARAMOND ──
Playfair Display đẹp nhưng là một trong những font Google bị dùng
nhiều nhất thế giới — người xem nhiều web sẽ đọc ra "mẫu có sẵn"
ngay. Nó cũng tương phản nét rất cao, nên ở cỡ nhỏ nét mảnh của
dấu là chỗ đứt trước tiên. EB Garamond ít gặp hơn, cổ điển hơn,
và dấu tiếng Việt được vẽ kỹ hơn.
family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Be+Vietnam+Pro:wght@300;400;500
--tp-serif:'EB Garamond','Times New Roman','Noto Serif',serif;
--tp-optical:1.12;
── ẤM, MỘC MẠC — tiệc ngoài trời, tông kem, hoa khô ──
family=Lora:ital,wght@0,400;0,500;1,400&family=Be+Vietnam+Pro:wght@300;400;500
--tp-serif:'Lora','Times New Roman','Noto Serif',serif;
--tp-optical:1.02;
── MẢNH, THANH THOÁT — tông pastel, nước, tối giản ──
Nét mảnh như sợi tóc. ĐỔI LẠI: bắt buộc giữ weight 400 trở lên và
nền phải đủ tương phản, nếu không dấu sẽ mờ. Không dùng cho theme
nền tối.
family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Be+Vietnam+Pro:wght@300;400;500
--tp-serif:'Cormorant Garamond','Times New Roman','Noto Serif',serif;
--tp-optical:1.14;
── AN TOÀN NHẤT VỀ DẤU — khách có tên hiếm, nhiều dấu chồng ──
family=Noto+Serif+Display:ital,wght@0,400;0,500;1,400&family=Be+Vietnam+Pro:wght@300;400;500
--tp-serif:'Noto Serif Display','Times New Roman','Noto Serif',serif;
--tp-optical:1;
Chữ sans giữ Be Vietnam Pro ở mọi phương án. Đây là font do người
Việt thiết kế, dấu được vẽ từ đầu chứ không chắp thêm vào một font
phương Tây — khác biệt thấy rõ nhất ở cỡ nhãn 11px.
─────────────────────────────────────────────────────────────── */