Font Size

A comprehensive reference for text scaling configurations. This framework provides pre-compiled static size increments (from extra small to display scales), semantic shortcut components, and dynamic pixel-point overrides.

---

Static Preset Scale Reference (rncStyles)

Static typography presets map to clean font sizing scales out of the box for uniform text scaling across your user interface.

Utility Property	Style Definition	Typical Layout Context
rncStyles.text_xs	{ fontSize: 12 }	Micro Captions / Badges
rncStyles.text_sm	{ fontSize: 14 }	Secondary Text / Subtitles
rncStyles.text_base	{ fontSize: 16 }	Standard Body Copy Paragraphs
rncStyles.text_lg	{ fontSize: 18 }	Large Paragraph Text / Content Emphasizers
rncStyles.text_xl	{ fontSize: 20 }	Small Headings / Card Titles
rncStyles.text_2xl	{ fontSize: 24 }	Subsection Headers
rncStyles.text_3xl	{ fontSize: 30 }	Primary Section Titles
rncStyles.text_4xl	{ fontSize: 36 }	Main Hero Headers
rncStyles.text_5xl	{ fontSize: 48 }	Small Display Banners
rncStyles.text_6xl	{ fontSize: 60 }	Display Titles
rncStyles.text_7xl	{ fontSize: 72 }	Ultra Display Titles
rncStyles.text_8xl	{ fontSize: 96 }	Massive Numeric Trackers
rncStyles.text_9xl	{ fontSize: 128 }	Display Numbers / Statistics

---

Semantic Style Shortcuts (rncStyles)

Pre-packaged functional shortcuts map font combinations with theme color styles for lightning-fast implementation.

Utility Property	Style Definition	Linked Swatches
rncStyles.text_link	{ color: "#3b82f6", fontSize: 18 }	Color Palette Reference

---

Dynamic Sizing Generator (rncStyles)

When a highly specialized explicit pixel font size target value is required, execute the dynamic layout style generator.

Function Interface	Native Property Target	Supported Input
rncStyles.text_size(size)	fontSize	number (Pixels)

---

Usage Example

FontSizePreview.tsx

import React from 'react';
import { View, Text } from 'react-native';
import rncStyles, { fnc } from 'rncstyles';

export default function FontSizePreview() {
  return (
    <View style={{ gap: 12 }}>
      
      {/* Massive Display Dashboard Metric Header */}
      <Text style={[rncStyles.text_7xl, rncStyles.font_black]}>
        98%
      </Text>

      {/* Standard Form Section Header */}
      <Text style={[rncStyles.text_2xl, rncStyles.font_bold]}>
        Account Configuration Settings
      </Text>

      {/* Standard Body Layout Copy */}
      <Text style={[rncStyles.text_base, rncStyles.font_normal]}>
        This paragraph uses base typography settings to deliver crisp, perfectly sized content rendering across mobile platforms.
      </Text>

      {/* Semantic Link Node Component */}
      <Text style={[rncStyles.text_link, rncStyles.underline]}>
        View complete profile documentation
      </Text>

      {/* Custom Exact Override Text Node */}
      <Text style={[rncStyles.text_size(15)]}>
        Custom typography explicitly computed at exactly 15 pixels.
      </Text>

    </View>
  );
}