Siemens-Enterprise Design DNA · Type system

SE Sans

Chữ dành cho công nghệ — rõ ràng, kỹ thuật, và biến điều phức tạp thành thứ dễ đọc.

Hệ chữ web
Inter (self-hosted)
Chuẩn tham chiếu
Siemens Sans
Phân loại
Humanist Sans
Bảng chữ
Latin · Latin-ext · Vietnamese
Độ đậm
5 weights

Một hệ chữ vẽ cho màn hình trước tiên — trung tính, chính xác, đặt sự dễ đọc lên hàng đầu.

01 — Câu chuyện

SE-DNA (Siemens-Enterprise Design DNA) là hệ nhận diện lấy cảm hứng từ thương hiệu Siemens — tập đoàn công nghệ Đức thành lập năm 1847. Tinh thần thị giác của Siemens là calm engineering: bình tĩnh, chính xác, đáng tin cậy, và luôn hướng tới con người — "We create technology to transform the everyday."

Trục typography của Siemens là Siemens Sans — một superfamily độc quyền (proprietary) do Hans-Jürg Hunziker thiết kế, gồm cả Siemens Serif và Siemens Slab. Đây là sans-serif nhân văn (humanist), tối ưu cho giao diện phần mềm và ấn phẩm toàn cầu. Siemens Sans không cấp phép công khai, nên không thể (và không nên) nhúng trực tiếp vào một blog tĩnh.

Vì vậy hệ chữ web của SE-DNA — gọi là "SE Sans" — được dựng trên Inter (self-hosted, giấy phép SIL OFL). Inter là một neo-grotesque nhân văn mang cùng tinh thần rõ ràng và trung tính kỹ thuật, lại hỗ trợ đầy đủ tiếng Việt — một lựa chọn mã nguồn mở thay thế trung thực cho Siemens Sans trong môi trường web công khai.

Hệ thống
SE-DNA
Cảm hứng
Siemens
Chuẩn tham chiếu
Siemens Sans
Hệ chữ web
Inter
Phân loại
Humanist Sans
Giấy phép web
SIL Open Font License
Định hướng
Digital-first / GUI

02 — Specimen

Aa

Kỹ thuật biến điều phức tạp thành thứ dễ đọc. The quick brown fox — 0123456789

03 — Độ đậm

Năm weights

Dải độ đậm từ Regular tới ExtraBold — đủ để dựng một hệ thống phân cấp rõ ràng cho cả tiêu đề lớn lẫn nội dung giao diện. Ưu tiên SemiBold/Bold cho heading, Regular/Medium cho body.

RegularWeight 400
Engineering
MediumWeight 500
Engineering
SemiBoldWeight 600
Engineering
BoldWeight 700
Engineering
ExtraBoldWeight 800
Engineering

04 — Type scale

Thang kích thước

Thang typographic gợi ý cho web — heading dùng letter-spacing âm để chữ chắc chắn hơn về thị giác, body giữ spacing tự nhiên để đọc thoải mái.

Display
Display52px · 800 · -0.03em
Heading 1
H136px · 700 · -0.02em
Heading 2
H226px · 600 · -0.01em
Heading 3
H319px · 600
Body — kỹ thuật rõ ràng, đọc thoải mái.
Body16px · 400 · lh 1.6
CAPTION / LABEL
Caption13px · 500 · 0.04em

05 — Bộ ký tự

Character set

Bộ ký tự Latin đầy đủ, chữ số, dấu câu và dấu thanh tiếng Việt — SE Sans (Inter) phủ trọn Latin, Latin-ext và Vietnamese cho nội dung song ngữ.

Uppercase

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

Lowercase

a b c d e f g h i j k l m n o p q r s t u v w x y z

Vietnamese

à á ả ã ạ ă ằ ắ â ầ ấ đ è é ê ế ì í ĩ ị ò ó ô ố ơ ớ ù ú ũ ư ừ ứ ỳ ý

Numerals & Punctuation

0 1 2 3 4 5 6 7 8 9 & @ # % ( ) ? ! . , : ; — “ ”

06 — Type tester

Gõ thử

Nhập nội dung, đổi độ đậm và kích thước để xem SE Sans hoạt động trực tiếp.

Chuyển hoá điều thường nhật

07 — Màu sắc

Palette thương hiệu

Petrol là màu chủ đạo; Deep Blue là nền tảng. Chữ đạt độ tương phản cao trên nền trắng (WCAG AA/AAA).

Petrol#009999Màu chủ đạo
Deep Blue#000028Nền tảng / tiêu đề
Bright Green#00ffb9Đỉnh gradient
Signal Red#e8001dCTA / cảnh báo

08 — Quy tắc sử dụng

Nên & Không nên

Nên

  • Dùng SemiBold/Bold cho tiêu đề, Regular/Medium cho nội dung.
  • Áp letter-spacing âm nhẹ cho heading cỡ lớn (≥ 24px).
  • Giữ độ tương phản cao — chữ tối trên nền sáng.
  • Ưu tiên sự rõ ràng và khoảng trắng rộng rãi.

Không nên

  • Không kéo giãn (stretch/condense) hay nghiêng giả lập chữ.
  • Không trộn quá nhiều weight trong một khối nội dung.
  • Không đặt chữ mảnh ở cỡ nhỏ trên nền nhiễu.
  • Không dùng letter-spacing dương cho đoạn văn dài.