skills.rest
mkrlabs
mkrlabsOFFICIAL
Explore all skills by this author →
Website𝕏@MakerLabsDevGitHub

typography

Create a three-family editorial typography system for Miximodel surfaces.

Updated Apr 22, 2026
Search Tags:#typography#branding#performance#editorial#web-fonts#libre-fonts#fontstack
One-click install
npx skills add https://github.com/mkrlabs/specflow --skill typography-mkrlabs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: typography
Source: https://github.com/mkrlabs/specflow/tree/main/examples/.claude/skills/typography
Command: npx skills add https://github.com/mkrlabs/specflow --skill typography-mkrlabs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a libre, editorial typography framework tailored for fashion/editorial brands, enabling consistent display, body text, and UI typography across surfaces.

Core Features & Use Cases

  • Defines a three-family editorial stack: display, text serif for editorial body, and text sans for UI, with licensing and performance guidance.
  • Offers performance budgeting, font loading, and accessibility recommendations for editorial typography across landing, blog, and product surfaces.
  • Use Case: apply a Vogue-adjacent Didone voice to mastheads and headlines while maintaining readable body copy and a neutral UI.

Quick Start

Apply a three-family editorial typography stack (display + body serif + UI sans) to a target surface such as a landing page or blog article.

Frequently Asked Questions about typography

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up an editorial typography system for a fashion brand?▼

An editorial typography system for fashion brands uses a three-family stack: a Didone display font for headlines, a serif for body text, and a sans-serif for UI. This separates visual voice across landing pages and product interfaces.

What are the best libre fonts for editorial web design?▼

Libre fonts for editorial web design must balance high-contrast Didone aesthetics for mastheads with readable serif body text and neutral sans-serif UI elements. The system specifies offline self-hosted fonts to maintain licensing compliance and performance.

How do I optimize web font loading for performance budgets?▼

Web font loading performance budgets require subsetting fonts to Latin-only character sets, applying font-display rules, and preloading critical assets. Offline self-hosted fonts eliminate external requests while maintaining editorial typography standards.

Can I use self-hosted offline fonts for a Vogue-inspired website?▼

Self-hosted offline fonts work for Vogue-inspired websites by using libre Didone display typefaces for headlines and readable serifs for body copy. Language subset zoning restricts character sets to Latin only, reducing file sizes.

Why does my editorial typography system need separate fonts for UI and body text?▼

Editorial typography systems need separate UI and body text fonts because high-contrast Didone display faces lack readability at small sizes. A neutral sans-serif ensures interface clarity while the serif body font maintains editorial voice.

What are the limitations of using libre fonts for high-fashion editorial layouts?▼

Libre fonts for high-fashion editorial layouts are limited to Latin-only language subsets and require offline self-hosting. Performance budgets restrict font weights and necessitate subsetting, preloading, and strict font-display rules to avoid layout shift.

Related Skills

Explore More Design & Creative Skills→
Gull-StackGull-Stack

brand-building

Define brand foundations, voice, and messaging for cohesive identity.

Official
Basic
anouar1991anouar1991
1

font-loading-audit

Audit font loading to detect FOIT/FOUT and optimize font delivery.

Community
Advanced
TedTschoppTedTschopp

brand-guidelines

Enforce tedt.org color, typography, and layout rules across design artifacts.

Community
Basic
petbrainspetbrains
13

frontend-google-fonts

Configure Google Fonts typography for Next.js and Tailwind projects.

Official
Basic