Typography 2026 Display Headlines | Skills Pool
Typography 2026 Display Headlines Bold display fonts for hero sections, splash screens, and statement typography. Features Monument Extended, Clash Display, Cabinet Grotesk, and other impactful headline fonts.
FutureAtoms 0 스타 2026. 3. 11. Display Headlines Typography 2026
Bold, statement-making fonts for maximum visual impact - hero sections, splash screens, and brand moments.
Design Philosophy
Display fonts are designed for:
Large sizes (32px+)
Short text (headlines, titles)
Maximum visual impact
Brand personality expression
Creating focal points
Featured Display Families
Ultra-Bold Grotesques
Font Style Best For License Monument Extended Wide, bold Tech, brutalist Commercial Clash Display Sharp, modern Bold branding Free (Fontshare)
빠른 설치
Typography 2026 Display Headlines npx skills add FutureAtoms/claude-skills-backup
스타 0
업데이트 2026. 3. 11.
직업 Cabinet Grotesk Industrial SaaS, tech Free (Fontshare)
General Sans Clean, versatile Modern brands Free (Fontshare)
Character-Rich Display Font Style Best For License Basement Grotesque Brutalist Web3, gaming Commercial Fraktion Mono Tech display Developer brands Commercial GT Super Soft serif display Editorial Commercial Migra Variable display Creative agencies Commercial
Free Alternatives Font Similar To License Syne Custom display Free (Google) Archivo Black Heavy grotesque Free (Google) Anton Condensed display Free (Google) Bebas Neue Tall condensed Free (Google) Oswald Condensed sans Free (Google)
Recommended Pairings
1. Brutalist Tech Display: Monument Extended Ultra
Headlines: Cabinet Grotesk Bold
Body: Inter Regular
2. Modern SaaS Display: Clash Display SemiBold
Headlines: General Sans SemiBold
Body: General Sans Regular
3. Creative Agency Display: Syne Extra Bold
Headlines: Syne Bold
Body: Inter Regular
4. Gaming/Web3 Display: Bebas Neue
Headlines: Archivo Black
Body: Space Grotesk Regular
React Native Implementation
1. Download Display Fonts Most display fonts need manual download:
2. Install Google Font Dependencies npx expo install expo-font \
@expo-google-fonts/syne \
@expo-google-fonts/archivo \
@expo-google-fonts/anton \
@expo-google-fonts/bebas-neue \
@expo-google-fonts/oswald
3. Font Loading // apps/mobile/app/_layout.tsx
import { useFonts } from 'expo-font';
import {
Syne_400Regular,
Syne_500Medium,
Syne_600SemiBold,
Syne_700Bold,
Syne_800ExtraBold,
} from '@expo-google-fonts/syne';
import { Anton_400Regular } from '@expo-google-fonts/anton';
import { BebasNeue_400Regular } from '@expo-google-fonts/bebas-neue';
import {
Oswald_400Regular,
Oswald_500Medium,
Oswald_600SemiBold,
Oswald_700Bold,
} from '@expo-google-fonts/oswald';
export default function RootLayout() {
const [fontsLoaded] = useFonts({
// Syne family
'Syne-Regular': Syne_400Regular,
'Syne-Medium': Syne_500Medium,
'Syne-SemiBold': Syne_600SemiBold,
'Syne-Bold': Syne_700Bold,
'Syne-ExtraBold': Syne_800ExtraBold,
// Single-weight display
'Anton': Anton_400Regular,
'BebasNeue': BebasNeue_400Regular,
// Oswald condensed
'Oswald-Regular': Oswald_400Regular,
'Oswald-Medium': Oswald_500Medium,
'Oswald-SemiBold': Oswald_600SemiBold,
'Oswald-Bold': Oswald_700Bold,
// Custom fonts (Fontshare)
'ClashDisplay-Regular': require('../assets/fonts/ClashDisplay-Regular.otf'),
'ClashDisplay-Medium': require('../assets/fonts/ClashDisplay-Medium.otf'),
'ClashDisplay-SemiBold': require('../assets/fonts/ClashDisplay-Semibold.otf'),
'ClashDisplay-Bold': require('../assets/fonts/ClashDisplay-Bold.otf'),
'CabinetGrotesk-Regular': require('../assets/fonts/CabinetGrotesk-Regular.otf'),
'CabinetGrotesk-Medium': require('../assets/fonts/CabinetGrotesk-Medium.otf'),
'CabinetGrotesk-Bold': require('../assets/fonts/CabinetGrotesk-Bold.otf'),
'CabinetGrotesk-ExtraBold': require('../assets/fonts/CabinetGrotesk-Extrabold.otf'),
'CabinetGrotesk-Black': require('../assets/fonts/CabinetGrotesk-Black.otf'),
'GeneralSans-Regular': require('../assets/fonts/GeneralSans-Regular.otf'),
'GeneralSans-Medium': require('../assets/fonts/GeneralSans-Medium.otf'),
'GeneralSans-SemiBold': require('../assets/fonts/GeneralSans-Semibold.otf'),
'GeneralSans-Bold': require('../assets/fonts/GeneralSans-Bold.otf'),
});
// ... splash screen handling
}
Design Tokens // packages/ui/src/tokens/typography-display.ts
export const displayTypography = {
fonts: {
// Ultra-bold display
display: 'ClashDisplay-Bold',
displaySemiBold: 'ClashDisplay-SemiBold',
// Industrial grotesque
industrial: 'CabinetGrotesk-Bold',
industrialBlack: 'CabinetGrotesk-Black',
// Modern versatile
modern: 'GeneralSans-Bold',
modernSemiBold: 'GeneralSans-SemiBold',
// Condensed display
condensed: 'BebasNeue',
condensedAlt: 'Oswald-Bold',
// Expressive display
expressive: 'Syne-ExtraBold',
expressiveBold: 'Syne-Bold',
// Body pairing
body: 'GeneralSans-Regular',
bodyMedium: 'GeneralSans-Medium',
},
sizes: {
// Hero sizes - Maximum impact
hero1: {
fontSize: 72,
lineHeight: 76,
letterSpacing: -3,
},
hero2: {
fontSize: 56,
lineHeight: 60,
letterSpacing: -2,
},
hero3: {
fontSize: 44,
lineHeight: 48,
letterSpacing: -1.5,
},
// Display sizes
display1: {
fontSize: 40,
lineHeight: 44,
letterSpacing: -1,
},
display2: {
fontSize: 32,
lineHeight: 36,
letterSpacing: -0.5,
},
display3: {
fontSize: 28,
lineHeight: 32,
letterSpacing: -0.3,
},
// Headlines
h1: { fontSize: 24, lineHeight: 28, letterSpacing: 0 },
h2: { fontSize: 20, lineHeight: 24, letterSpacing: 0.1 },
h3: { fontSize: 18, lineHeight: 22, letterSpacing: 0.1 },
// Accent sizes
overline: {
fontSize: 12,
lineHeight: 16,
letterSpacing: 2,
textTransform: 'uppercase',
},
label: {
fontSize: 14,
lineHeight: 18,
letterSpacing: 1,
textTransform: 'uppercase',
},
},
weights: {
regular: '400',
medium: '500',
semibold: '600',
bold: '700',
extrabold: '800',
black: '900',
},
};
Component Examples
Display Text Component // packages/ui/src/components/DisplayText.tsx
import { Text as RNText, TextStyle } from 'react-native';
import Animated, {
useAnimatedStyle,
useSharedValue,
withSpring,
} from 'react-native-reanimated';
import { useEffect } from 'react';
import { displayTypography as t } from '../tokens/typography-display';
type DisplayVariant =
| 'hero1' | 'hero2' | 'hero3'
| 'display1' | 'display2' | 'display3'
| 'h1' | 'h2' | 'h3'
| 'overline' | 'label';
type DisplayFont = 'display' | 'industrial' | 'modern' | 'condensed' | 'expressive';
interface DisplayTextProps {
variant?: DisplayVariant;
font?: DisplayFont;
color?: string;
animate?: boolean;
children: React.ReactNode;
style?: TextStyle;
}
export function DisplayText({
variant = 'display1',
font = 'display',
color = '#0a0a0a',
animate = false,
children,
style
}: DisplayTextProps) {
const variantStyle = t.sizes[variant];
const opacity = useSharedValue(animate ? 0 : 1);
const translateY = useSharedValue(animate ? 20 : 0);
useEffect(() => {
if (animate) {
opacity.value = withSpring(1, { damping: 20 });
translateY.value = withSpring(0, { damping: 20 });
}
}, [animate]);
const animatedStyle = useAnimatedStyle(() => ({
opacity: opacity.value,
transform: [{ translateY: translateY.value }],
}));
const fontFamilyMap: Record<DisplayFont, string> = {
display: t.fonts.display,
industrial: t.fonts.industrial,
modern: t.fonts.modern,
condensed: t.fonts.condensed,
expressive: t.fonts.expressive,
};
if (animate) {
return (
<Animated.Text
style={[
variantStyle,
{ fontFamily: fontFamilyMap[font], color },
animatedStyle,
style
]}
>
{children}
</Animated.Text>
);
}
return (
<RNText style={[variantStyle, { fontFamily: fontFamilyMap[font], color }, style]}>
{children}
</RNText>
);
}
Hero Section Component // packages/ui/src/components/HeroDisplay.tsx
import { View, StyleSheet, Dimensions } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import Animated, {
useAnimatedStyle,
useSharedValue,
withDelay,
withSpring,
} from 'react-native-reanimated';
import { useEffect } from 'react';
import { DisplayText } from './DisplayText';
const { width } = Dimensions.get('window');
interface HeroDisplayProps {
overline?: string;
headline: string;
subheadline?: string;
gradient?: [string, string];
}
export function HeroDisplay({
overline,
headline,
subheadline,
gradient = ['#0a0a0a', '#1a1a1a']
}: HeroDisplayProps) {
const overlineOpacity = useSharedValue(0);
const headlineOpacity = useSharedValue(0);
const subOpacity = useSharedValue(0);
useEffect(() => {
overlineOpacity.value = withDelay(100, withSpring(1));
headlineOpacity.value = withDelay(300, withSpring(1));
subOpacity.value = withDelay(500, withSpring(1));
}, []);
const overlineStyle = useAnimatedStyle(() => ({
opacity: overlineOpacity.value,
transform: [{ translateY: (1 - overlineOpacity.value) * 10 }],
}));
const headlineStyle = useAnimatedStyle(() => ({
opacity: headlineOpacity.value,
transform: [{ translateY: (1 - headlineOpacity.value) * 20 }],
}));
const subStyle = useAnimatedStyle(() => ({
opacity: subOpacity.value,
transform: [{ translateY: (1 - subOpacity.value) * 10 }],
}));
return (
<LinearGradient colors={gradient} style={styles.container}>
<View style={styles.content}>
{overline && (
<Animated.View style={overlineStyle}>
<DisplayText variant="overline" color="#888">
{overline}
</DisplayText>
</Animated.View>
)}
<Animated.View style={[styles.headlineContainer, headlineStyle]}>
<DisplayText
variant={width > 400 ? 'hero1' : 'hero2'}
font="display"
color="#ffffff"
>
{headline}
</DisplayText>
</Animated.View>
{subheadline && (
<Animated.View style={subStyle}>
<DisplayText variant="h2" font="modern" color="rgba(255,255,255,0.7)">
{subheadline}
</DisplayText>
</Animated.View>
)}
</View>
</LinearGradient>
);
}
const styles = StyleSheet.create({
container: {
minHeight: 400,
justifyContent: 'center',
padding: 24,
},
content: {
gap: 16,
},
headlineContainer: {
marginVertical: 8,
},
});
Splash Screen Component // packages/ui/src/components/SplashDisplay.tsx
import { View, StyleSheet, Dimensions } from 'react-native';
import Animated, {
useAnimatedStyle,
useSharedValue,
withTiming,
withSequence,
withDelay,
Easing,
} from 'react-native-reanimated';
import { useEffect } from 'react';
import { DisplayText } from './DisplayText';
const { height } = Dimensions.get('window');
interface SplashDisplayProps {
brandName: string;
tagline?: string;
onAnimationComplete?: () => void;
}
export function SplashDisplay({
brandName,
tagline,
onAnimationComplete
}: SplashDisplayProps) {
const logoScale = useSharedValue(0.5);
const logoOpacity = useSharedValue(0);
const taglineOpacity = useSharedValue(0);
useEffect(() => {
// Logo entrance
logoScale.value = withSequence(
withTiming(1.1, { duration: 400, easing: Easing.out(Easing.back) }),
withTiming(1, { duration: 200 })
);
logoOpacity.value = withTiming(1, { duration: 300 });
// Tagline fade in
taglineOpacity.value = withDelay(600, withTiming(1, { duration: 400 }));
// Completion callback
const timeout = setTimeout(() => {
onAnimationComplete?.();
}, 1500);
return () => clearTimeout(timeout);
}, []);
const logoStyle = useAnimatedStyle(() => ({
opacity: logoOpacity.value,
transform: [{ scale: logoScale.value }],
}));
const taglineStyle = useAnimatedStyle(() => ({
opacity: taglineOpacity.value,
}));
return (
<View style={styles.container}>
<View style={styles.center}>
<Animated.View style={logoStyle}>
<DisplayText
variant="hero1"
font="display"
color="#ffffff"
style={styles.brandName}
>
{brandName}
</DisplayText>
</Animated.View>
{tagline && (
<Animated.View style={[styles.tagline, taglineStyle]}>
<DisplayText variant="h3" font="modern" color="rgba(255,255,255,0.6)">
{tagline}
</DisplayText>
</Animated.View>
)}
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#0a0a0a',
},
center: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
brandName: {
textAlign: 'center',
},
tagline: {
marginTop: 16,
},
});
Text Effects // packages/ui/src/utils/text-effects.ts
import { TextStyle } from 'react-native';
// Text shadow for depth
export const textShadow: TextStyle = {
textShadowColor: 'rgba(0, 0, 0, 0.3)',
textShadowOffset: { width: 2, height: 2 },
textShadowRadius: 4,
};
// Gradient text (requires react-native-masked-view)
export const gradientTextColors = {
sunset: ['#F472B6', '#FB923C'],
ocean: ['#06B6D4', '#3B82F6'],
forest: ['#22C55E', '#14B8A6'],
royal: ['#8B5CF6', '#EC4899'],
};
// Outlined text style
export const outlinedText = (color: string = '#ffffff', width: number = 2): TextStyle => ({
color: 'transparent',
textShadowColor: color,
textShadowOffset: { width: 0, height: 0 },
textShadowRadius: width,
});
Font Sources
Brand Examples Brand Display Font Style Figma Custom display Wide, bold Linear SF Pro Display Clean, modern Vercel Geist Sharp, technical Discord Ginto Nord Playful, bold Stripe Custom serif Elegant, premium
Best Practices
Use sparingly - Display fonts are for headlines only
Maximum contrast - Dark on light or light on dark
Generous whitespace - Let the type breathe
Responsive sizing - Scale down for mobile
Limit line length - 10-15 words max per line
Test at size - Display fonts look different small
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.