diff --git a/CharcoalSwiftUISample/Sources/CharcoalSwiftUISample/TypographiesView.swift b/CharcoalSwiftUISample/Sources/CharcoalSwiftUISample/TypographiesView.swift
index f7e4acfdc..582b47049 100644
--- a/CharcoalSwiftUISample/Sources/CharcoalSwiftUISample/TypographiesView.swift
+++ b/CharcoalSwiftUISample/Sources/CharcoalSwiftUISample/TypographiesView.swift
@@ -42,6 +42,15 @@ struct TypographiesView: View {
                         Text(Const.numberText)
                             .charcoalTypography20RegularMono()
                     }
+                    VStack(alignment: .leading, spacing: 4) {
+                        Text("20 Attributed String")
+
+                        Text("Atributed")
+                            .font(charcoalTypography: .bold20)
+                        +
+                        Text("String")
+                            .font(charcoalTypography: .regular20)
+                    }
                 }
                 Group {
                     VStack(alignment: .leading, spacing: 4) {
@@ -74,6 +83,15 @@ struct TypographiesView: View {
                         Text(Const.numberText)
                             .charcoalTypography16RegularMono()
                     }
+                    VStack(alignment: .leading, spacing: 4) {
+                        Text("16 Attributed String")
+
+                        Text("Atributed")
+                            .font(charcoalTypography: .bold16)
+                        +
+                        Text("String")
+                            .font(charcoalTypography: .regular16)
+                    }
                 }
                 Group {
                     VStack(alignment: .leading, spacing: 4) {
@@ -106,6 +124,15 @@ struct TypographiesView: View {
                         Text(Const.numberText)
                             .charcoalTypography14RegularMono()
                     }
+                    VStack(alignment: .leading, spacing: 4) {
+                        Text("14 Attributed String")
+
+                        Text("Atributed")
+                            .font(charcoalTypography: .bold14)
+                        +
+                        Text("String")
+                            .font(charcoalTypography: .regular14)
+                    }
                 }
                 Group {
                     VStack(alignment: .leading, spacing: 4) {
@@ -138,6 +165,15 @@ struct TypographiesView: View {
                         Text(Const.numberText)
                             .charcoalTypography12RegularMono()
                     }
+                    VStack(alignment: .leading, spacing: 4) {
+                        Text("12 Attributed String")
+
+                        Text("Atributed")
+                            .font(charcoalTypography: .bold12)
+                        +
+                        Text("String")
+                            .font(charcoalTypography: .regular12)
+                    }
                 }
                 Group {
                     VStack(alignment: .leading, spacing: 4) {
@@ -170,6 +206,15 @@ struct TypographiesView: View {
                         Text(Const.numberText)
                             .charcoalTypography10RegularMono()
                     }
+                    VStack(alignment: .leading, spacing: 4) {
+                        Text("10 Attributed String")
+
+                        Text("Atributed")
+                            .font(charcoalTypography: .bold10)
+                        +
+                        Text("String")
+                            .font(charcoalTypography: .regular10)
+                    }
                 }
             }
             .frame(maxWidth: .infinity)
diff --git a/Sources/CharcoalSwiftUI/Backport/View/ForegroundStyle.swift b/Sources/CharcoalSwiftUI/Backport/View/ForegroundStyle.swift
index 737012d50..a4e1dc7ab 100644
--- a/Sources/CharcoalSwiftUI/Backport/View/ForegroundStyle.swift
+++ b/Sources/CharcoalSwiftUI/Backport/View/ForegroundStyle.swift
@@ -11,3 +11,15 @@ extension Backport where Content: View {
         }
     }
 }
+
+extension Backport where Content == Text {
+    func foregroundStyle(_ color: Color) -> Text {
+        if #available(iOS 17, *) {
+            content
+                .foregroundStyle(color)
+        } else {
+            content
+                .foregroundColor(color)
+        }
+    }
+}
diff --git a/Sources/CharcoalSwiftUI/Colors/Foregrounds.swift b/Sources/CharcoalSwiftUI/Colors/Foregrounds.swift
index c172667d8..f523b10f7 100644
--- a/Sources/CharcoalSwiftUI/Colors/Foregrounds.swift
+++ b/Sources/CharcoalSwiftUI/Colors/Foregrounds.swift
@@ -14,9 +14,21 @@ public extension View {
     }
 }
 
+public extension Text {
+    func foregroundStyle(charcoalColor: CharcoalAsset.ColorPaletteGenerated) -> Text {
+        self.backport.foregroundStyle(charcoalColor.colorAsset.swiftUIColor)
+    }
+}
+
 #Preview {
-    ZStack {
+    VStack {
         Text("Charcoal")
             .foregroundStyle(charcoalColor: .brand)
+
+        Text("Attributed")
+            .foregroundStyle(charcoalColor: .brand)
+        +
+        Text("String")
+            .foregroundStyle(charcoalColor: .text3)
     }
 }
diff --git a/Sources/CharcoalSwiftUI/Components/Typographies/CharcoalTypography.swift b/Sources/CharcoalSwiftUI/Components/Typographies/CharcoalTypography.swift
new file mode 100644
index 000000000..24ccac621
--- /dev/null
+++ b/Sources/CharcoalSwiftUI/Components/Typographies/CharcoalTypography.swift
@@ -0,0 +1,52 @@
+import SwiftUI
+
+public extension Text {
+    enum CharcoalTypography {
+        case regular10
+        case bold10
+        case regular12
+        case bold12
+        case regular14
+        case bold14
+        case regular16
+        case bold16
+        case regular20
+        case bold20
+
+        typealias Value = (size: CGFloat, weight: UIFont.Weight)
+
+        var value: Value {
+            switch self {
+            case .regular10:
+                return (size: 10, weight: .regular)
+            case .bold10:
+                return (size: 10, weight: .bold)
+            case .regular12:
+                return (size: CGFloat(charcoalFoundation.typography.size.the12.fontSize), weight: .regular)
+            case .bold12:
+                return (size: CGFloat(charcoalFoundation.typography.size.the12.fontSize), weight: .bold)
+            case .regular14:
+                return (size: CGFloat(charcoalFoundation.typography.size.the14.fontSize), weight: .regular)
+            case .bold14:
+                return (size: CGFloat(charcoalFoundation.typography.size.the14.fontSize), weight: .bold)
+            case .regular16:
+                return (size: CGFloat(charcoalFoundation.typography.size.the16.fontSize), weight: .regular)
+            case .bold16:
+                return (size: CGFloat(charcoalFoundation.typography.size.the16.fontSize), weight: .bold)
+            case .regular20:
+                return (size: CGFloat(charcoalFoundation.typography.size.the20.fontSize), weight: .regular)
+            case .bold20:
+                return (size: CGFloat(charcoalFoundation.typography.size.the20.fontSize), weight: .bold)
+            }
+        }
+    }
+
+    func font(charcoalTypography: CharcoalTypography) -> Text {
+        self
+            .font(
+                .custom(UIFont.monospacedSystemFont(ofSize: .zero, weight: charcoalTypography.value.weight).fontName,
+                          size: charcoalTypography.value.size,
+                          relativeTo: .body)
+            )
+    }
+}