skills.rest
Seika139
Seika139COMMUNITY
Explore all skills by this author →
GitHub

high-end-typography

Recommend font families and pairing guidelines for frontend UI projects.

Updated Jun 29, 2021
Search Tags:#typography#ui-design#web-design#font-pairing#font-selection#frontend-typography
One-click install
npx skills add https://github.com/Seika139/dotfiles --skill high-end-typography
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: high-end-typography
Source: https://github.com/Seika139/dotfiles/tree/main/claude/profiles/wsl-ubuntu/skills/use_interesting_fonts
Command: npx skills add https://github.com/Seika139/dotfiles --skill high-end-typography

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create visually compelling typography by avoiding generic system fonts and selecting high-end options to elevate frontend quality.

Core Features & Use Cases

  • Font recommendations by category: Code aesthetic, Editorial, Technical, Distinctive.
  • Font pairing guidelines: Combine Display with Monospace, Serif with Geometric Sans, or varying weights for contrast.
  • Implementation principles: Load fonts from Google Fonts and apply deliberate weight and spacing adjustments to establish a strong typographic system.

Quick Start

Select a distinctive font family from the recommended lists and apply deliberate pairing to your UI design.

Frequently Asked Questions about high-end-typography

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

FAQPage Schema
How do I select high-end typography for frontend UI projects?▼

Apply font pairing guidelines for frontend UI by combining display fonts with monospace, serif with geometric sans, or varying weights to create deliberate contrast and establish a strong typographic system.

What are the best font pairings for web design layouts?▼

The best font pairings for web design combine display with monospace, serif with geometric sans, or varying weights to create deliberate contrast and establish a strong typographic system.

Does this typography approach work for marketing pages and editorial layouts?▼

Load frontend typography from Google Fonts and apply deliberate weight and spacing adjustments to establish a strong typographic system across branding and product interfaces.

How do I avoid generic system fonts in UI design?▼

Avoid generic system fonts in UI design by selecting distinctive font families from curated recommendation lists and applying deliberate pairing techniques to elevate frontend quality.

Can I load recommended fonts directly from Google Fonts?▼

You can load recommended fonts directly from Google Fonts to implement high-end typography decisions and apply deliberate weight and spacing adjustments across frontend UI projects.

Related Skills

Explore More Design & Creative Skills→
gvkhoslagvkhosla
8

design-direction-setter

Generate a design-brief.md with typography, color palette, and visual tone.

Community
Intermediate
majesticlabs-devmajesticlabs-dev
47

frontend-design

Create distinctive frontend interfaces with typography, color, and motion guidelines.

Official
Advanced
ReviewStageReviewStage
259

deslop-ui

Enforce spacing, typography, color, and layout rules for UI design systems.

Official
Advanced
zakad00e2zakad00e2

design-taste-swiss-system

Design Swiss system interfaces with exact grids and typographic hierarchies.

Community
Advanced