Typography 2026 Humanist Warm | Skills Pool
Typography 2026 Humanist Warm Warm, approachable humanist typography for healthcare, education, government, and accessibility-first apps. Features Source Sans, Lato, Open Sans, and Noto Sans.
FutureAtoms 0 스타 2026. 3. 11. Humanist Warm Typography 2026
Approachable, readable typography designed for trust, clarity, and inclusivity.
Design Philosophy
Humanist fonts feature:
Calligraphic influences (pen-stroke origins)
Varying stroke widths
Open apertures for readability
Warm, friendly appearance
Excellent legibility at all sizes
Featured Font Families
Primary Humanist Sans
Font Style Best For License Source Sans Pro Adobe's humanist Professional, multi-language Free (Adobe) Lato Warm, balanced Friendly professional Free (Google)
빠른 설치
Typography 2026 Humanist Warm npx skills add FutureAtoms/claude-skills-backup
스타 0
업데이트 2026. 3. 11.
직업 Open Sans Neutral, clear Universal readability Free (Google)
Noto Sans Global support Multi-language apps Free (Google)
Extended Options Font Style Best For Work Sans Friendly geometric Modern humanist IBM Plex Sans Technical humanist Data, enterprise Fira Sans Mozilla's humanist Technical docs Cabin Rounded humanist Friendly apps
Humanist Serif Pairings Sans Serif Pairing Use Case Lato Merriweather Warm editorial Open Sans Roboto Slab Accessible pairing Source Sans Source Serif Adobe harmony Work Sans Libre Baskerville Modern classic
Recommended Pairings
1. Healthcare/Medical Headlines: Source Sans Pro SemiBold (600)
Body: Source Sans Pro Regular (400)
Emphasis: Source Sans Pro Medium (500)
Data: IBM Plex Mono
Headlines: Lato Bold (700)
Subheads: Lato SemiBold (600)
Body: Lato Regular (400)
Reading: Merriweather Regular
3. Government/Civic Headlines: Open Sans Bold (700)
Body: Open Sans Regular (400)
Forms: Open Sans Medium (500)
Headlines: Work Sans SemiBold (600)
Body: Work Sans Regular (400)
Accent: Libre Baskerville Italic
React Native Implementation
1. Install Dependencies npx expo install expo-font \
@expo-google-fonts/source-sans-pro \
@expo-google-fonts/lato \
@expo-google-fonts/open-sans \
@expo-google-fonts/noto-sans \
@expo-google-fonts/work-sans \
@expo-google-fonts/merriweather
2. Font Loading // apps/mobile/app/_layout.tsx
import { useFonts } from 'expo-font';
import {
SourceSansPro_300Light,
SourceSansPro_400Regular,
SourceSansPro_600SemiBold,
SourceSansPro_700Bold,
SourceSansPro_400Regular_Italic,
} from '@expo-google-fonts/source-sans-pro';
import {
Lato_300Light,
Lato_400Regular,
Lato_700Bold,
Lato_400Italic,
} from '@expo-google-fonts/lato';
import {
OpenSans_300Light,
OpenSans_400Regular,
OpenSans_500Medium,
OpenSans_600SemiBold,
OpenSans_700Bold,
} from '@expo-google-fonts/open-sans';
import {
NotoSans_400Regular,
NotoSans_500Medium,
NotoSans_700Bold,
} from '@expo-google-fonts/noto-sans';
export default function RootLayout() {
const [fontsLoaded] = useFonts({
// Source Sans Pro
'SourceSans-Light': SourceSansPro_300Light,
'SourceSans-Regular': SourceSansPro_400Regular,
'SourceSans-SemiBold': SourceSansPro_600SemiBold,
'SourceSans-Bold': SourceSansPro_700Bold,
'SourceSans-Italic': SourceSansPro_400Regular_Italic,
// Lato
'Lato-Light': Lato_300Light,
'Lato-Regular': Lato_400Regular,
'Lato-Bold': Lato_700Bold,
'Lato-Italic': Lato_400Italic,
// Open Sans
'OpenSans-Light': OpenSans_300Light,
'OpenSans-Regular': OpenSans_400Regular,
'OpenSans-Medium': OpenSans_500Medium,
'OpenSans-SemiBold': OpenSans_600SemiBold,
'OpenSans-Bold': OpenSans_700Bold,
// Noto Sans (multi-language)
'NotoSans-Regular': NotoSans_400Regular,
'NotoSans-Medium': NotoSans_500Medium,
'NotoSans-Bold': NotoSans_700Bold,
});
// ... splash screen handling
}
Design Tokens // packages/ui/src/tokens/typography-humanist.ts
export const humanistTypography = {
fonts: {
// Primary (Source Sans Pro)
heading: 'SourceSans-Bold',
headingSemiBold: 'SourceSans-SemiBold',
body: 'SourceSans-Regular',
bodyLight: 'SourceSans-Light',
bodyItalic: 'SourceSans-Italic',
// Alternative (Lato)
altHeading: 'Lato-Bold',
altBody: 'Lato-Regular',
altLight: 'Lato-Light',
// Universal (Open Sans)
universal: 'OpenSans-Regular',
universalMedium: 'OpenSans-Medium',
universalBold: 'OpenSans-Bold',
// Multi-language (Noto Sans)
global: 'NotoSans-Regular',
globalMedium: 'NotoSans-Medium',
globalBold: 'NotoSans-Bold',
},
sizes: {
// Headings - Clear hierarchy
h1: { fontSize: 28, lineHeight: 36, letterSpacing: -0.2 },
h2: { fontSize: 24, lineHeight: 32, letterSpacing: 0 },
h3: { fontSize: 20, lineHeight: 28, letterSpacing: 0.1 },
h4: { fontSize: 18, lineHeight: 26, letterSpacing: 0.1 },
h5: { fontSize: 16, lineHeight: 24, letterSpacing: 0.1 },
// Body - Optimized for readability
bodyLarge: { fontSize: 18, lineHeight: 30, letterSpacing: 0.2 },
body: { fontSize: 16, lineHeight: 26, letterSpacing: 0.2 },
bodySmall: { fontSize: 14, lineHeight: 22, letterSpacing: 0.2 },
// UI Elements
button: { fontSize: 16, lineHeight: 20, letterSpacing: 0.3 },
input: { fontSize: 16, lineHeight: 24, letterSpacing: 0.1 },
label: { fontSize: 14, lineHeight: 18, letterSpacing: 0.2 },
helper: { fontSize: 13, lineHeight: 18, letterSpacing: 0.2 },
caption: { fontSize: 12, lineHeight: 16, letterSpacing: 0.3 },
// Accessibility-focused
largeText: { fontSize: 20, lineHeight: 32, letterSpacing: 0.3 },
extraLarge: { fontSize: 24, lineHeight: 36, letterSpacing: 0.3 },
},
weights: {
light: '300',
regular: '400',
medium: '500',
semibold: '600',
bold: '700',
},
// Accessibility settings
accessibility: {
minTouchTarget: 44, // pixels
minFontSize: 14,
preferredLineHeight: 1.6,
maxLineLength: 70, // characters
},
};
Component Examples
Accessible Text Component // packages/ui/src/components/HumanistText.tsx
import { Text as RNText, TextStyle, AccessibilityProps } from 'react-native';
import { humanistTypography as t } from '../tokens/typography-humanist';
type HumanistVariant =
| 'h1' | 'h2' | 'h3' | 'h4' | 'h5'
| 'bodyLarge' | 'body' | 'bodySmall'
| 'button' | 'input' | 'label' | 'helper' | 'caption'
| 'largeText' | 'extraLarge';
interface HumanistTextProps extends AccessibilityProps {
variant?: HumanistVariant;
weight?: keyof typeof t.weights;
italic?: boolean;
color?: string;
children: React.ReactNode;
style?: TextStyle;
}
export function HumanistText({
variant = 'body',
weight,
italic = false,
color = '#1f2937',
children,
style,
...accessibilityProps
}: HumanistTextProps) {
const variantStyle = t.sizes[variant];
const isHeading = variant.startsWith('h');
let fontFamily: string;
if (italic) {
fontFamily = t.fonts.bodyItalic;
} else if (isHeading) {
fontFamily = weight === 'semibold' ? t.fonts.headingSemiBold : t.fonts.heading;
} else if (weight === 'light') {
fontFamily = t.fonts.bodyLight;
} else {
fontFamily = t.fonts.body;
}
// Determine accessibility role
const accessibilityRole = isHeading ? 'header' : 'text';
return (
<RNText
style={[variantStyle, { fontFamily, color }, style]}
accessibilityRole={accessibilityRole}
{...accessibilityProps}
>
{children}
</RNText>
);
}
// packages/ui/src/components/FormField.tsx
import { View, TextInput, StyleSheet } from 'react-native';
import { HumanistText } from './HumanistText';
import { humanistTypography as t } from '../tokens/typography-humanist';
interface FormFieldProps {
label: string;
value: string;
onChangeText: (text: string) => void;
placeholder?: string;
helperText?: string;
error?: string;
required?: boolean;
}
export function FormField({
label,
value,
onChangeText,
placeholder,
helperText,
error,
required
}: FormFieldProps) {
return (
<View style={styles.container}>
<HumanistText
variant="label"
weight="semibold"
accessibilityRole="text"
>
{label}{required && ' *'}
</HumanistText>
<TextInput
style={[
styles.input,
error && styles.inputError
]}
value={value}
onChangeText={onChangeText}
placeholder={placeholder}
placeholderTextColor="#9ca3af"
accessibilityLabel={label}
accessibilityHint={helperText}
/>
{(helperText || error) && (
<HumanistText
variant="helper"
color={error ? '#dc2626' : '#6b7280'}
>
{error || helperText}
</HumanistText>
)}
</View>
);
}
const styles = StyleSheet.create({
container: {
marginBottom: 20,
},
input: {
marginTop: 8,
marginBottom: 4,
paddingVertical: 14,
paddingHorizontal: 16,
borderWidth: 1,
borderColor: '#d1d5db',
borderRadius: 8,
fontFamily: 'SourceSans-Regular',
fontSize: 16,
lineHeight: 24,
color: '#1f2937',
backgroundColor: '#ffffff',
},
inputError: {
borderColor: '#dc2626',
},
});
Info Card Component // packages/ui/src/components/InfoCard.tsx
import { View, StyleSheet } from 'react-native';
import { HumanistText } from './HumanistText';
interface InfoCardProps {
title: string;
description: string;
type?: 'info' | 'warning' | 'success' | 'error';
}
export function InfoCard({ title, description, type = 'info' }: InfoCardProps) {
const colors = {
info: { bg: '#eff6ff', border: '#3b82f6', text: '#1e40af' },
warning: { bg: '#fefce8', border: '#eab308', text: '#854d0e' },
success: { bg: '#f0fdf4', border: '#22c55e', text: '#166534' },
error: { bg: '#fef2f2', border: '#ef4444', text: '#991b1b' },
};
const scheme = colors[type];
return (
<View
style={[
styles.card,
{ backgroundColor: scheme.bg, borderLeftColor: scheme.border }
]}
accessibilityRole="alert"
>
<HumanistText variant="h5" color={scheme.text}>
{title}
</HumanistText>
<HumanistText variant="body" color={scheme.text} style={styles.description}>
{description}
</HumanistText>
</View>
);
}
const styles = StyleSheet.create({
card: {
padding: 16,
borderLeftWidth: 4,
borderRadius: 8,
},
description: {
marginTop: 8,
},
});
Accessibility Best Practices // packages/ui/src/utils/accessibility.ts
import { PixelRatio, AccessibilityInfo } from 'react-native';
// Scale font size based on user's accessibility settings
export function getAccessibleFontSize(baseSize: number): number {
const fontScale = PixelRatio.getFontScale();
// Cap scaling to prevent layout issues
const cappedScale = Math.min(fontScale, 1.5);
return baseSize * cappedScale;
}
// Check if user prefers reduced motion
export async function prefersReducedMotion(): Promise<boolean> {
return AccessibilityInfo.isReduceMotionEnabled();
}
// Minimum contrast ratio checker
export function meetsContrastRatio(
foreground: string,
background: string,
level: 'AA' | 'AAA' = 'AA'
): boolean {
// WCAG requirements:
// AA: 4.5:1 for normal text, 3:1 for large text
// AAA: 7:1 for normal text, 4.5:1 for large text
const ratio = calculateContrastRatio(foreground, background);
return level === 'AA' ? ratio >= 4.5 : ratio >= 7;
}
function calculateContrastRatio(fg: string, bg: string): number {
// Implementation of WCAG contrast calculation
const fgLuminance = getLuminance(fg);
const bgLuminance = getLuminance(bg);
const lighter = Math.max(fgLuminance, bgLuminance);
const darker = Math.min(fgLuminance, bgLuminance);
return (lighter + 0.05) / (darker + 0.05);
}
function getLuminance(hex: string): number {
const rgb = hexToRgb(hex);
const [r, g, b] = rgb.map(c => {
c = c / 255;
return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
});
return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}
function hexToRgb(hex: string): number[] {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result
? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)]
: [0, 0, 0];
}
Color Recommendations export const accessibleColors = {
// Text colors with WCAG AA compliance
text: {
primary: '#1f2937', // Gray 800 - 15.1:1 on white
secondary: '#4b5563', // Gray 600 - 7.1:1 on white
tertiary: '#6b7280', // Gray 500 - 5.0:1 on white
muted: '#9ca3af', // Gray 400 - 3.0:1 (large text only)
},
// Background colors
background: {
primary: '#ffffff',
secondary: '#f9fafb',
tertiary: '#f3f4f6',
},
// Semantic colors (with accessible text pairings)
semantic: {
info: { bg: '#eff6ff', text: '#1e40af' },
success: { bg: '#f0fdf4', text: '#166534' },
warning: { bg: '#fefce8', text: '#854d0e' },
error: { bg: '#fef2f2', text: '#991b1b' },
},
// Interactive states
interactive: {
primary: '#2563eb', // Blue 600
primaryHover: '#1d4ed8', // Blue 700
focus: '#3b82f6', // Blue 500 for focus rings
},
};
Font Sources
Sector Examples Sector Font Choice Why Healthcare Source Sans Pro Professional, readable, multi-language Education Lato Warm, approachable, good for long reading Government Open Sans Neutral, clear, universally accessible Nonprofit Work Sans Friendly, modern, trustworthy Financial IBM Plex Sans Technical precision, clear data display
02
Design Philosophy
IDE 플러그인
Agent Customization **WORKFLOW SKILL** — Create, update, review, fix, or debug VS Code agent customization files (.instructions.md, .prompt.md, .agent.md, SKILL.md, copilot-instructions.md, AGENTS.md). USE FOR: saving coding preferences; troubleshooting why instructions/skills/agents are ignored or not invoked; configuring applyTo patterns; defining tool restrictions; creating custom agent modes or specialized workflows; packaging domain knowledge; fixing YAML frontmatter syntax. DO NOT USE FOR: general coding questions (use default agent); runtime debugging or error diagnosis; MCP server configuration (use MCP docs directly); VS Code extension development. INVOKES: file system tools (read/write customization files), ask-questions tool (interview user for requirements), subagents for codebase exploration. FOR SINGLE OPERATIONS: For quick YAML frontmatter fixes or creating a single file from a known pattern, edit the file directly — no skill needed.