Gridlover

關於 Gridlover

Gridlover 是建立字級比例與垂直節奏的網頁排版工具，首頁以字級、行高和比例滑桿說明主要操作。進入工具後，可調整文字的基準設定與模組比例，觀察各層標題和正文的尺寸、行距及上下間距如何彼此連動，將抽象的排版比例轉成具體數值。

工具畫面分為內容、樣式與格線等區域，比例選單列出多種音程與黃金比例，樣式區則呈現標題、段落和清單等元素的設定。使用者可切換像素、相對單位及樣式語法，也能編輯支援輕量標記語法的正文，方便用自己的內容檢視文字系統。

功能特色

主要功能

• 基準設定：調整字級、行高與比例因子，觀察文字樣式變化。
• 模組比例：選單提供音程與黃金比例等多種字級比例。
• 垂直節奏：呈現各層標題、正文與清單的行高及上下間距。
• 內容與格線區：提供正文編輯、樣式與格線等操作區域。
• 單位與語法切換：提供像素、相對單位及不同樣式語法選項。
• 樣式輸出與編輯：以樣式區檢視標題、段落、清單等規則，並切換 CSS 或 SCSS 語法。
• 自訂字體與內容：提供頁首字體服務嵌入碼區、支援輕量標記語法的正文及重設入口。

使用情境

• 建立文章頁字體階層時，嘗試不同模組比例並比較標題與正文的關係。
• 檢查段落與標題間距時，放入自己的內容，對照行高與格線調整節奏。

相似工具

• Adobe Color — 學習網站
• Adobe Learn — After Effects — 學習網站
• Apple Human Interface Guidelines — 學習網站
• Baymard Institute UX Knowledge Hub — 學習網站
• BP&O — 學習網站
• Brand New — 學習網站
• Butterick’s Practical Typography — 學習網站
• Color（Method of Action） — 學習網站
• DesignSystems.com — 學習網站
• Figma Learn — 學習網站
• Fonts In Use — 學習網站
• GoodUI — 學習網站

加入創作邦會員

收藏實用內容、下載免費模板，訂閱電子報。

精選工具

• Comet — Comet 是 Perplexity 的 AI 瀏覽器，整合搜尋與助理功能，可協助閱讀、比較網頁內容、準備郵件草稿與整理學習計畫。
• Lovable — Lovable 可透過對話介面建立軟體產品，協助把想法製作為網頁應用程式。
• Pexels — Pexels 是照片與影片素材資源平臺。
• DOTOWN — DOTOWN 提供像素插畫下載，官方標示可商用，可用於圖示、文件與其他創作。

新工具

• justfont blog — 分享中文字體基礎、字型排版應用與字體設計入門的繁中文章及教案。
• LottieFiles Tips and Tutorials — LottieFiles 官方教學文章，分享設計系統、狀態機、介面動畫與 Lottie 流程。
• Adobe Learn — After Effects — Adobe 官方 After Effects 教學，涵蓋文字動畫、視覺效果與動態模糊。
• Pentagram Work — Pentagram 官方作品集，分享品牌識別、策略、包裝與動態等專案案例。