القائمة
Typography principles for print and screen. Use when selecting fonts, setting type, designing text layouts, or creating web typography.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Data visualization and information design best practices. Use when creating charts, dashboards, graphs, or any visual representation of data.
Reviews skills against Claude Code best practices. Use when auditing skill files for adherence to recommendations.
LaTeX amsmath/amssymb/mathtools packages for mathematical typesetting. Use when helping users write equations, align math, use mathematical symbols, matrices, theorems, or any advanced math formatting.
LaTeX biblatex/biber packages for modern bibliography management. Use when helping users cite references, manage .bib files, choose citation styles, or troubleshoot bibliography compilation.
LaTeX booktabs/tabularx/multirow/longtable packages for professional tables. Use when helping users create well-formatted tables, multi-page tables, or improve table appearance.
LaTeX graphicx package for image inclusion and manipulation. Use when helping users insert images, resize graphics, create figure environments, or work with subfigures.
| name | typography |
| description | Typography principles for print and screen. Use when selecting fonts, setting type, designing text layouts, or creating web typography. |
| aliases | ["type-design","font-selection","web-typography"] |
Principles for effective typography across print and screen.
| Type | Examples | Best For |
|---|---|---|
| Old Style | Garamond, Caslon | Books, long reading |
| Transitional | Baskerville, Times | Academic, newspapers |
| Modern | Bodoni, Didot | Luxury, headlines |
| Slab | Rockwell, Roboto Slab | Web, signage |
| Type | Examples | Best For |
|---|---|---|
| Grotesque | Helvetica, Arial | Corporate, UI |
| Neo-Grotesque | Inter, Roboto | Modern interfaces |
| Geometric | Futura, Montserrat | Headlines, logos |
| Humanist | Gill Sans, Open Sans | Reading, accessibility |
Measure (line length): 45-75 characters optimal
Leading: 1.4-1.6× for body, 1.1-1.3× for headlines
Ligatures: Use fi, fl, ff in body text
Small caps: For acronyms (NASA, WHO)
Oldstyle figures: Blend with lowercase
Minimum sizes:
Line height: 1.5-1.7 for body (more than print)
Contrast: 4.5:1 minimum (WCAG)
Dark mode: Avoid pure white on black
@font-face {
font-family: 'MyFont';
src: url('font.woff2') format('woff2');
font-display: swap; /* Prevents FOIT */
}
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
| Scale | Ratio | Use Case |
|---|---|---|
| Major Second | 1.125 | Simple websites |
| Minor Third | 1.200 | Blogs |
| Major Third | 1.250 | Marketing sites |
| Perfect Fourth | 1.333 | Editorial |
html {
font-size: clamp(1rem, 0.5rem + 1vw, 1.5rem);
}
Levels: h1 → h2 → h3 → body → caption
Size contrast: 1.5× minimum between levels
Techniques: Size, weight, color, spacing
WCAG Requirements:
Best fonts for accessibility:
❌ Too many fonts (limit to 2-3)
❌ Insufficient contrast
❌ Line lengths >75 or <45 chars
❌ Ignoring dark mode
❌ Using display fonts for body
❌ Justified text on web (creates rivers)
Web body: 16px, 1.5-1.7 line-height, 60-75 chars
Print body: 10-12pt, 1.4-1.6× leading
Headlines: 1.5-3× body, use modular scale
Pairing: Serif + sans-serif, match x-heights
Single file with multiple weights/widths:
h1 {
font-variation-settings: 'wght' 700, 'wdth' 80;
}
Common axes: wght (weight), wdth (width), slnt (slant), opsz (optical size)