用瑞士國際主義風格做個人網站：12 欄格線、兩種字重、一個紅色

這個網站的視覺很樸素：白底、黑字、一個紅色，所有東西靠左對齊，排在 12 欄的格線上。這是刻意的選擇，風格上屬於瑞士國際主義（International Typographic Style）。以下是我替自己訂下的限制，以及它們帶來的好處。

限制一：只有兩種字重

整個網站的文字只用 400 與 900 兩種字重。層次不靠「粗一點、再粗一點」的漸進，而是靠「一般」和「極粗」之間的強烈對比，加上字級大小來拉出。標題用 900，內文用 400，沒有中間地帶。

這帶來一個意外的好處：我不用每次都在想「這裡該用 600 還是 700」。選項少了，決定就快了，整個站的視覺也自然一致。

紅色只有一個，定義成 --red，用在三個地方：品牌的句點、連結 hover 時的底線、鍵盤聚焦的外框。其他一切都是黑、灰與白。因為紅色出現得很少，每一次出現都有意義，使用者的視線自然會被帶過去。

這也是一個無障礙的好處。聚焦外框用的是 3px 的紅色實線，鍵盤操作的使用者一眼就能看到目前在哪裡，而不是依賴瀏覽器預設那條淡淡的藍框。

沒有圓角、沒有陰影、沒有漸層。區塊之間用髮絲線（1px）和 2px 的粗線分隔。粗線表示「新的段落開始」，細線表示「同一段落的內部分隔」。這套規則很簡單，卻足以建立清楚的資訊層次。

版面用 CSS Grid 的 12 欄排版，欄距是 24px。作品清單每一個佔 6 欄，所以桌面版是兩欄；搜尋框佔 4 欄、計數佔 2 欄。到了手機寬度（860px 以下），全部改成佔滿 12 欄，一欄到底。

因為所有東西都對齊在同一套格線上，我幾乎不用微調間距，新增一個區塊也不太會破壞整體的節奏。

英文用 Archivo，中文用 Noto Sans TC，標籤與數字用 IBM Plex Mono。三種字體各司其職：Archivo 與 Noto 負責內容與標題，等寬字體則負責編號、日期、類別這類「資料性」的小字，視覺上立刻就能分辨「這是內容」還是「這是標籤」。

字級用 clamp() 隨視窗寬度連續縮放。例如首頁的名字，最小 40px、最大 112px，中間跟著視窗寬度平順變化，不用在每個斷點手動寫一個尺寸。

這種風格不適合所有網站。它不熱鬧、沒有動畫，不太會讓人驚呼「好酷」。但它很適合內容導向的網站：資訊清楚、閱讀順暢、載入快，而且過了很多年也不容易顯得過時。

如果你也想做一個自己維護得起的個人網站，我建議先替自己訂下幾條限制。限制不是阻礙，它是讓你不必每天重新做決定的方法。