diff --git a/crates/bevy_dev_tools/src/fps_overlay.rs b/crates/bevy_dev_tools/src/fps_overlay.rs
index ea5c0fde4318b..7e5e0ed2d2bf4 100644
--- a/crates/bevy_dev_tools/src/fps_overlay.rs
+++ b/crates/bevy_dev_tools/src/fps_overlay.rs
@@ -6,7 +6,6 @@ use bevy_color::Color;
 use bevy_diagnostic::{DiagnosticsStore, FrameTimeDiagnosticsPlugin};
 use bevy_ecs::{
     component::Component,
-    entity::Entity,
     prelude::Local,
     query::{With, Without},
     resource::Resource,
@@ -15,12 +14,9 @@ use bevy_ecs::{
 };
 use bevy_picking::Pickable;
 use bevy_render::storage::ShaderStorageBuffer;
-use bevy_text::{Font, TextColor, TextFont, TextSpan};
+use bevy_text::{Font, FontFace, FontSize, TextColor};
 use bevy_time::Time;
-use bevy_ui::{
-    widget::{Text, TextUiWriter},
-    FlexDirection, GlobalZIndex, Node, PositionType, Val,
-};
+use bevy_ui::{widget::Text, FlexDirection, GlobalZIndex, Node, PositionType, Val};
 use bevy_ui_render::prelude::MaterialNode;
 use core::time::Duration;
 
@@ -77,9 +73,11 @@ impl Plugin for FpsOverlayPlugin {
 /// Configuration options for the FPS overlay.
 #[derive(Resource, Clone)]
 pub struct FpsOverlayConfig {
-    /// Configuration of text in the overlay.
-    pub text_config: TextFont,
-    /// Color of text in the overlay.
+    /// Font face used for the overlay's text.
+    pub font: Handle<Font>,
+    /// Font size used for the overlay's text.
+    pub font_size: f32,
+    /// Color used for the overlay's text.
     pub text_color: Color,
     /// Displays the FPS overlay if true.
     pub enabled: bool,
@@ -94,11 +92,8 @@ pub struct FpsOverlayConfig {
 impl Default for FpsOverlayConfig {
     fn default() -> Self {
         FpsOverlayConfig {
-            text_config: TextFont {
-                font: Handle::<Font>::default(),
-                font_size: 32.0,
-                ..Default::default()
-            },
+            font: Handle::default(),
+            font_size: 32.,
             text_color: Color::WHITE,
             enabled: true,
             refresh_interval: Duration::from_millis(100),
@@ -146,6 +141,9 @@ impl Default for FrameTimeGraphConfig {
 #[derive(Component)]
 struct FpsText;
 
+#[derive(Component)]
+struct FpsCounter;
+
 #[derive(Component)]
 struct FrameTimeGraph;
 
@@ -170,14 +168,15 @@ fn setup(
         .with_children(|p| {
             p.spawn((
                 Text::new("FPS: "),
-                overlay_config.text_config.clone(),
+                FontFace(overlay_config.font.clone()),
+                FontSize::Px(overlay_config.font_size),
                 TextColor(overlay_config.text_color),
                 FpsText,
                 Pickable::IGNORE,
             ))
-            .with_child((TextSpan::default(), overlay_config.text_config.clone()));
+            .with_child((Text::default(), FpsCounter));
+            let font_size = overlay_config.font_size;
 
-            let font_size = overlay_config.text_config.font_size;
             p.spawn((
                 Node {
                     width: Val::Px(font_size * FRAME_TIME_GRAPH_WIDTH_SCALE),
@@ -211,8 +210,7 @@ fn setup(
 
 fn update_text(
     diagnostic: Res<DiagnosticsStore>,
-    query: Query<Entity, With<FpsText>>,
-    mut writer: TextUiWriter,
+    mut fps_counter_text_query: Query<&mut Text, With<FpsCounter>>,
     time: Res<Time>,
     config: Res<FpsOverlayConfig>,
     mut time_since_rerender: Local<Duration>,
@@ -220,11 +218,11 @@ fn update_text(
     *time_since_rerender += time.delta();
     if *time_since_rerender >= config.refresh_interval {
         *time_since_rerender = Duration::ZERO;
-        for entity in &query {
+        for mut fps_counter_text in &mut fps_counter_text_query {
             if let Some(fps) = diagnostic.get(&FrameTimeDiagnosticsPlugin::FPS)
                 && let Some(value) = fps.smoothed()
             {
-                *writer.text(entity, 1) = format!("{value:.2}");
+                fps_counter_text.0 = format!("{value:.2}");
             }
         }
     }
@@ -232,14 +230,11 @@ fn update_text(
 
 fn customize_overlay(
     overlay_config: Res<FpsOverlayConfig>,
-    query: Query<Entity, With<FpsText>>,
-    mut writer: TextUiWriter,
+    mut query: Query<(&mut FontFace, &mut TextColor), With<FpsText>>,
 ) {
-    for entity in &query {
-        writer.for_each_font(entity, |mut font| {
-            *font = overlay_config.text_config.clone();
-        });
-        writer.for_each_color(entity, |mut color| color.0 = overlay_config.text_color);
+    for (mut font, mut color) in &mut query {
+        font.0 = overlay_config.font.clone();
+        color.0 = overlay_config.text_color;
     }
 }
 
@@ -256,7 +251,7 @@ fn toggle_display(
 
     if overlay_config.frame_time_graph_config.enabled {
         // Scale the frame time graph based on the font size of the overlay
-        let font_size = overlay_config.text_config.font_size;
+        let font_size = overlay_config.font_size;
         graph_node.width = Val::Px(font_size * FRAME_TIME_GRAPH_WIDTH_SCALE);
         graph_node.height = Val::Px(font_size * FRAME_TIME_GRAPH_HEIGHT_SCALE);
 
diff --git a/crates/bevy_dev_tools/src/picking_debug.rs b/crates/bevy_dev_tools/src/picking_debug.rs
index 40c98d2537e35..8e42ad11a61f3 100644
--- a/crates/bevy_dev_tools/src/picking_debug.rs
+++ b/crates/bevy_dev_tools/src/picking_debug.rs
@@ -11,7 +11,7 @@ use bevy_picking::pointer::{Location, PointerId, PointerInput, PointerLocation,
 use bevy_picking::prelude::*;
 use bevy_picking::PickingSystems;
 use bevy_reflect::prelude::*;
-use bevy_text::prelude::*;
+use bevy_text::FontSize;
 use bevy_ui::prelude::*;
 use core::cmp::Ordering;
 use core::fmt::{Debug, Display, Formatter, Result};
@@ -284,7 +284,7 @@ pub fn debug_draw(
                     GlobalZIndex(i32::MAX),
                     Pickable::IGNORE,
                     UiTargetCamera(camera),
-                    children![(Text::new(text.clone()), TextFont::from_font_size(12.0))],
+                    children![(Text::new(text.clone()), FontSize::Px(12.0))],
                 ));
         }
     }
diff --git a/crates/bevy_feathers/src/font_styles.rs b/crates/bevy_feathers/src/font_styles.rs
index 9ea7783db5752..c7ecf06a351d3 100644
--- a/crates/bevy_feathers/src/font_styles.rs
+++ b/crates/bevy_feathers/src/font_styles.rs
@@ -1,5 +1,4 @@
 //! A framework for inheritable font styles.
-use bevy_app::{Propagate, PropagateOver};
 use bevy_asset::{AssetServer, Handle};
 use bevy_ecs::{
     component::Component,
@@ -9,7 +8,7 @@ use bevy_ecs::{
     system::{Commands, Query, Res},
 };
 use bevy_reflect::{prelude::ReflectDefault, Reflect};
-use bevy_text::{Font, TextFont};
+use bevy_text::{Font, FontFace, FontSize};
 
 use crate::{handle_or_path::HandleOrPath, theme::ThemedText};
 
@@ -17,7 +16,7 @@ use crate::{handle_or_path::HandleOrPath, theme::ThemedText};
 /// downward to any child text entity that has the [`ThemedText`] marker.
 #[derive(Component, Default, Clone, Debug, Reflect)]
 #[reflect(Component, Default)]
-#[require(ThemedText, PropagateOver::<TextFont>::default())]
+#[require(ThemedText)]
 pub struct InheritableFont {
     /// The font handle or path.
     pub font: HandleOrPath<Font>,
@@ -57,10 +56,8 @@ pub(crate) fn on_changed_font(
             HandleOrPath::Path(ref p) => Some(assets.load::<Font>(p)),
         }
     {
-        commands.entity(insert.entity).insert(Propagate(TextFont {
-            font,
-            font_size: style.font_size,
-            ..Default::default()
-        }));
+        commands
+            .entity(insert.entity)
+            .insert((FontFace(font), FontSize::Px(style.font_size)));
     }
 }
diff --git a/crates/bevy_feathers/src/lib.rs b/crates/bevy_feathers/src/lib.rs
index 348b677f98e53..dd7cce9123fb1 100644
--- a/crates/bevy_feathers/src/lib.rs
+++ b/crates/bevy_feathers/src/lib.rs
@@ -18,14 +18,9 @@
 //! Please report issues, submit fixes and propose changes.
 //! Thanks for stress-testing; let's build something better together.
 
-use bevy_app::{
-    HierarchyPropagatePlugin, Plugin, PluginGroup, PluginGroupBuilder, PostUpdate, PropagateSet,
-};
+use bevy_app::{Plugin, PluginGroup, PluginGroupBuilder, PostUpdate};
 use bevy_asset::embedded_asset;
-use bevy_ecs::{query::With, schedule::IntoScheduleConfigs};
 use bevy_input_focus::{tab_navigation::TabNavigationPlugin, InputDispatchPlugin};
-use bevy_text::{TextColor, TextFont};
-use bevy_ui::UiSystems;
 use bevy_ui_render::UiMaterialPlugin;
 use bevy_ui_widgets::UiWidgetsPlugins;
 
@@ -33,7 +28,7 @@ use crate::{
     alpha_pattern::{AlphaPatternMaterial, AlphaPatternResource},
     controls::ControlsPlugin,
     cursor::{CursorIconPlugin, DefaultCursor, EntityCursor},
-    theme::{ThemedText, UiTheme},
+    theme::UiTheme,
 };
 
 mod alpha_pattern;
@@ -68,18 +63,9 @@ impl Plugin for FeathersPlugin {
         app.add_plugins((
             ControlsPlugin,
             CursorIconPlugin,
-            HierarchyPropagatePlugin::<TextColor, With<ThemedText>>::new(PostUpdate),
-            HierarchyPropagatePlugin::<TextFont, With<ThemedText>>::new(PostUpdate),
             UiMaterialPlugin::<AlphaPatternMaterial>::default(),
         ));
 
-        // This needs to run in UiSystems::Propagate so the fonts are up-to-date for `measure_text_system`
-        // and `detect_text_needs_rerender` in UiSystems::Content
-        app.configure_sets(
-            PostUpdate,
-            PropagateSet::<TextFont>::default().in_set(UiSystems::Propagate),
-        );
-
         app.insert_resource(DefaultCursor(EntityCursor::System(
             bevy_window::SystemCursorIcon::Default,
         )));
diff --git a/crates/bevy_feathers/src/theme.rs b/crates/bevy_feathers/src/theme.rs
index 07c7cb1cbf48c..b2377ff0dd641 100644
--- a/crates/bevy_feathers/src/theme.rs
+++ b/crates/bevy_feathers/src/theme.rs
@@ -1,5 +1,4 @@
 //! A framework for theming.
-use bevy_app::{Propagate, PropagateOver};
 use bevy_color::{palettes, Color};
 use bevy_ecs::{
     change_detection::DetectChanges,
@@ -105,7 +104,7 @@ pub struct ThemeBorderColor(pub ThemeToken);
 #[component(immutable)]
 #[derive(Reflect)]
 #[reflect(Component, Clone)]
-#[require(ThemedText, PropagateOver::<TextColor>::default())]
+#[require(ThemedText)]
 pub struct ThemeFontColor(pub ThemeToken);
 
 /// A marker component that is used to indicate that the text entity wants to opt-in to using
@@ -167,8 +166,6 @@ pub(crate) fn on_changed_font_color(
 ) {
     if let Ok(token) = font_color.get(insert.entity) {
         let color = theme.color(&token.0);
-        commands
-            .entity(insert.entity)
-            .insert(Propagate(TextColor(color)));
+        commands.entity(insert.entity).insert(TextColor(color));
     }
 }
diff --git a/crates/bevy_sprite/src/lib.rs b/crates/bevy_sprite/src/lib.rs
index b70d2530b2b2c..063fc6e00591e 100644
--- a/crates/bevy_sprite/src/lib.rs
+++ b/crates/bevy_sprite/src/lib.rs
@@ -28,7 +28,7 @@ pub mod prelude {
     };
     #[cfg(feature = "bevy_text")]
     #[doc(hidden)]
-    pub use crate::text2d::{Text2d, Text2dReader, Text2dWriter};
+    pub use crate::text2d::Text2d;
     #[doc(hidden)]
     pub use crate::{
         sprite::{Sprite, SpriteImageMode},
@@ -44,6 +44,8 @@ use bevy_camera::{
     visibility::VisibilitySystems,
 };
 use bevy_mesh::{Mesh, Mesh2d};
+#[cfg(feature = "bevy_text")]
+use bevy_text::update_text_roots;
 #[cfg(feature = "bevy_sprite_picking_backend")]
 pub use picking_backend::*;
 pub use sprite::*;
@@ -84,7 +86,7 @@ impl Plugin for SpritePlugin {
         app.add_systems(
             PostUpdate,
             (
-                bevy_text::detect_text_needs_rerender::<Text2d>,
+                update_text_roots::<Text2d>,
                 update_text2d_layout
                     .after(bevy_camera::CameraUpdateSystems)
                     .after(bevy_text::remove_dropped_font_atlas_sets),
@@ -92,6 +94,7 @@ impl Plugin for SpritePlugin {
             )
                 .chain()
                 .in_set(bevy_text::Text2dUpdateSystems)
+                .after(bevy_text::ComputedTextStyleUpdateSystems)
                 .after(bevy_app::AnimationSystems),
         );
 
diff --git a/crates/bevy_sprite/src/text2d.rs b/crates/bevy_sprite/src/text2d.rs
index 3c0e5fa56564f..129caedd2bb42 100644
--- a/crates/bevy_sprite/src/text2d.rs
+++ b/crates/bevy_sprite/src/text2d.rs
@@ -8,6 +8,7 @@ use bevy_camera::Camera;
 use bevy_color::Color;
 use bevy_derive::{Deref, DerefMut};
 use bevy_ecs::entity::EntityHashSet;
+use bevy_ecs::query::With;
 use bevy_ecs::{
     change_detection::{DetectChanges, Ref},
     component::Component,
@@ -20,9 +21,9 @@ use bevy_image::prelude::*;
 use bevy_math::{FloatOrd, Vec2, Vec3};
 use bevy_reflect::{prelude::ReflectDefault, Reflect};
 use bevy_text::{
-    ComputedTextBlock, CosmicFontSystem, Font, FontAtlasSets, LineBreak, SwashCache, TextBounds,
-    TextColor, TextError, TextFont, TextLayout, TextLayoutInfo, TextPipeline, TextReader, TextRoot,
-    TextSpanAccess, TextWriter,
+    ComputedFontSize, ComputedTextBlock, ComputedTextStyle, CosmicFontSystem, DefaultTextStyle,
+    Font, FontAtlasSets, LineBreak, SwashCache, TextBounds, TextError, TextLayout, TextLayoutInfo,
+    TextPipeline, TextRoot,
 };
 use bevy_transform::components::Transform;
 use core::any::TypeId;
@@ -45,7 +46,7 @@ use core::any::TypeId;
 /// # use bevy_color::Color;
 /// # use bevy_color::palettes::basic::BLUE;
 /// # use bevy_ecs::world::World;
-/// # use bevy_text::{Font, Justify, TextLayout, TextFont, TextColor, TextSpan};
+/// # use bevy_text::{Font, Justify, TextLayout, FontFace, TextColor, TextSpan};
 /// # use bevy_sprite::Text2d;
 /// #
 /// # let font_handle: Handle<Font> = Default::default();
@@ -57,11 +58,8 @@ use core::any::TypeId;
 /// // With non-default style.
 /// world.spawn((
 ///     Text2d::new("hello world!"),
-///     TextFont {
-///         font: font_handle.clone().into(),
-///         font_size: 60.0,
-///         ..Default::default()
-///     },
+///     FontFace(font_handle.clone()),
+///     FontSize::Px(60.0),
 ///     TextColor(BLUE.into()),
 /// ));
 ///
@@ -73,20 +71,19 @@ use core::any::TypeId;
 ///
 /// // With spans
 /// world.spawn(Text2d::new("hello ")).with_children(|parent| {
-///     parent.spawn(TextSpan::new("world"));
-///     parent.spawn((TextSpan::new("!"), TextColor(BLUE.into())));
+///     parent.spawn(Text2d::new("world"));
+///     parent.spawn((Text2d::new("!"), TextColor(BLUE.into())));
 /// });
 /// ```
 #[derive(Component, Clone, Debug, Default, Deref, DerefMut, Reflect)]
 #[reflect(Component, Default, Debug, Clone)]
 #[require(
     TextLayout,
-    TextFont,
-    TextColor,
     TextBounds,
     Anchor,
     Visibility,
     VisibilityClass,
+    ComputedTextStyle,
     Transform
 )]
 #[component(on_add = visibility::add_visibility_class::<Sprite>)]
@@ -99,35 +96,6 @@ impl Text2d {
     }
 }
 
-impl TextRoot for Text2d {}
-
-impl TextSpanAccess for Text2d {
-    fn read_span(&self) -> &str {
-        self.as_str()
-    }
-    fn write_span(&mut self) -> &mut String {
-        &mut *self
-    }
-}
-
-impl From<&str> for Text2d {
-    fn from(value: &str) -> Self {
-        Self(String::from(value))
-    }
-}
-
-impl From<String> for Text2d {
-    fn from(value: String) -> Self {
-        Self(value)
-    }
-}
-
-/// 2d alias for [`TextReader`].
-pub type Text2dReader<'w, 's> = TextReader<'w, 's, Text2d>;
-
-/// 2d alias for [`TextWriter`].
-pub type Text2dWriter<'w, 's> = TextWriter<'w, 's, Text2d>;
-
 /// Adds a shadow behind `Text2d` text
 ///
 /// Use `TextShadow` for text drawn with `bevy_ui`
@@ -158,7 +126,7 @@ impl Default for Text2dShadow {
 /// [`ResMut<Assets<Image>>`](Assets<Image>) -- This system only adds new [`Image`] assets.
 /// It does not modify or observe existing ones.
 pub fn update_text2d_layout(
-    mut target_scale_factors: Local<Vec<(f32, RenderLayers)>>,
+    mut target_scale_factors: Local<Vec<(f32, RenderLayers, Vec2)>>,
     // Text items which should be reprocessed again, generally when the font hasn't loaded yet.
     mut queue: Local<EntityHashSet>,
     mut textures: ResMut<Assets<Image>>,
@@ -167,17 +135,19 @@ pub fn update_text2d_layout(
     mut texture_atlases: ResMut<Assets<TextureAtlasLayout>>,
     mut font_atlas_sets: ResMut<FontAtlasSets>,
     mut text_pipeline: ResMut<TextPipeline>,
-    mut text_query: Query<(
+    mut text_query: Query<(&Text2d, &ComputedTextStyle, &mut ComputedFontSize)>,
+    mut text_root_query: Query<(
         Entity,
         Option<&RenderLayers>,
         Ref<TextLayout>,
         Ref<TextBounds>,
         &mut TextLayoutInfo,
         &mut ComputedTextBlock,
+        Ref<TextRoot>,
     )>,
-    mut text_reader: Text2dReader,
     mut font_system: ResMut<CosmicFontSystem>,
     mut swash_cache: ResMut<SwashCache>,
+    default_text_style: Res<DefaultTextStyle>,
 ) {
     target_scale_factors.clear();
     target_scale_factors.extend(
@@ -188,37 +158,45 @@ pub fn update_text2d_layout(
             })
             .filter_map(|(camera, _, maybe_camera_mask)| {
                 camera.target_scaling_factor().map(|scale_factor| {
-                    (scale_factor, maybe_camera_mask.cloned().unwrap_or_default())
+                    (
+                        scale_factor,
+                        maybe_camera_mask.cloned().unwrap_or_default(),
+                        camera.logical_viewport_size().unwrap_or_default(),
+                    )
                 })
             }),
     );
 
     let mut previous_scale_factor = 0.;
+    let mut previous_viewport_size = Vec2::ZERO;
     let mut previous_mask = &RenderLayers::none();
 
-    for (entity, maybe_entity_mask, block, bounds, text_layout_info, mut computed) in
-        &mut text_query
+    for (entity, maybe_entity_mask, block, bounds, text_layout_info, mut computed, text_root) in
+        &mut text_root_query
     {
         let entity_mask = maybe_entity_mask.unwrap_or_default();
 
-        let scale_factor = if entity_mask == previous_mask && 0. < previous_scale_factor {
-            previous_scale_factor
-        } else {
-            // `Text2d` only supports generating a single text layout per Text2d entity. If a `Text2d` entity has multiple
-            // render targets with different scale factors, then we use the maximum of the scale factors.
-            let Some((scale_factor, mask)) = target_scale_factors
-                .iter()
-                .filter(|(_, camera_mask)| camera_mask.intersects(entity_mask))
-                .max_by_key(|(scale_factor, _)| FloatOrd(*scale_factor))
-            else {
-                continue;
+        let (scale_factor, viewport_size) =
+            if entity_mask == previous_mask && 0. < previous_scale_factor {
+                (previous_scale_factor, previous_viewport_size)
+            } else {
+                // `Text2d` only supports generating a single text layout per Text2d entity. If a `Text2d` entity has multiple
+                // render targets with different scale factors, then we use the maximum of the scale factors.
+                let Some((scale_factor, mask, viewport_size)) = target_scale_factors
+                    .iter()
+                    .filter(|(_, camera_mask, _)| camera_mask.intersects(entity_mask))
+                    .max_by_key(|(scale_factor, _, _)| FloatOrd(*scale_factor))
+                else {
+                    continue;
+                };
+                previous_scale_factor = *scale_factor;
+                previous_viewport_size = *viewport_size;
+                previous_mask = mask;
+                (*scale_factor, *viewport_size)
             };
-            previous_scale_factor = *scale_factor;
-            previous_mask = mask;
-            *scale_factor
-        };
 
         if scale_factor != text_layout_info.scale_factor
+            || text_root.is_changed()
             || computed.needs_rerender()
             || bounds.is_changed()
             || (!queue.is_empty() && queue.remove(&entity))
@@ -232,11 +210,27 @@ pub fn update_text2d_layout(
                 height: bounds.height.map(|height| height * scale_factor),
             };
 
+            let default_font_size = default_text_style.font_size.eval(viewport_size, 20.);
+
+            for &entity in text_root.0.iter() {
+                if let Ok((_, style, mut computed_size)) = text_query.get_mut(entity) {
+                    computed_size.0 =
+                        style.font_size().eval(viewport_size, default_font_size) * scale_factor;
+                }
+            }
+
+            let spans = text_root.0.iter().cloned().filter_map(|entity| {
+                text_query
+                    .get(entity)
+                    .map(|(text, style, _)| (entity, 0, text.0.as_str(), style))
+                    .ok()
+            });
+
             let text_layout_info = text_layout_info.into_inner();
             match text_pipeline.queue_text(
                 text_layout_info,
                 &fonts,
-                text_reader.iter(entity),
+                spans,
                 scale_factor as f64,
                 &block,
                 text_bounds,
@@ -246,6 +240,8 @@ pub fn update_text2d_layout(
                 computed.as_mut(),
                 &mut font_system,
                 &mut swash_cache,
+                viewport_size,
+                default_font_size,
             ) {
                 Err(TextError::NoSuchFont) => {
                     // There was an error processing the text layout, let's add this entity to the
@@ -278,7 +274,11 @@ pub fn calculate_bounds_text2d(
             &TextBounds,
             Option<&mut Aabb>,
         ),
-        (Changed<TextLayoutInfo>, Without<NoFrustumCulling>),
+        (
+            Changed<TextLayoutInfo>,
+            Without<NoFrustumCulling>,
+            With<TextRoot>,
+        ),
     >,
 ) {
     for (entity, layout_info, anchor, text_bounds, aabb) in &mut text_to_update_aabb {
@@ -309,7 +309,8 @@ mod tests {
     use bevy_camera::{ComputedCameraValues, RenderTargetInfo};
     use bevy_ecs::schedule::IntoScheduleConfigs;
     use bevy_math::UVec2;
-    use bevy_text::{detect_text_needs_rerender, TextIterScratch};
+    use bevy_text::*;
+    use bevy_text::{update_computed_text_styles, DefaultTextStyle};
 
     use super::*;
 
@@ -325,11 +326,27 @@ mod tests {
             .init_resource::<TextPipeline>()
             .init_resource::<CosmicFontSystem>()
             .init_resource::<SwashCache>()
-            .init_resource::<TextIterScratch>()
+            .init_resource::<DefaultTextStyle>()
             .add_systems(
                 Update,
                 (
-                    detect_text_needs_rerender::<Text2d>,
+                    update_from_inherited_text_style_sources::<FontFace>,
+                    update_reparented_inherited_styles::<FontFace>,
+                    propagate_inherited_styles::<FontFace>,
+                    update_from_inherited_text_style_sources::<TextColor>,
+                    update_reparented_inherited_styles::<TextColor>,
+                    propagate_inherited_styles::<TextColor>,
+                    update_from_inherited_text_style_sources::<FontSize>,
+                    update_reparented_inherited_styles::<FontSize>,
+                    propagate_inherited_styles::<FontSize>,
+                    update_from_inherited_text_style_sources::<LineHeight>,
+                    update_reparented_inherited_styles::<LineHeight>,
+                    propagate_inherited_styles::<LineHeight>,
+                    update_from_inherited_text_style_sources::<FontSmoothing>,
+                    update_reparented_inherited_styles::<FontSmoothing>,
+                    propagate_inherited_styles::<FontSmoothing>,
+                    update_computed_text_styles,
+                    update_text_roots::<Text2d>,
                     update_text2d_layout,
                     calculate_bounds_text2d,
                 )
diff --git a/crates/bevy_sprite_render/src/text2d/mod.rs b/crates/bevy_sprite_render/src/text2d/mod.rs
index 5dbd603ed21df..0196e05fefa0c 100644
--- a/crates/bevy_sprite_render/src/text2d/mod.rs
+++ b/crates/bevy_sprite_render/src/text2d/mod.rs
@@ -6,6 +6,7 @@ use bevy_camera::visibility::ViewVisibility;
 use bevy_color::LinearRgba;
 use bevy_ecs::{
     entity::Entity,
+    query::With,
     system::{Commands, Query, Res, ResMut},
 };
 use bevy_image::prelude::*;
@@ -14,7 +15,8 @@ use bevy_render::sync_world::TemporaryRenderEntity;
 use bevy_render::Extract;
 use bevy_sprite::{Anchor, Text2dShadow};
 use bevy_text::{
-    ComputedTextBlock, PositionedGlyph, TextBackgroundColor, TextBounds, TextColor, TextLayoutInfo,
+    ComputedTextBlock, ComputedTextStyle, PositionedGlyph, TextBackgroundColor, TextBounds,
+    TextLayoutInfo, TextRoot,
 };
 use bevy_transform::prelude::GlobalTransform;
 
@@ -26,18 +28,21 @@ pub fn extract_text2d_sprite(
     mut extracted_slices: ResMut<ExtractedSlices>,
     texture_atlases: Extract<Res<Assets<TextureAtlasLayout>>>,
     text2d_query: Extract<
-        Query<(
-            Entity,
-            &ViewVisibility,
-            &ComputedTextBlock,
-            &TextLayoutInfo,
-            &TextBounds,
-            &Anchor,
-            Option<&Text2dShadow>,
-            &GlobalTransform,
-        )>,
+        Query<
+            (
+                Entity,
+                &ViewVisibility,
+                &ComputedTextBlock,
+                &TextLayoutInfo,
+                &TextBounds,
+                &Anchor,
+                Option<&Text2dShadow>,
+                &GlobalTransform,
+            ),
+            With<TextRoot>,
+        >,
     >,
-    text_colors: Extract<Query<&TextColor>>,
+    text_colors: Extract<Query<&ComputedTextStyle>>,
     text_background_colors_query: Extract<Query<&TextBackgroundColor>>,
 ) {
     let mut start = extracted_slices.slices.len();
@@ -170,7 +175,7 @@ pub fn extract_text2d_sprite(
                             .map(|t| t.entity)
                             .unwrap_or(Entity::PLACEHOLDER),
                     )
-                    .map(|text_color| LinearRgba::from(text_color.0))
+                    .map(|style| LinearRgba::from(style.color()))
                     .unwrap_or_default();
                 current_span = *span_index;
             }
diff --git a/crates/bevy_text/src/font_atlas_set.rs b/crates/bevy_text/src/font_atlas_set.rs
index b1d70ea7e66f3..030f8fbd3fc7c 100644
--- a/crates/bevy_text/src/font_atlas_set.rs
+++ b/crates/bevy_text/src/font_atlas_set.rs
@@ -1,12 +1,19 @@
 use bevy_asset::{AssetEvent, AssetId, Assets, RenderAssetUsages};
-use bevy_ecs::{message::MessageReader, resource::Resource, system::ResMut};
+use bevy_ecs::{
+    message::MessageReader,
+    resource::Resource,
+    system::{Local, Query, ResMut},
+};
 use bevy_image::prelude::*;
 use bevy_math::{IVec2, UVec2};
-use bevy_platform::collections::HashMap;
+use bevy_platform::collections::{HashMap, HashSet};
 use bevy_reflect::TypePath;
 use wgpu_types::{Extent3d, TextureDimension, TextureFormat};
 
-use crate::{error::TextError, Font, FontAtlas, FontSmoothing, GlyphAtlasInfo};
+use crate::{
+    error::TextError, ComputedFontSize, ComputedTextStyle, Font, FontAtlas, FontSmoothing,
+    GlyphAtlasInfo,
+};
 
 /// A map of font faces to their corresponding [`FontAtlasSet`]s.
 #[derive(Debug, Default, Resource)]
@@ -21,11 +28,17 @@ impl FontAtlasSets {
         let id: AssetId<Font> = id.into();
         self.sets.get(&id)
     }
+
     /// Get a mutable reference to the [`FontAtlasSet`] with the given font asset id.
     pub fn get_mut(&mut self, id: impl Into<AssetId<Font>>) -> Option<&mut FontAtlasSet> {
         let id: AssetId<Font> = id.into();
         self.sets.get_mut(&id)
     }
+
+    /// Returns the total number of rasterized fonts across all sets.
+    pub fn font_count(&self) -> usize {
+        self.sets.values().map(FontAtlasSet::len).sum()
+    }
 }
 
 /// A system that cleans up [`FontAtlasSet`]s for removed [`Font`]s
@@ -43,7 +56,7 @@ pub fn remove_dropped_font_atlas_sets(
 /// Identifies a font size and smoothing method in a [`FontAtlasSet`].
 ///
 /// Allows an `f32` font size to be used as a key in a `HashMap`, by its binary representation.
-#[derive(Debug, Hash, PartialEq, Eq)]
+#[derive(Debug, Hash, PartialEq, Eq, Copy, Clone)]
 pub struct FontAtlasKey(pub u32, pub FontSmoothing);
 
 /// A map of font sizes to their corresponding [`FontAtlas`]es, for a given font face.
@@ -252,3 +265,59 @@ impl FontAtlasSet {
         ))
     }
 }
+
+/// Maximum number of fonts
+#[derive(Resource)]
+pub struct MaxFonts(usize);
+
+impl Default for MaxFonts {
+    fn default() -> Self {
+        Self(20)
+    }
+}
+
+/// Automatically frees unused fonts when the total number of fonts
+/// is greater than the [`MaxFonts`] value. Doesn't free in use fonts
+/// even if the number of in use fonts is greater than [`MaxFonts`].
+pub fn free_unused_font_atlases(
+    // list of unused fonts in order from least to most recently used
+    mut least_recently_used: Local<Vec<(AssetId<Font>, FontAtlasKey)>>,
+    // fonts that were in use the previous frame
+    mut previous_active_fonts: Local<HashSet<(AssetId<Font>, FontAtlasKey)>>,
+    mut active_fonts: Local<HashSet<(AssetId<Font>, FontAtlasKey)>>,
+    mut font_atlas_sets: ResMut<FontAtlasSets>,
+    max_fonts: ResMut<MaxFonts>,
+    active_font_query: Query<(&ComputedTextStyle, &ComputedFontSize)>,
+) {
+    // collect keys for all fonts currently in use by a text entity
+    active_fonts.extend(active_font_query.iter().map(|(style, font_size)| {
+        (
+            style.font,
+            FontAtlasKey(font_size.0.to_bits(), style.font_smoothing),
+        )
+    }));
+
+    // remove any keys for fonts in use from the least recently used list
+    least_recently_used.retain(|font| !active_fonts.contains(font));
+
+    // push keys for any fonts no longer in use onto the least recently used list
+    least_recently_used.extend(
+        previous_active_fonts
+            .difference(&active_fonts)
+            .into_iter()
+            .cloned(),
+    );
+
+    // If the total number of fonts is greater than max_fonts, free fonts from the least rcently used list
+    // until the total is lower than max_fonts or the least recently used list is empty.
+    for (font, key) in
+        least_recently_used.drain(..font_atlas_sets.font_count().saturating_sub(max_fonts.0))
+    {
+        if let Some(font_atlas_set) = font_atlas_sets.get_mut(font) {
+            font_atlas_set.font_atlases.remove(&key);
+        }
+    }
+
+    previous_active_fonts.clear();
+    core::mem::swap(&mut *previous_active_fonts, &mut *active_fonts);
+}
diff --git a/crates/bevy_text/src/lib.rs b/crates/bevy_text/src/lib.rs
index 1e341880e5336..54e7d1bdf7f09 100644
--- a/crates/bevy_text/src/lib.rs
+++ b/crates/bevy_text/src/lib.rs
@@ -39,8 +39,8 @@ mod font_atlas_set;
 mod font_loader;
 mod glyph;
 mod pipeline;
+mod style;
 mod text;
-mod text_access;
 
 pub use bounds::*;
 pub use error::*;
@@ -50,8 +50,8 @@ pub use font_atlas_set::*;
 pub use font_loader::*;
 pub use glyph::*;
 pub use pipeline::*;
+pub use style::*;
 pub use text::*;
-pub use text_access::*;
 
 /// The text prelude.
 ///
@@ -59,7 +59,8 @@ pub use text_access::*;
 pub mod prelude {
     #[doc(hidden)]
     pub use crate::{
-        Font, Justify, LineBreak, TextColor, TextError, TextFont, TextLayout, TextSpan,
+        ComputedTextStyle, DefaultTextStyle, Font, FontFace, FontSize, FontSmoothing, Justify,
+        LineBreak, LineHeight, TextColor, TextError, TextLayout, TextStyle,
     };
 }
 
@@ -86,6 +87,10 @@ pub struct Text2dUpdateSystems;
 #[deprecated(since = "0.17.0", note = "Renamed to `Text2dUpdateSystems`.")]
 pub type Update2dText = Text2dUpdateSystems;
 
+/// System set in [`PostUpdate`] where all text styles are updated.
+#[derive(Debug, Hash, PartialEq, Eq, Clone, SystemSet)]
+pub struct ComputedTextStyleUpdateSystems;
+
 impl Plugin for TextPlugin {
     fn build(&self, app: &mut App) {
         app.init_asset::<Font>()
@@ -94,12 +99,36 @@ impl Plugin for TextPlugin {
             .init_resource::<TextPipeline>()
             .init_resource::<CosmicFontSystem>()
             .init_resource::<SwashCache>()
-            .init_resource::<TextIterScratch>()
+            .init_resource::<DefaultTextStyle>()
+            .init_resource::<MaxFonts>()
+            .add_systems(
+                PostUpdate,
+                (
+                    update_from_inherited_text_style_sources::<FontFace>,
+                    update_reparented_inherited_styles::<FontFace>,
+                    propagate_inherited_styles::<FontFace>,
+                    update_from_inherited_text_style_sources::<TextColor>,
+                    update_reparented_inherited_styles::<TextColor>,
+                    propagate_inherited_styles::<TextColor>,
+                    update_from_inherited_text_style_sources::<FontSize>,
+                    update_reparented_inherited_styles::<FontSize>,
+                    propagate_inherited_styles::<FontSize>,
+                    update_from_inherited_text_style_sources::<LineHeight>,
+                    update_reparented_inherited_styles::<LineHeight>,
+                    propagate_inherited_styles::<LineHeight>,
+                    update_from_inherited_text_style_sources::<FontSmoothing>,
+                    update_reparented_inherited_styles::<FontSmoothing>,
+                    propagate_inherited_styles::<FontSmoothing>,
+                    update_computed_text_styles,
+                )
+                    .chain()
+                    .in_set(ComputedTextStyleUpdateSystems),
+            )
             .add_systems(
                 PostUpdate,
-                remove_dropped_font_atlas_sets.before(AssetEventSystems),
+                (remove_dropped_font_atlas_sets.before(AssetEventSystems),),
             )
-            .add_systems(Last, trim_cosmic_cache);
+            .add_systems(Last, (trim_cosmic_cache, free_unused_font_atlases));
 
         #[cfg(feature = "default_font")]
         {
diff --git a/crates/bevy_text/src/pipeline.rs b/crates/bevy_text/src/pipeline.rs
index 03939d47d16f0..56cbfd7e770a6 100644
--- a/crates/bevy_text/src/pipeline.rs
+++ b/crates/bevy_text/src/pipeline.rs
@@ -1,7 +1,6 @@
 use alloc::sync::Arc;
 
 use bevy_asset::{AssetId, Assets};
-use bevy_color::Color;
 use bevy_derive::{Deref, DerefMut};
 use bevy_ecs::{
     component::Component, entity::Entity, reflect::ReflectComponent, resource::Resource,
@@ -16,8 +15,8 @@ use bevy_reflect::{std_traits::ReflectDefault, Reflect};
 use cosmic_text::{Attrs, Buffer, Family, Metrics, Shaping, Wrap};
 
 use crate::{
-    error::TextError, ComputedTextBlock, Font, FontAtlasSets, FontSmoothing, Justify, LineBreak,
-    PositionedGlyph, TextBounds, TextEntity, TextFont, TextLayout,
+    error::TextError, style::ComputedTextStyle, ComputedTextBlock, Font, FontAtlasSets, FontFace,
+    FontSmoothing, Justify, LineBreak, PositionedGlyph, TextBounds, TextEntity, TextLayout,
 };
 
 /// A wrapper resource around a [`cosmic_text::FontSystem`]
@@ -74,7 +73,7 @@ pub struct TextPipeline {
     /// Buffered vec for collecting spans.
     ///
     /// See [this dark magic](https://users.rust-lang.org/t/how-to-cache-a-vectors-capacity/94478/10).
-    spans_buffer: Vec<(usize, &'static str, &'static TextFont, FontFaceInfo)>,
+    spans_buffer: Vec<(usize, &'static str, &'static FontFace, FontFaceInfo)>,
     /// Buffered vec for collecting info for glyph assembly.
     glyph_info: Vec<(AssetId<Font>, FontSmoothing)>,
 }
@@ -86,13 +85,15 @@ impl TextPipeline {
     pub fn update_buffer<'a>(
         &mut self,
         fonts: &Assets<Font>,
-        text_spans: impl Iterator<Item = (Entity, usize, &'a str, &'a TextFont, Color)>,
+        text_spans: impl Iterator<Item = (Entity, usize, &'a str, &'a ComputedTextStyle)>,
         linebreak: LineBreak,
         justify: Justify,
         bounds: TextBounds,
         scale_factor: f64,
         computed: &mut ComputedTextBlock,
         font_system: &mut CosmicFontSystem,
+        viewport_size: Vec2,
+        default_font_size: f32,
     ) -> Result<(), TextError> {
         let font_system = &mut font_system.0;
 
@@ -100,15 +101,15 @@ impl TextPipeline {
         // to FontSystem, which the cosmic-text Buffer also needs.
         let mut max_font_size: f32 = 0.;
         let mut max_line_height: f32 = 0.0;
-        let mut spans: Vec<(usize, &str, &TextFont, FontFaceInfo, Color)> =
+        let mut spans: Vec<(usize, &str, &ComputedTextStyle, FontFaceInfo, f32)> =
             core::mem::take(&mut self.spans_buffer)
                 .into_iter()
-                .map(|_| -> (usize, &str, &TextFont, FontFaceInfo, Color) { unreachable!() })
+                .map(|_| -> (usize, &str, &ComputedTextStyle, FontFaceInfo, f32) { unreachable!() })
                 .collect();
 
         computed.entities.clear();
 
-        for (span_index, (entity, depth, span, text_font, color)) in text_spans.enumerate() {
+        for (span_index, (entity, depth, span, style)) in text_spans.enumerate() {
             // Save this span entity in the computed text block.
             computed.entities.push(TextEntity { entity, depth });
 
@@ -116,12 +117,12 @@ impl TextPipeline {
                 continue;
             }
             // Return early if a font is not loaded yet.
-            if !fonts.contains(text_font.font.id()) {
+            if !fonts.contains(style.font) {
                 spans.clear();
                 self.spans_buffer = spans
                     .into_iter()
                     .map(
-                        |_| -> (usize, &'static str, &'static TextFont, FontFaceInfo) {
+                        |_| -> (usize, &'static str, &'static FontFace, FontFaceInfo) {
                             unreachable!()
                         },
                     )
@@ -129,28 +130,25 @@ impl TextPipeline {
 
                 return Err(TextError::NoSuchFont);
             }
+            let font_size = style.font_size.eval(viewport_size, default_font_size);
 
             // Get max font size for use in cosmic Metrics.
-            max_font_size = max_font_size.max(text_font.font_size);
-            max_line_height = max_line_height.max(text_font.line_height.eval(text_font.font_size));
+            max_font_size = max_font_size.max(font_size);
+            max_line_height = max_line_height.max((style.line_height).eval(font_size));
 
             // Load Bevy fonts into cosmic-text's font system.
-            let face_info = load_font_to_fontdb(
-                text_font,
-                font_system,
-                &mut self.map_handle_to_font_id,
-                fonts,
-            );
+            let face_info =
+                load_font_to_fontdb(&style, font_system, &mut self.map_handle_to_font_id, fonts);
 
             // Save spans that aren't zero-sized.
-            if scale_factor <= 0.0 || text_font.font_size <= 0.0 {
+            if scale_factor <= 0.0 || font_size <= 0.0 {
                 once!(warn!(
                     "Text span {entity} has a font size <= 0.0. Nothing will be displayed.",
                 ));
 
                 continue;
             }
-            spans.push((span_index, span, text_font, face_info, color));
+            spans.push((span_index, span, style, face_info, font_size));
         }
 
         let mut metrics = Metrics::new(max_font_size, max_line_height).scale(scale_factor as f32);
@@ -168,10 +166,10 @@ impl TextPipeline {
         // in cosmic-text.
         let spans_iter = spans
             .iter()
-            .map(|(span_index, span, text_font, font_info, color)| {
+            .map(|(span_index, span, style, font_info, font_size)| {
                 (
                     *span,
-                    get_attrs(*span_index, text_font, *color, font_info, scale_factor),
+                    get_attrs(*span_index, style, font_info, *font_size, scale_factor),
                 )
             });
 
@@ -211,7 +209,7 @@ impl TextPipeline {
         spans.clear();
         self.spans_buffer = spans
             .into_iter()
-            .map(|_| -> (usize, &'static str, &'static TextFont, FontFaceInfo) { unreachable!() })
+            .map(|_| -> (usize, &'static str, &'static FontFace, FontFaceInfo) { unreachable!() })
             .collect();
 
         Ok(())
@@ -225,7 +223,7 @@ impl TextPipeline {
         &mut self,
         layout_info: &mut TextLayoutInfo,
         fonts: &Assets<Font>,
-        text_spans: impl Iterator<Item = (Entity, usize, &'a str, &'a TextFont, Color)>,
+        text_spans: impl Iterator<Item = (Entity, usize, &'a str, &'a ComputedTextStyle)>,
         scale_factor: f64,
         layout: &TextLayout,
         bounds: TextBounds,
@@ -235,6 +233,8 @@ impl TextPipeline {
         computed: &mut ComputedTextBlock,
         font_system: &mut CosmicFontSystem,
         swash_cache: &mut SwashCache,
+        viewport_size: Vec2,
+        default_font_size: f32,
     ) -> Result<(), TextError> {
         layout_info.glyphs.clear();
         layout_info.section_rects.clear();
@@ -246,8 +246,8 @@ impl TextPipeline {
         // Extract font ids from the iterator while traversing it.
         let mut glyph_info = core::mem::take(&mut self.glyph_info);
         glyph_info.clear();
-        let text_spans = text_spans.inspect(|(_, _, _, text_font, _)| {
-            glyph_info.push((text_font.font.id(), text_font.font_smoothing));
+        let text_spans = text_spans.inspect(|(_, _, _, text_style)| {
+            glyph_info.push((text_style.font, text_style.font_smoothing));
         });
 
         let update_result = self.update_buffer(
@@ -259,6 +259,8 @@ impl TextPipeline {
             scale_factor,
             computed,
             font_system,
+            viewport_size,
+            default_font_size,
         );
         if let Err(err) = update_result {
             self.glyph_info = glyph_info;
@@ -394,11 +396,13 @@ impl TextPipeline {
         &mut self,
         entity: Entity,
         fonts: &Assets<Font>,
-        text_spans: impl Iterator<Item = (Entity, usize, &'a str, &'a TextFont, Color)>,
+        text_spans: impl Iterator<Item = (Entity, usize, &'a str, &'a ComputedTextStyle)>,
         scale_factor: f64,
         layout: &TextLayout,
         computed: &mut ComputedTextBlock,
         font_system: &mut CosmicFontSystem,
+        viewport_size: Vec2,
+        default_font_size: f32,
     ) -> Result<TextMeasureInfo, TextError> {
         const MIN_WIDTH_CONTENT_BOUNDS: TextBounds = TextBounds::new_horizontal(0.0);
 
@@ -415,6 +419,8 @@ impl TextPipeline {
             scale_factor,
             computed,
             font_system,
+            viewport_size,
+            default_font_size,
         )?;
 
         let buffer = &mut computed.buffer;
@@ -492,30 +498,27 @@ impl TextMeasureInfo {
 
 /// Add the font to the cosmic text's `FontSystem`'s in-memory font database
 pub fn load_font_to_fontdb(
-    text_font: &TextFont,
+    style: &ComputedTextStyle,
     font_system: &mut cosmic_text::FontSystem,
     map_handle_to_font_id: &mut HashMap<AssetId<Font>, (cosmic_text::fontdb::ID, Arc<str>)>,
     fonts: &Assets<Font>,
 ) -> FontFaceInfo {
-    let font_handle = text_font.font.clone();
-    let (face_id, family_name) = map_handle_to_font_id
-        .entry(font_handle.id())
-        .or_insert_with(|| {
-            let font = fonts.get(font_handle.id()).expect(
-                "Tried getting a font that was not available, probably due to not being loaded yet",
-            );
-            let data = Arc::clone(&font.data);
-            let ids = font_system
-                .db_mut()
-                .load_font_source(cosmic_text::fontdb::Source::Binary(data));
-
-            // TODO: it is assumed this is the right font face
-            let face_id = *ids.last().unwrap();
-            let face = font_system.db().face(face_id).unwrap();
-            let family_name = Arc::from(face.families[0].0.as_str());
-
-            (face_id, family_name)
-        });
+    let (face_id, family_name) = map_handle_to_font_id.entry(style.font).or_insert_with(|| {
+        let font = fonts.get(style.font).expect(
+            "Tried getting a font that was not available, probably due to not being loaded yet",
+        );
+        let data = Arc::clone(&font.data);
+        let ids = font_system
+            .db_mut()
+            .load_font_source(cosmic_text::fontdb::Source::Binary(data));
+
+        // TODO: it is assumed this is the right font face
+        let face_id = *ids.last().unwrap();
+        let face = font_system.db().face(face_id).unwrap();
+        let family_name = Arc::from(face.families[0].0.as_str());
+
+        (face_id, family_name)
+    });
     let face = font_system.db().face(*face_id).unwrap();
 
     FontFaceInfo {
@@ -526,12 +529,12 @@ pub fn load_font_to_fontdb(
     }
 }
 
-/// Translates [`TextFont`] to [`Attrs`].
+/// Translates [`FontFace`] to [`Attrs`].
 fn get_attrs<'a>(
     span_index: usize,
-    text_font: &TextFont,
-    color: Color,
+    style: &'a ComputedTextStyle,
     face_info: &'a FontFaceInfo,
+    font_size: f32,
     scale_factor: f64,
 ) -> Attrs<'a> {
     Attrs::new()
@@ -542,12 +545,12 @@ fn get_attrs<'a>(
         .weight(face_info.weight)
         .metrics(
             Metrics {
-                font_size: text_font.font_size,
-                line_height: text_font.line_height.eval(text_font.font_size),
+                font_size,
+                line_height: style.line_height.eval(font_size),
             }
             .scale(scale_factor as f32),
         )
-        .color(cosmic_text::Color(color.to_linear().as_u32()))
+        .color(cosmic_text::Color(style.color.to_linear().as_u32()))
 }
 
 /// Calculate the size of the text area for the given buffer.
diff --git a/crates/bevy_text/src/style.rs b/crates/bevy_text/src/style.rs
new file mode 100644
index 0000000000000..25cc883bebbf4
--- /dev/null
+++ b/crates/bevy_text/src/style.rs
@@ -0,0 +1,674 @@
+use crate::*;
+use bevy_asset::AssetId;
+use bevy_asset::Handle;
+use bevy_color::Color;
+use bevy_derive::Deref;
+use bevy_derive::DerefMut;
+use bevy_ecs::component::Component;
+use bevy_ecs::prelude::*;
+use bevy_ecs::relationship::Relationship;
+use bevy_reflect::Reflect;
+
+/// Text style
+#[derive(Clone, PartialEq)]
+pub struct TextStyle {
+    /// The font used by a text entity when neither it nor any ancestor has a [`FontFace`] component.
+    pub font: Handle<Font>,
+    /// Default value
+    pub font_size: FontSize,
+    /// The color used by a text entity when neither it nor any ancestor has a [`TextColor`] component.
+    pub color: Color,
+    /// Default value
+    pub font_smoothing: FontSmoothing,
+    /// Default value
+    pub line_height: LineHeight,
+}
+
+impl TextStyle {
+    /// Returns the text style as a bundle of components
+    pub fn bundle(&self) -> impl Bundle {
+        (
+            FontFace(self.font.clone()),
+            self.font_size,
+            TextColor(self.color),
+            self.font_smoothing,
+            self.line_height,
+        )
+    }
+}
+
+impl Default for TextStyle {
+    fn default() -> Self {
+        Self {
+            font: Default::default(),
+            color: Color::WHITE,
+            font_smoothing: FontSmoothing::default(),
+            line_height: LineHeight::default(),
+            font_size: FontSize::default(),
+        }
+    }
+}
+
+/// Fallback text style used if a text entity and all its ancestors lack text styling components.
+#[derive(Resource, Default, Clone, Deref, DerefMut)]
+pub struct DefaultTextStyle(pub TextStyle);
+
+/// Wrapper used to differentiate propagated text style compoonents
+#[derive(Debug, Component, Clone, PartialEq, Reflect)]
+#[reflect(Component, Clone, PartialEq)]
+pub struct InheritedTextStyle<S: Clone + PartialEq>(pub S);
+
+/// The component contains a text style that will be propagated to its descendants
+pub trait InheritableTextStyle: Component {
+    /// Type of the propagated value
+    type Inherited: Clone + PartialEq + Send + Sync + 'static;
+
+    /// Returns a wrapper for the propagated value
+    fn to_inherited(&self) -> InheritedTextStyle<Self::Inherited>;
+}
+
+/// The resolved text style for a text entity.
+///
+/// Updated by [`update_computed_text_styles`]
+#[derive(Component, PartialEq, Debug, Default)]
+#[require(ComputedFontSize)]
+pub struct ComputedTextStyle {
+    /// The resolved font, taken from the nearest ancestor (including self) with a [`FontFace`],
+    /// or from [`DefaultTextStyle`] if none is found.
+    pub(crate) font: AssetId<Font>,
+    /// The vertical height of rasterized glyphs in the font atlas in pixels.
+    pub(crate) font_size: FontSize,
+    /// The antialiasing method to use when rendering text.
+    pub(crate) font_smoothing: FontSmoothing,
+    /// The vertical height of a line of text, from the top of one line to the top of the
+    /// next.
+    pub(crate) line_height: LineHeight,
+    /// The resolved text color, taken from the nearest ancestor (including self) with a [`TextColor`],
+    /// or from [`DefaultTextStyle`] if none is found.
+    pub(crate) color: Color,
+}
+
+impl ComputedTextStyle {
+    /// The resolved font, taken from the nearest ancestor (including self) with a [`FontFace`],
+    /// or from [`DefaultTextStyle`] if none is found.
+    pub const fn font(&self) -> &AssetId<Font> {
+        &self.font
+    }
+
+    /// The resolved text color, taken from the nearest ancestor (including self) with a [`TextColor`],
+    /// or from [`DefaultTextStyle`] if none is found.
+    pub const fn color(&self) -> Color {
+        self.color
+    }
+
+    /// The vertical height of a line of text, from the top of one line to the top of the
+    /// next.
+    pub const fn line_height(&self) -> LineHeight {
+        self.line_height
+    }
+
+    /// The vertical height of rasterized glyphs in the font atlas in pixels.
+    pub const fn font_size(&self) -> FontSize {
+        self.font_size
+    }
+
+    /// The antialiasing method to use when rendering text.
+    pub const fn font_smoothing(&self) -> FontSmoothing {
+        self.font_smoothing
+    }
+}
+
+/// update text style sources
+pub fn update_from_inherited_text_style_sources<S: InheritableTextStyle>(
+    mut commands: Commands,
+    changed_query: Query<(Entity, &S), Or<(Changed<S>, Without<InheritedTextStyle<S::Inherited>>)>>,
+    mut removed_styles: RemovedComponents<S>,
+) {
+    for (entity, source) in &changed_query {
+        commands.entity(entity).try_insert(source.to_inherited());
+    }
+
+    for removed_style in removed_styles.read() {
+        if let Ok(mut commands) = commands.get_entity(removed_style) {
+            commands.remove::<(InheritedTextStyle<S::Inherited>, S)>();
+        }
+    }
+}
+
+/// update reparented and orphaned styles
+pub fn update_reparented_inherited_styles<S: InheritableTextStyle>(
+    mut commands: Commands,
+    moved: Query<
+        (Entity, &ChildOf, Option<&InheritedTextStyle<S::Inherited>>),
+        (Changed<ChildOf>, Without<S>),
+    >,
+    parents: Query<&InheritedTextStyle<S::Inherited>>,
+    orphaned: Query<
+        Entity,
+        (
+            With<InheritedTextStyle<S::Inherited>>,
+            Without<S>,
+            Without<ChildOf>,
+        ),
+    >,
+) {
+    for (entity, parent, maybe_inherited) in &moved {
+        if let Ok(inherited) = parents.get(parent.get()) {
+            commands.entity(entity).try_insert(inherited.clone());
+        } else if maybe_inherited.is_some() {
+            commands
+                .entity(entity)
+                .remove::<InheritedTextStyle<S::Inherited>>();
+        }
+    }
+
+    for orphan in &orphaned {
+        commands
+            .entity(orphan)
+            .remove::<InheritedTextStyle<S::Inherited>>();
+    }
+}
+
+/// propagate inherited styles
+pub fn propagate_inherited_styles<S: InheritableTextStyle>(
+    mut commands: Commands,
+    changed: Query<
+        (&InheritedTextStyle<S::Inherited>, &Children),
+        Changed<InheritedTextStyle<S::Inherited>>,
+    >,
+    recurse: Query<(Option<&Children>, Option<&InheritedTextStyle<S::Inherited>>), Without<S>>,
+    mut removed: RemovedComponents<InheritedTextStyle<S::Inherited>>,
+    mut to_process: Local<Vec<(Entity, Option<InheritedTextStyle<S::Inherited>>)>>,
+) {
+    // gather changed
+    for (inherited, targets) in &changed {
+        to_process.extend(
+            targets
+                .iter()
+                .map(|target| (target, Some(inherited.clone()))),
+        );
+    }
+
+    // and removed
+    for entity in removed.read() {
+        if let Ok((Some(targets), _)) = recurse.get(entity) {
+            to_process.extend(targets.iter().map(|target| (target, None)));
+        }
+    }
+
+    // propagate
+    while let Some((entity, maybe_inherited)) = (*to_process).pop() {
+        let Ok((maybe_targets, maybe_current)) = recurse.get(entity) else {
+            continue;
+        };
+
+        if maybe_current == maybe_inherited.as_ref() {
+            continue;
+        }
+
+        if let Some(targets) = maybe_targets {
+            to_process.extend(
+                targets
+                    .iter()
+                    .map(|target| (target, maybe_inherited.clone())),
+            );
+        }
+
+        if let Some(inherited) = maybe_inherited {
+            commands.entity(entity).try_insert(inherited.clone());
+        } else {
+            commands
+                .entity(entity)
+                .remove::<InheritedTextStyle<S::Inherited>>();
+        }
+    }
+}
+
+fn update_computed_text_style(
+    default_text_style: &DefaultTextStyle,
+    mut style: Mut<ComputedTextStyle>,
+    maybe_font: Option<&InheritedTextStyle<AssetId<Font>>>,
+    maybe_color: Option<&InheritedTextStyle<TextColor>>,
+    maybe_size: Option<&InheritedTextStyle<FontSize>>,
+    maybe_line_height: Option<&InheritedTextStyle<LineHeight>>,
+    maybe_smoothing: Option<&InheritedTextStyle<FontSmoothing>>,
+) {
+    let new_style = ComputedTextStyle {
+        font: maybe_font.map_or(default_text_style.font.id(), |font| font.0),
+        color: maybe_color
+            .map(|t| t.0 .0)
+            .unwrap_or(default_text_style.color),
+        font_size: maybe_size.map_or(default_text_style.font_size, |size| size.0),
+        font_smoothing: maybe_smoothing
+            .map(|s| s.0)
+            .unwrap_or(default_text_style.font_smoothing),
+        line_height: maybe_line_height
+            .map(|l| l.0)
+            .unwrap_or(default_text_style.line_height),
+    };
+
+    if new_style.font != style.font
+        || new_style.font_size != style.font_size
+        || new_style.font_smoothing != style.font_smoothing
+        || new_style.line_height != style.line_height
+    {
+        *style = new_style;
+    } else {
+        // bypass change detection, we don't need to update the layout if only the text color has changed
+        style.bypass_change_detection().color = new_style.color;
+    }
+}
+
+/// update computed styles
+pub fn update_computed_text_styles(
+    default_text_style: Res<DefaultTextStyle>,
+    mut param_sets: ParamSet<(
+        Query<(
+            &mut ComputedTextStyle,
+            Option<&InheritedTextStyle<AssetId<Font>>>,
+            Option<&InheritedTextStyle<TextColor>>,
+            Option<&InheritedTextStyle<FontSize>>,
+            Option<&InheritedTextStyle<LineHeight>>,
+            Option<&InheritedTextStyle<FontSmoothing>>,
+        )>,
+        Query<
+            (
+                &mut ComputedTextStyle,
+                Option<&InheritedTextStyle<AssetId<Font>>>,
+                Option<&InheritedTextStyle<TextColor>>,
+                Option<&InheritedTextStyle<FontSize>>,
+                Option<&InheritedTextStyle<LineHeight>>,
+                Option<&InheritedTextStyle<FontSmoothing>>,
+            ),
+            Or<(
+                Changed<InheritedTextStyle<AssetId<Font>>>,
+                Changed<InheritedTextStyle<TextColor>>,
+                Changed<InheritedTextStyle<FontSize>>,
+                Changed<InheritedTextStyle<LineHeight>>,
+                Changed<InheritedTextStyle<FontSmoothing>>,
+                Added<ComputedTextStyle>,
+            )>,
+        >,
+    )>,
+) {
+    if default_text_style.is_changed() {
+        for (style, maybe_font, maybe_color, maybe_size, maybe_line_height, maybe_smoothing) in
+            param_sets.p0().iter_mut()
+        {
+            update_computed_text_style(
+                default_text_style.as_ref(),
+                style,
+                maybe_font,
+                maybe_color,
+                maybe_size,
+                maybe_line_height,
+                maybe_smoothing,
+            );
+        }
+    } else {
+        for (style, maybe_font, maybe_color, maybe_size, maybe_line_height, maybe_smoothing) in
+            param_sets.p1().iter_mut()
+        {
+            update_computed_text_style(
+                default_text_style.as_ref(),
+                style,
+                maybe_font,
+                maybe_color,
+                maybe_size,
+                maybe_line_height,
+                maybe_smoothing,
+            );
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use bevy_app::prelude::*;
+
+    #[test]
+    fn test_text_style_propagates_to_children() {
+        let mut app = App::new();
+        app.add_schedule(Schedule::new(Update));
+        app.init_resource::<DefaultTextStyle>();
+        app.add_systems(
+            Update,
+            (
+                update_from_inherited_text_style_sources::<FontFace>,
+                update_reparented_inherited_styles::<FontFace>,
+                propagate_inherited_styles::<FontFace>,
+                update_from_inherited_text_style_sources::<TextColor>,
+                update_reparented_inherited_styles::<TextColor>,
+                propagate_inherited_styles::<TextColor>,
+                update_from_inherited_text_style_sources::<FontSize>,
+                update_reparented_inherited_styles::<FontSize>,
+                propagate_inherited_styles::<FontSize>,
+                update_from_inherited_text_style_sources::<LineHeight>,
+                update_reparented_inherited_styles::<LineHeight>,
+                propagate_inherited_styles::<LineHeight>,
+                update_from_inherited_text_style_sources::<FontSmoothing>,
+                update_reparented_inherited_styles::<FontSmoothing>,
+                propagate_inherited_styles::<FontSmoothing>,
+                update_computed_text_styles,
+            )
+                .chain(),
+        );
+
+        let font_size = 99.;
+
+        let propagator = app.world_mut().spawn_empty().id();
+
+        let intermediate = app
+            .world_mut()
+            .spawn_empty()
+            .insert(ChildOf(propagator))
+            .id();
+        let propagatee = app
+            .world_mut()
+            .spawn_empty()
+            .insert((ComputedTextStyle::default(), ChildOf(intermediate)))
+            .id();
+
+        app.update();
+
+        let style = app
+            .world_mut()
+            .query::<&ComputedTextStyle>()
+            .get(app.world(), propagatee)
+            .unwrap();
+
+        assert_eq!(style.font_size, DefaultTextStyle::default().font_size);
+
+        app.world_mut()
+            .entity_mut(propagator)
+            .insert(FontSize::Px(font_size));
+
+        app.update();
+
+        let style = app
+            .world_mut()
+            .query::<&ComputedTextStyle>()
+            .get(app.world(), propagatee)
+            .unwrap();
+
+        assert_eq!(style.font_size, FontSize::Px(font_size));
+    }
+
+    #[test]
+    fn test_text_styles_update_when_text_reparented() {
+        let mut app = App::new();
+        app.add_schedule(Schedule::new(Update));
+        app.init_resource::<DefaultTextStyle>();
+        app.add_systems(
+            Update,
+            (
+                update_from_inherited_text_style_sources::<FontFace>,
+                update_reparented_inherited_styles::<FontFace>,
+                propagate_inherited_styles::<FontFace>,
+                update_from_inherited_text_style_sources::<TextColor>,
+                update_reparented_inherited_styles::<TextColor>,
+                propagate_inherited_styles::<TextColor>,
+                update_from_inherited_text_style_sources::<FontSize>,
+                update_reparented_inherited_styles::<FontSize>,
+                propagate_inherited_styles::<FontSize>,
+                update_from_inherited_text_style_sources::<LineHeight>,
+                update_reparented_inherited_styles::<LineHeight>,
+                propagate_inherited_styles::<LineHeight>,
+                update_from_inherited_text_style_sources::<FontSmoothing>,
+                update_reparented_inherited_styles::<FontSmoothing>,
+                propagate_inherited_styles::<FontSmoothing>,
+                update_computed_text_styles,
+            )
+                .chain(),
+        );
+
+        let source_1 = app.world_mut().spawn(FontSize::Px(1.)).id();
+        let source_2 = app.world_mut().spawn(FontSize::Px(2.)).id();
+
+        let target = app.world_mut().spawn(ComputedTextStyle::default()).id();
+
+        app.update();
+
+        assert_eq!(
+            app.world_mut()
+                .query::<&ComputedTextStyle>()
+                .get(app.world(), target)
+                .unwrap()
+                .font_size(),
+            DefaultTextStyle::default().font_size
+        );
+
+        app.world_mut().entity_mut(target).insert(ChildOf(source_1));
+
+        app.update();
+
+        assert_eq!(
+            app.world_mut()
+                .query::<&ComputedTextStyle>()
+                .get(app.world(), target)
+                .unwrap()
+                .font_size(),
+            FontSize::Px(1.)
+        );
+
+        app.world_mut().entity_mut(target).insert(ChildOf(source_2));
+
+        app.update();
+
+        assert_eq!(
+            app.world_mut()
+                .query::<&ComputedTextStyle>()
+                .get(app.world(), target)
+                .unwrap()
+                .font_size(),
+            FontSize::Px(2.)
+        );
+    }
+
+    #[test]
+    fn test_text_styles_update_when_default_text_style_changes() {
+        let mut app = App::new();
+        app.add_schedule(Schedule::new(Update));
+        app.init_resource::<DefaultTextStyle>();
+        app.add_systems(
+            Update,
+            (
+                update_from_inherited_text_style_sources::<FontFace>,
+                update_reparented_inherited_styles::<FontFace>,
+                propagate_inherited_styles::<FontFace>,
+                update_from_inherited_text_style_sources::<TextColor>,
+                update_reparented_inherited_styles::<TextColor>,
+                propagate_inherited_styles::<TextColor>,
+                update_from_inherited_text_style_sources::<FontSize>,
+                update_reparented_inherited_styles::<FontSize>,
+                propagate_inherited_styles::<FontSize>,
+                update_from_inherited_text_style_sources::<LineHeight>,
+                update_reparented_inherited_styles::<LineHeight>,
+                propagate_inherited_styles::<LineHeight>,
+                update_from_inherited_text_style_sources::<FontSmoothing>,
+                update_reparented_inherited_styles::<FontSmoothing>,
+                propagate_inherited_styles::<FontSmoothing>,
+                update_computed_text_styles,
+            )
+                .chain(),
+        );
+
+        let target_1 = app.world_mut().spawn(ComputedTextStyle::default()).id();
+
+        let target_2 = app
+            .world_mut()
+            .spawn((FontSize::Px(2.), ComputedTextStyle::default()))
+            .id();
+
+        let root_3 = app.world_mut().spawn_empty().id();
+
+        let target_3 = app
+            .world_mut()
+            .spawn((ComputedTextStyle::default(), ChildOf(root_3)))
+            .id();
+
+        let root_4 = app.world_mut().spawn(FontSize::Px(4.)).id();
+
+        let target_4 = app
+            .world_mut()
+            .spawn((ComputedTextStyle::default(), ChildOf(root_4)))
+            .id();
+
+        let target_5 = app
+            .world_mut()
+            .spawn((
+                FontSize::Px(5.),
+                ComputedTextStyle::default(),
+                ChildOf(root_4),
+            ))
+            .id();
+
+        app.update();
+
+        let default_default_text_style = DefaultTextStyle::default();
+        for (target, expected_font_size) in [
+            (target_1, default_default_text_style.font_size),
+            (target_2, FontSize::Px(2.)),
+            (target_3, default_default_text_style.font_size),
+            (target_4, FontSize::Px(4.)),
+            (target_5, FontSize::Px(5.)),
+        ] {
+            assert_eq!(
+                *app.world_mut()
+                    .query::<&ComputedTextStyle>()
+                    .get(app.world(), target)
+                    .unwrap(),
+                ComputedTextStyle {
+                    font_size: expected_font_size,
+                    font: default_default_text_style.font.id(),
+                    color: default_default_text_style.color,
+                    font_smoothing: default_default_text_style.font_smoothing,
+                    line_height: default_default_text_style.line_height,
+                }
+            );
+        }
+
+        let mut default_text_style = app.world_mut().resource_mut::<DefaultTextStyle>();
+        default_text_style.font_size = FontSize::Px(17.);
+        default_text_style.line_height = LineHeight::Px(99.);
+
+        app.update();
+
+        let default_default_text_style = DefaultTextStyle::default();
+        for (target, expected_font_size) in [
+            (target_1, FontSize::Px(17.)),
+            (target_2, FontSize::Px(2.)),
+            (target_3, FontSize::Px(17.)),
+            (target_4, FontSize::Px(4.)),
+            (target_5, FontSize::Px(5.)),
+        ] {
+            assert_eq!(
+                *app.world_mut()
+                    .query::<&ComputedTextStyle>()
+                    .get(app.world(), target)
+                    .unwrap(),
+                ComputedTextStyle {
+                    font_size: expected_font_size,
+                    font: default_default_text_style.font.id(),
+                    color: default_default_text_style.color,
+                    font_smoothing: default_default_text_style.font_smoothing,
+                    line_height: LineHeight::Px(99.),
+                }
+            );
+        }
+    }
+
+    #[test]
+    fn test_override_inherited_text_style() {
+        let mut app = App::new();
+        app.add_schedule(Schedule::new(Update));
+        app.init_resource::<DefaultTextStyle>();
+        app.add_systems(
+            Update,
+            (
+                update_from_inherited_text_style_sources::<FontFace>,
+                update_reparented_inherited_styles::<FontFace>,
+                propagate_inherited_styles::<FontFace>,
+                update_from_inherited_text_style_sources::<TextColor>,
+                update_reparented_inherited_styles::<TextColor>,
+                propagate_inherited_styles::<TextColor>,
+                update_from_inherited_text_style_sources::<FontSize>,
+                update_reparented_inherited_styles::<FontSize>,
+                propagate_inherited_styles::<FontSize>,
+                update_from_inherited_text_style_sources::<LineHeight>,
+                update_reparented_inherited_styles::<LineHeight>,
+                propagate_inherited_styles::<LineHeight>,
+                update_from_inherited_text_style_sources::<FontSmoothing>,
+                update_reparented_inherited_styles::<FontSmoothing>,
+                propagate_inherited_styles::<FontSmoothing>,
+                update_computed_text_styles,
+            )
+                .chain(),
+        );
+
+        let root = app.world_mut().spawn(ComputedTextStyle::default()).id();
+
+        let node_1 = app
+            .world_mut()
+            .spawn_empty()
+            .insert((
+                FontSize::Px(1.),
+                ComputedTextStyle::default(),
+                ChildOf(root),
+            ))
+            .id();
+
+        let node_2 = app
+            .world_mut()
+            .spawn_empty()
+            .insert((ComputedTextStyle::default(), ChildOf(node_1)))
+            .id();
+
+        let node_3 = app
+            .world_mut()
+            .spawn_empty()
+            .insert((
+                FontSize::Px(2.),
+                ComputedTextStyle::default(),
+                ChildOf(node_2),
+            ))
+            .id();
+
+        let node_4 = app
+            .world_mut()
+            .spawn_empty()
+            .insert((
+                FontSize::Px(3.),
+                ComputedTextStyle::default(),
+                ChildOf(node_3),
+            ))
+            .id();
+
+        let node_5 = app
+            .world_mut()
+            .spawn_empty()
+            .insert((ComputedTextStyle::default(), ChildOf(node_4)))
+            .id();
+
+        app.update();
+
+        for (target, expected_font_size) in [
+            (root, DefaultTextStyle::default().font_size),
+            (node_1, FontSize::Px(1.)),
+            (node_2, FontSize::Px(1.)),
+            (node_3, FontSize::Px(2.)),
+            (node_4, FontSize::Px(3.)),
+            (node_5, FontSize::Px(3.)),
+        ] {
+            assert_eq!(
+                app.world_mut()
+                    .query::<&ComputedTextStyle>()
+                    .get(app.world(), target)
+                    .unwrap()
+                    .font_size,
+                expected_font_size
+            );
+        }
+    }
+}
diff --git a/crates/bevy_text/src/text.rs b/crates/bevy_text/src/text.rs
index e4da3288d43c0..fbf04af51da8d 100644
--- a/crates/bevy_text/src/text.rs
+++ b/crates/bevy_text/src/text.rs
@@ -1,14 +1,15 @@
-use crate::{Font, TextLayoutInfo, TextSpanAccess, TextSpanComponent};
-use bevy_asset::Handle;
+use crate::{
+    style::ComputedTextStyle, Font, InheritableTextStyle, InheritedTextStyle, TextLayoutInfo,
+};
+use bevy_asset::{AssetId, Handle};
 use bevy_color::Color;
 use bevy_derive::{Deref, DerefMut};
-use bevy_ecs::{prelude::*, reflect::ReflectComponent};
+use bevy_ecs::{prelude::*, reflect::ReflectComponent, relationship::Relationship};
+use bevy_math::Vec2;
 use bevy_reflect::prelude::*;
-use bevy_utils::{default, once};
 use cosmic_text::{Buffer, Metrics};
 use serde::{Deserialize, Serialize};
 use smallvec::SmallVec;
-use tracing::warn;
 
 /// Wrapper for [`cosmic_text::Buffer`]
 #[derive(Deref, DerefMut, Debug, Clone)]
@@ -56,11 +57,11 @@ pub struct ComputedTextBlock {
     ///
     /// Includes:
     /// - [`TextLayout`] changes.
-    /// - [`TextFont`] or `Text2d`/`Text`/`TextSpan` changes anywhere in the block's entity hierarchy.
+    /// - [`FontFace`] or `Text2d`/`Text` changes anywhere in the block's entity hierarchy.
     // TODO: This encompasses both structural changes like font size or justification and non-structural
     // changes like text color and font smoothing. This field currently causes UI to 'remeasure' text, even if
     // the actual changes are non-structural and can be handled by only rerendering and not remeasuring. A full
-    // solution would probably require splitting TextLayout and TextFont into structural/non-structural
+    // solution would probably require splitting TextLayout and FontFace into structural/non-structural
     // components for more granular change detection. A cost/benefit analysis is needed.
     pub(crate) needs_rerender: bool,
 }
@@ -68,7 +69,7 @@ pub struct ComputedTextBlock {
 impl ComputedTextBlock {
     /// Accesses entities in this block.
     ///
-    /// Can be used to look up [`TextFont`] components for glyphs in [`TextLayoutInfo`] using the `span_index`
+    /// Can be used to look up [`FontFace`] components for glyphs in [`TextLayoutInfo`] using the `span_index`
     /// stored there.
     pub fn entities(&self) -> &[TextEntity] {
         &self.entities
@@ -105,7 +106,7 @@ impl Default for ComputedTextBlock {
 
 /// Component with text format settings for a block of text.
 ///
-/// A block of text is composed of text spans, which each have a separate string value and [`TextFont`]. Text
+/// A block of text is composed of text spans, which each have a separate string value and [`FontFace`]. Text
 /// spans associated with a text block are collected into [`ComputedTextBlock`] for layout, and then inserted
 /// to [`TextLayoutInfo`] for rendering.
 ///
@@ -163,48 +164,6 @@ impl TextLayout {
     }
 }
 
-/// A span of text in a tree of spans.
-///
-/// A `TextSpan` is only valid when it exists as a child of a parent that has either `Text` or
-/// `Text2d`. The parent's `Text` / `Text2d` component contains the base text content. Any children
-/// with `TextSpan` extend this text by appending their content to the parent's text in sequence to
-/// form a [`ComputedTextBlock`]. The parent's [`TextLayout`] determines the layout of the block
-/// but each node has its own [`TextFont`] and [`TextColor`].
-#[derive(Component, Debug, Default, Clone, Deref, DerefMut, Reflect)]
-#[reflect(Component, Default, Debug, Clone)]
-#[require(TextFont, TextColor)]
-pub struct TextSpan(pub String);
-
-impl TextSpan {
-    /// Makes a new text span component.
-    pub fn new(text: impl Into<String>) -> Self {
-        Self(text.into())
-    }
-}
-
-impl TextSpanComponent for TextSpan {}
-
-impl TextSpanAccess for TextSpan {
-    fn read_span(&self) -> &str {
-        self.as_str()
-    }
-    fn write_span(&mut self) -> &mut String {
-        &mut *self
-    }
-}
-
-impl From<&str> for TextSpan {
-    fn from(value: &str) -> Self {
-        Self(String::from(value))
-    }
-}
-
-impl From<String> for TextSpan {
-    fn from(value: String) -> Self {
-        Self(value)
-    }
-}
-
 /// Describes the horizontal alignment of multiple lines of text relative to each other.
 ///
 /// This only affects the internal positioning of the lines of text within a text entity and
@@ -243,97 +202,93 @@ impl From<Justify> for cosmic_text::Align {
     }
 }
 
-/// `TextFont` determines the style of a text span within a [`ComputedTextBlock`], specifically
-/// the font face, the font size, the line height, and the antialiasing method.
-#[derive(Component, Clone, Debug, Reflect, PartialEq)]
+/// The specific font face to use, as a `Handle` to a [`Font`] asset.
+///
+/// If the `font` is not specified, then
+/// * if `default_font` feature is enabled (enabled by default in `bevy` crate),
+///   `FiraMono-subset.ttf` compiled into the library is used.
+/// * otherwise no text will be rendered, unless a custom font is loaded into the default font
+///   handle.
+#[derive(Default, Component, Clone, Debug, Reflect, PartialEq)]
 #[reflect(Component, Default, Debug, Clone)]
-pub struct TextFont {
-    /// The specific font face to use, as a `Handle` to a [`Font`] asset.
-    ///
-    /// If the `font` is not specified, then
-    /// * if `default_font` feature is enabled (enabled by default in `bevy` crate),
-    ///   `FiraMono-subset.ttf` compiled into the library is used.
-    /// * otherwise no text will be rendered, unless a custom font is loaded into the default font
-    ///   handle.
-    pub font: Handle<Font>,
-    /// The vertical height of rasterized glyphs in the font atlas in pixels.
-    ///
-    /// This is multiplied by the window scale factor and `UiScale`, but not the text entity
-    /// transform or camera projection.
-    ///
-    /// A new font atlas is generated for every combination of font handle and scaled font size
-    /// which can have a strong performance impact.
-    pub font_size: f32,
-    /// The vertical height of a line of text, from the top of one line to the top of the
-    /// next.
-    ///
-    /// Defaults to `LineHeight::RelativeToFont(1.2)`
-    pub line_height: LineHeight,
-    /// The antialiasing method to use when rendering text.
-    pub font_smoothing: FontSmoothing,
-}
-
-impl TextFont {
-    /// Returns a new [`TextFont`] with the specified font size.
-    pub fn from_font_size(font_size: f32) -> Self {
-        Self::default().with_font_size(font_size)
-    }
+pub struct FontFace(pub Handle<Font>);
 
-    /// Returns this [`TextFont`] with the specified font face handle.
-    pub fn with_font(mut self, font: Handle<Font>) -> Self {
-        self.font = font;
-        self
-    }
-
-    /// Returns this [`TextFont`] with the specified font size.
-    pub const fn with_font_size(mut self, font_size: f32) -> Self {
-        self.font_size = font_size;
-        self
+impl From<Handle<Font>> for FontFace {
+    fn from(font: Handle<Font>) -> Self {
+        Self(font)
     }
+}
 
-    /// Returns this [`TextFont`] with the specified [`FontSmoothing`].
-    pub const fn with_font_smoothing(mut self, font_smoothing: FontSmoothing) -> Self {
-        self.font_smoothing = font_smoothing;
-        self
-    }
+impl InheritableTextStyle for FontFace {
+    type Inherited = AssetId<Font>;
 
-    /// Returns this [`TextFont`] with the specified [`LineHeight`].
-    pub const fn with_line_height(mut self, line_height: LineHeight) -> Self {
-        self.line_height = line_height;
-        self
+    fn to_inherited(&self) -> InheritedTextStyle<Self::Inherited> {
+        InheritedTextStyle(self.0.id())
     }
 }
 
-impl From<Handle<Font>> for TextFont {
-    fn from(font: Handle<Font>) -> Self {
-        Self { font, ..default() }
-    }
+/// The vertical height of rasterized glyphs in the font atlas in pixels.
+///
+/// This is multiplied by the window scale factor and `UiScale`, but not the text entity
+/// transform or camera projection.
+///
+/// A new font atlas is generated for every combination of font handle and scaled font size
+/// which can have a strong performance impact.
+#[derive(Component, Copy, Clone, Debug, Reflect, PartialEq)]
+#[reflect(Component, Default, Debug, Clone)]
+pub enum FontSize {
+    /// Font Size in logical pixels.
+    Px(f32),
+    /// Font Size relative to the size of the default font.
+    Rem(f32),
+    /// Font Size relative to the size of the viewport width.
+    Vw(f32),
+    /// Font Size relative to the size of the viewport height.
+    Vh(f32),
+    /// Font Size relative to the smaller of the viewport width and viewport height.
+    VMin(f32),
+    /// Font Size relative to the larger of the viewport width and viewport height.
+    VMax(f32),
 }
 
-impl From<LineHeight> for TextFont {
-    fn from(line_height: LineHeight) -> Self {
-        Self {
-            line_height,
-            ..default()
+impl FontSize {
+    /// Evaluate the font size to a value in logical pixels
+    pub fn eval(
+        self,
+        // Viewport size in logical pixels
+        viewport_size: Vec2,
+        // Default font size in logical pixels
+        default_font_size: f32,
+    ) -> f32 {
+        match self {
+            FontSize::Px(s) => s,
+            FontSize::Rem(s) => default_font_size * s,
+            FontSize::Vw(s) => viewport_size.x * s,
+            FontSize::Vh(s) => viewport_size.y * s,
+            FontSize::VMin(s) => viewport_size.min_element() * s,
+            FontSize::VMax(s) => viewport_size.max_element() * s,
         }
     }
 }
 
-impl Default for TextFont {
+impl Default for FontSize {
     fn default() -> Self {
-        Self {
-            font: Default::default(),
-            font_size: 20.0,
-            line_height: LineHeight::default(),
-            font_smoothing: Default::default(),
-        }
+        Self::Px(20.)
+    }
+}
+
+impl InheritableTextStyle for FontSize {
+    type Inherited = FontSize;
+
+    fn to_inherited(&self) -> InheritedTextStyle<Self::Inherited> {
+        InheritedTextStyle(*self)
     }
 }
 
 /// Specifies the height of each line of text for `Text` and `Text2d`
 ///
 /// Default is 1.2x the font size
-#[derive(Debug, Clone, Copy, PartialEq, Reflect)]
+#[derive(Debug, Clone, Copy, PartialEq, Reflect, Component)]
 #[reflect(Debug, Clone, PartialEq)]
 pub enum LineHeight {
     /// Set line height to a specific number of pixels
@@ -357,6 +312,14 @@ impl Default for LineHeight {
     }
 }
 
+impl InheritableTextStyle for LineHeight {
+    type Inherited = LineHeight;
+
+    fn to_inherited(&self) -> InheritedTextStyle<Self::Inherited> {
+        InheritedTextStyle(*self)
+    }
+}
+
 /// The color of the text for this section.
 #[derive(Component, Copy, Clone, Debug, Deref, DerefMut, Reflect, PartialEq)]
 #[reflect(Component, Default, Debug, PartialEq, Clone)]
@@ -381,6 +344,13 @@ impl TextColor {
     pub const WHITE: Self = TextColor(Color::WHITE);
 }
 
+impl InheritableTextStyle for TextColor {
+    type Inherited = TextColor;
+
+    fn to_inherited(&self) -> InheritedTextStyle<Self::Inherited> {
+        InheritedTextStyle(*self)
+    }
+}
 /// The background color of the text for this section.
 #[derive(Component, Copy, Clone, Debug, Deref, DerefMut, Reflect, PartialEq)]
 #[reflect(Component, Default, Debug, PartialEq, Clone)]
@@ -429,7 +399,9 @@ pub enum LineBreak {
 /// rendered with grayscale antialiasing, but this can be changed to achieve a pixelated look.
 ///
 /// **Note:** Subpixel antialiasing is not currently supported.
-#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, Default, Reflect, Serialize, Deserialize)]
+#[derive(
+    Component, Debug, Clone, Copy, PartialEq, Eq, Hash, Default, Reflect, Serialize, Deserialize,
+)]
 #[reflect(Serialize, Deserialize, Clone, PartialEq, Hash, Default)]
 #[doc(alias = "antialiasing")]
 #[doc(alias = "pixelated")]
@@ -449,111 +421,96 @@ pub enum FontSmoothing {
     // SubpixelAntiAliased,
 }
 
-/// System that detects changes to text blocks and sets `ComputedTextBlock::should_rerender`.
-///
-/// Generic over the root text component and text span component. For example, `Text2d`/[`TextSpan`] for
-/// 2d or `Text`/[`TextSpan`] for UI.
-pub fn detect_text_needs_rerender<Root: Component>(
-    changed_roots: Query<
+impl InheritableTextStyle for FontSmoothing {
+    type Inherited = FontSmoothing;
+
+    fn to_inherited(&self) -> InheritedTextStyle<Self::Inherited> {
+        InheritedTextStyle(*self)
+    }
+}
+
+/// Text root
+#[derive(Component, PartialEq)]
+pub struct TextRoot(pub SmallVec<[Entity; 1]>);
+
+/// Update text roots
+pub fn update_text_roots<T: Component>(
+    mut parents: Local<Vec<Entity>>,
+    mut spans: Local<Vec<Entity>>,
+    mut commands: Commands,
+    mut text_node_query: Query<(
         Entity,
-        (
-            Or<(
-                Changed<Root>,
-                Changed<TextFont>,
-                Changed<TextLayout>,
-                Changed<Children>,
-            )>,
-            With<Root>,
-            With<TextFont>,
-            With<TextLayout>,
-        ),
-    >,
-    changed_spans: Query<
-        (Entity, Option<&ChildOf>, Has<TextLayout>),
-        (
-            Or<(
-                Changed<TextSpan>,
-                Changed<TextFont>,
-                Changed<Children>,
-                Changed<ChildOf>, // Included to detect broken text block hierarchies.
-                Added<TextLayout>,
-            )>,
-            With<TextSpan>,
-            With<TextFont>,
-        ),
-    >,
-    mut computed: Query<(
         Option<&ChildOf>,
-        Option<&mut ComputedTextBlock>,
-        Has<TextSpan>,
+        Option<&mut TextRoot>,
+        Has<Children>,
+        Ref<T>,
+        Ref<ComputedTextStyle>,
     )>,
+    children_query: Query<(Option<&Children>, Ref<T>, Ref<ComputedTextStyle>)>,
 ) {
-    // Root entity:
-    // - Root component changed.
-    // - TextFont on root changed.
-    // - TextLayout changed.
-    // - Root children changed (can include additions and removals).
-    for root in changed_roots.iter() {
-        let Ok((_, Some(mut computed), _)) = computed.get_mut(root) else {
-            once!(warn!("found entity {} with a root text component ({}) but no ComputedTextBlock; this warning only \
-                prints once", root, core::any::type_name::<Root>()));
-            continue;
-        };
-        computed.needs_rerender = true;
+    for (entity, maybe_child_of, maybe_text_root, has_children, text, style) in
+        text_node_query.iter_mut()
+    {
+        if maybe_child_of.is_none_or(|parent| !children_query.contains(parent.get())) {
+            // Either the text entity is an orphan, or its parent is not a text entity. It must be a root text entity.
+            if has_children {
+                parents.push(entity);
+            } else {
+                let new_text_root = TextRoot(smallvec::smallvec![entity]);
+                if let Some(mut text_root) = maybe_text_root {
+                    text_root.set_if_neq(new_text_root);
+                    if text.is_changed() || style.is_changed() {
+                        text_root.set_changed();
+                    }
+                } else {
+                    commands.entity(entity).insert(new_text_root);
+                }
+            }
+        } else if maybe_text_root.is_some() {
+            // Not a root. Remove `TextRoot` component, if present.
+            commands.entity(entity).remove::<TextRoot>();
+        }
     }
 
-    // Span entity:
-    // - Span component changed.
-    // - Span TextFont changed.
-    // - Span children changed (can include additions and removals).
-    for (entity, maybe_span_child_of, has_text_block) in changed_spans.iter() {
-        if has_text_block {
-            once!(warn!("found entity {} with a TextSpan that has a TextLayout, which should only be on root \
-                text entities (that have {}); this warning only prints once",
-                entity, core::any::type_name::<Root>()));
+    for root_entity in parents.drain(..) {
+        spans.clear();
+        let mut changed = false;
+
+        fn walk_text_descendants<T: Component>(
+            target: Entity,
+            query: &Query<(Option<&Children>, Ref<T>, Ref<ComputedTextStyle>)>,
+            spans: &mut Vec<Entity>,
+            changed: &mut bool,
+        ) {
+            spans.push(target);
+            if let Ok((children, text, style)) = query.get(target) {
+                *changed |= text.is_changed() || style.is_changed();
+                if let Some(children) = children {
+                    for child in children {
+                        walk_text_descendants(*child, query, spans, changed);
+                    }
+                }
+            }
         }
 
-        let Some(span_child_of) = maybe_span_child_of else {
-            once!(warn!(
-                "found entity {} with a TextSpan that has no parent; it should have an ancestor \
-                with a root text component ({}); this warning only prints once",
-                entity,
-                core::any::type_name::<Root>()
-            ));
-            continue;
-        };
-        let mut parent: Entity = span_child_of.parent();
-
-        // Search for the nearest ancestor with ComputedTextBlock.
-        // Note: We assume the perf cost from duplicate visits in the case that multiple spans in a block are visited
-        // is outweighed by the expense of tracking visited spans.
-        loop {
-            let Ok((maybe_child_of, maybe_computed, has_span)) = computed.get_mut(parent) else {
-                once!(warn!("found entity {} with a TextSpan that is part of a broken hierarchy with a ChildOf \
-                    component that points at non-existent entity {}; this warning only prints once",
-                    entity, parent));
-                break;
-            };
-            if let Some(mut computed) = maybe_computed {
-                computed.needs_rerender = true;
-                break;
+        walk_text_descendants(root_entity, &children_query, &mut spans, &mut changed);
+
+        if let Ok((_, _, Some(mut text_root), ..)) = text_node_query.get_mut(root_entity) {
+            if text_root.0.as_slice() != spans.as_slice() {
+                text_root.0.clear();
+                text_root.0.extend(spans.iter().copied());
             }
-            if !has_span {
-                once!(warn!("found entity {} with a TextSpan that has an ancestor ({}) that does not have a text \
-                span component or a ComputedTextBlock component; this warning only prints once",
-                    entity, parent));
-                break;
+            if changed {
+                text_root.set_changed();
             }
-            let Some(next_child_of) = maybe_child_of else {
-                once!(warn!(
-                    "found entity {} with a TextSpan that has no ancestor with the root text \
-                    component ({}); this warning only prints once",
-                    entity,
-                    core::any::type_name::<Root>()
-                ));
-                break;
-            };
-            parent = next_child_of.parent();
+        } else {
+            commands
+                .entity(root_entity)
+                .insert(TextRoot(SmallVec::from_slice(&spans)));
         }
     }
 }
+
+/// Final font size
+#[derive(Component, Debug, Copy, Clone, PartialEq, Deref, DerefMut, Default)]
+pub struct ComputedFontSize(pub f32);
diff --git a/crates/bevy_text/src/text_access.rs b/crates/bevy_text/src/text_access.rs
deleted file mode 100644
index 7de9e8e323b36..0000000000000
--- a/crates/bevy_text/src/text_access.rs
+++ /dev/null
@@ -1,474 +0,0 @@
-use bevy_color::Color;
-use bevy_ecs::{
-    component::Mutable,
-    prelude::*,
-    system::{Query, SystemParam},
-};
-
-use crate::{TextColor, TextFont, TextSpan};
-
-/// Helper trait for using the [`TextReader`] and [`TextWriter`] system params.
-pub trait TextSpanAccess: Component<Mutability = Mutable> {
-    /// Gets the text span's string.
-    fn read_span(&self) -> &str;
-    /// Gets mutable reference to the text span's string.
-    fn write_span(&mut self) -> &mut String;
-}
-
-/// Helper trait for the root text component in a text block.
-pub trait TextRoot: TextSpanAccess + From<String> {}
-
-/// Helper trait for the text span components in a text block.
-pub trait TextSpanComponent: TextSpanAccess + From<String> {}
-
-/// Scratch buffer used to store intermediate state when iterating over text spans.
-#[derive(Resource, Default)]
-pub struct TextIterScratch {
-    stack: Vec<(&'static Children, usize)>,
-}
-
-impl TextIterScratch {
-    fn take<'a>(&mut self) -> Vec<(&'a Children, usize)> {
-        core::mem::take(&mut self.stack)
-            .into_iter()
-            .map(|_| -> (&Children, usize) { unreachable!() })
-            .collect()
-    }
-
-    fn recover(&mut self, mut stack: Vec<(&Children, usize)>) {
-        stack.clear();
-        self.stack = stack
-            .into_iter()
-            .map(|_| -> (&'static Children, usize) { unreachable!() })
-            .collect();
-    }
-}
-
-/// System parameter for reading text spans in a text block.
-///
-/// `R` is the root text component.
-#[derive(SystemParam)]
-pub struct TextReader<'w, 's, R: TextRoot> {
-    // This is a local to avoid system ambiguities when TextReaders run in parallel.
-    scratch: Local<'s, TextIterScratch>,
-    roots: Query<
-        'w,
-        's,
-        (
-            &'static R,
-            &'static TextFont,
-            &'static TextColor,
-            Option<&'static Children>,
-        ),
-    >,
-    spans: Query<
-        'w,
-        's,
-        (
-            &'static TextSpan,
-            &'static TextFont,
-            &'static TextColor,
-            Option<&'static Children>,
-        ),
-    >,
-}
-
-impl<'w, 's, R: TextRoot> TextReader<'w, 's, R> {
-    /// Returns an iterator over text spans in a text block, starting with the root entity.
-    pub fn iter(&mut self, root_entity: Entity) -> TextSpanIter<'_, R> {
-        let stack = self.scratch.take();
-
-        TextSpanIter {
-            scratch: &mut self.scratch,
-            root_entity: Some(root_entity),
-            stack,
-            roots: &self.roots,
-            spans: &self.spans,
-        }
-    }
-
-    /// Gets a text span within a text block at a specific index in the flattened span list.
-    pub fn get(
-        &mut self,
-        root_entity: Entity,
-        index: usize,
-    ) -> Option<(Entity, usize, &str, &TextFont, Color)> {
-        self.iter(root_entity).nth(index)
-    }
-
-    /// Gets the text value of a text span within a text block at a specific index in the flattened span list.
-    pub fn get_text(&mut self, root_entity: Entity, index: usize) -> Option<&str> {
-        self.get(root_entity, index).map(|(_, _, text, _, _)| text)
-    }
-
-    /// Gets the [`TextFont`] of a text span within a text block at a specific index in the flattened span list.
-    pub fn get_font(&mut self, root_entity: Entity, index: usize) -> Option<&TextFont> {
-        self.get(root_entity, index).map(|(_, _, _, font, _)| font)
-    }
-
-    /// Gets the [`TextColor`] of a text span within a text block at a specific index in the flattened span list.
-    pub fn get_color(&mut self, root_entity: Entity, index: usize) -> Option<Color> {
-        self.get(root_entity, index)
-            .map(|(_, _, _, _, color)| color)
-    }
-
-    /// Gets the text value of a text span within a text block at a specific index in the flattened span list.
-    ///
-    /// Panics if there is no span at the requested index.
-    pub fn text(&mut self, root_entity: Entity, index: usize) -> &str {
-        self.get_text(root_entity, index).unwrap()
-    }
-
-    /// Gets the [`TextFont`] of a text span within a text block at a specific index in the flattened span list.
-    ///
-    /// Panics if there is no span at the requested index.
-    pub fn font(&mut self, root_entity: Entity, index: usize) -> &TextFont {
-        self.get_font(root_entity, index).unwrap()
-    }
-
-    /// Gets the [`TextColor`] of a text span within a text block at a specific index in the flattened span list.
-    ///
-    /// Panics if there is no span at the requested index.
-    pub fn color(&mut self, root_entity: Entity, index: usize) -> Color {
-        self.get_color(root_entity, index).unwrap()
-    }
-}
-
-/// Iterator returned by [`TextReader::iter`].
-///
-/// Iterates all spans in a text block according to hierarchy traversal order.
-/// Does *not* flatten interspersed ghost nodes. Only contiguous spans are traversed.
-// TODO: Use this iterator design in UiChildrenIter to reduce allocations.
-pub struct TextSpanIter<'a, R: TextRoot> {
-    scratch: &'a mut TextIterScratch,
-    root_entity: Option<Entity>,
-    /// Stack of (children, next index into children).
-    stack: Vec<(&'a Children, usize)>,
-    roots: &'a Query<
-        'a,
-        'a,
-        (
-            &'static R,
-            &'static TextFont,
-            &'static TextColor,
-            Option<&'static Children>,
-        ),
-    >,
-    spans: &'a Query<
-        'a,
-        'a,
-        (
-            &'static TextSpan,
-            &'static TextFont,
-            &'static TextColor,
-            Option<&'static Children>,
-        ),
-    >,
-}
-
-impl<'a, R: TextRoot> Iterator for TextSpanIter<'a, R> {
-    /// Item = (entity in text block, hierarchy depth in the block, span text, span style).
-    type Item = (Entity, usize, &'a str, &'a TextFont, Color);
-    fn next(&mut self) -> Option<Self::Item> {
-        // Root
-        if let Some(root_entity) = self.root_entity.take() {
-            if let Ok((text, text_font, color, maybe_children)) = self.roots.get(root_entity) {
-                if let Some(children) = maybe_children {
-                    self.stack.push((children, 0));
-                }
-                return Some((root_entity, 0, text.read_span(), text_font, color.0));
-            }
-            return None;
-        }
-
-        // Span
-        loop {
-            let (children, idx) = self.stack.last_mut()?;
-
-            loop {
-                let Some(child) = children.get(*idx) else {
-                    break;
-                };
-
-                // Increment to prep the next entity in this stack level.
-                *idx += 1;
-
-                let entity = *child;
-                let Ok((span, text_font, color, maybe_children)) = self.spans.get(entity) else {
-                    continue;
-                };
-
-                let depth = self.stack.len();
-                if let Some(children) = maybe_children {
-                    self.stack.push((children, 0));
-                }
-                return Some((entity, depth, span.read_span(), text_font, color.0));
-            }
-
-            // All children at this stack entry have been iterated.
-            self.stack.pop();
-        }
-    }
-}
-
-impl<'a, R: TextRoot> Drop for TextSpanIter<'a, R> {
-    fn drop(&mut self) {
-        // Return the internal stack.
-        let stack = core::mem::take(&mut self.stack);
-        self.scratch.recover(stack);
-    }
-}
-
-/// System parameter for reading and writing text spans in a text block.
-///
-/// `R` is the root text component, and `S` is the text span component on children.
-#[derive(SystemParam)]
-pub struct TextWriter<'w, 's, R: TextRoot> {
-    // This is a resource because two TextWriters can't run in parallel.
-    scratch: ResMut<'w, TextIterScratch>,
-    roots: Query<
-        'w,
-        's,
-        (
-            &'static mut R,
-            &'static mut TextFont,
-            &'static mut TextColor,
-        ),
-        Without<TextSpan>,
-    >,
-    spans: Query<
-        'w,
-        's,
-        (
-            &'static mut TextSpan,
-            &'static mut TextFont,
-            &'static mut TextColor,
-        ),
-        Without<R>,
-    >,
-    children: Query<'w, 's, &'static Children>,
-}
-
-impl<'w, 's, R: TextRoot> TextWriter<'w, 's, R> {
-    /// Gets a mutable reference to a text span within a text block at a specific index in the flattened span list.
-    pub fn get(
-        &mut self,
-        root_entity: Entity,
-        index: usize,
-    ) -> Option<(
-        Entity,
-        usize,
-        Mut<'_, String>,
-        Mut<'_, TextFont>,
-        Mut<'_, TextColor>,
-    )> {
-        // Root
-        if index == 0 {
-            let (text, font, color) = self.roots.get_mut(root_entity).ok()?;
-            return Some((
-                root_entity,
-                0,
-                text.map_unchanged(|t| t.write_span()),
-                font,
-                color,
-            ));
-        }
-
-        // Prep stack.
-        let mut stack: Vec<(&Children, usize)> = self.scratch.take();
-        if let Ok(children) = self.children.get(root_entity) {
-            stack.push((children, 0));
-        }
-
-        // Span
-        let mut count = 1;
-        let (depth, entity) = 'l: loop {
-            let Some((children, idx)) = stack.last_mut() else {
-                self.scratch.recover(stack);
-                return None;
-            };
-
-            loop {
-                let Some(child) = children.get(*idx) else {
-                    // All children at this stack entry have been iterated.
-                    stack.pop();
-                    break;
-                };
-
-                // Increment to prep the next entity in this stack level.
-                *idx += 1;
-
-                if !self.spans.contains(*child) {
-                    continue;
-                };
-                count += 1;
-
-                if count - 1 == index {
-                    let depth = stack.len();
-                    self.scratch.recover(stack);
-                    break 'l (depth, *child);
-                }
-
-                if let Ok(children) = self.children.get(*child) {
-                    stack.push((children, 0));
-                    break;
-                }
-            }
-        };
-
-        // Note: We do this outside the loop due to borrow checker limitations.
-        let (text, font, color) = self.spans.get_mut(entity).unwrap();
-        Some((
-            entity,
-            depth,
-            text.map_unchanged(|t| t.write_span()),
-            font,
-            color,
-        ))
-    }
-
-    /// Gets the text value of a text span within a text block at a specific index in the flattened span list.
-    pub fn get_text(&mut self, root_entity: Entity, index: usize) -> Option<Mut<'_, String>> {
-        self.get(root_entity, index).map(|(_, _, text, ..)| text)
-    }
-
-    /// Gets the [`TextFont`] of a text span within a text block at a specific index in the flattened span list.
-    pub fn get_font(&mut self, root_entity: Entity, index: usize) -> Option<Mut<'_, TextFont>> {
-        self.get(root_entity, index).map(|(_, _, _, font, _)| font)
-    }
-
-    /// Gets the [`TextColor`] of a text span within a text block at a specific index in the flattened span list.
-    pub fn get_color(&mut self, root_entity: Entity, index: usize) -> Option<Mut<'_, TextColor>> {
-        self.get(root_entity, index)
-            .map(|(_, _, _, _, color)| color)
-    }
-
-    /// Gets the text value of a text span within a text block at a specific index in the flattened span list.
-    ///
-    /// Panics if there is no span at the requested index.
-    pub fn text(&mut self, root_entity: Entity, index: usize) -> Mut<'_, String> {
-        self.get_text(root_entity, index).unwrap()
-    }
-
-    /// Gets the [`TextFont`] of a text span within a text block at a specific index in the flattened span list.
-    ///
-    /// Panics if there is no span at the requested index.
-    pub fn font(&mut self, root_entity: Entity, index: usize) -> Mut<'_, TextFont> {
-        self.get_font(root_entity, index).unwrap()
-    }
-
-    /// Gets the [`TextColor`] of a text span within a text block at a specific index in the flattened span list.
-    ///
-    /// Panics if there is no span at the requested index.
-    pub fn color(&mut self, root_entity: Entity, index: usize) -> Mut<'_, TextColor> {
-        self.get_color(root_entity, index).unwrap()
-    }
-
-    /// Invokes a callback on each span in a text block, starting with the root entity.
-    pub fn for_each(
-        &mut self,
-        root_entity: Entity,
-        mut callback: impl FnMut(Entity, usize, Mut<String>, Mut<TextFont>, Mut<TextColor>),
-    ) {
-        self.for_each_until(root_entity, |a, b, c, d, e| {
-            (callback)(a, b, c, d, e);
-            true
-        });
-    }
-
-    /// Invokes a callback on each span's string value in a text block, starting with the root entity.
-    pub fn for_each_text(&mut self, root_entity: Entity, mut callback: impl FnMut(Mut<String>)) {
-        self.for_each(root_entity, |_, _, text, _, _| {
-            (callback)(text);
-        });
-    }
-
-    /// Invokes a callback on each span's [`TextFont`] in a text block, starting with the root entity.
-    pub fn for_each_font(&mut self, root_entity: Entity, mut callback: impl FnMut(Mut<TextFont>)) {
-        self.for_each(root_entity, |_, _, _, font, _| {
-            (callback)(font);
-        });
-    }
-
-    /// Invokes a callback on each span's [`TextColor`] in a text block, starting with the root entity.
-    pub fn for_each_color(
-        &mut self,
-        root_entity: Entity,
-        mut callback: impl FnMut(Mut<TextColor>),
-    ) {
-        self.for_each(root_entity, |_, _, _, _, color| {
-            (callback)(color);
-        });
-    }
-
-    /// Invokes a callback on each span in a text block, starting with the root entity.
-    ///
-    /// Traversal will stop when the callback returns `false`.
-    // TODO: find a way to consolidate get and for_each_until, or provide a real iterator. Lifetime issues are challenging here.
-    pub fn for_each_until(
-        &mut self,
-        root_entity: Entity,
-        mut callback: impl FnMut(Entity, usize, Mut<String>, Mut<TextFont>, Mut<TextColor>) -> bool,
-    ) {
-        // Root
-        let Ok((text, font, color)) = self.roots.get_mut(root_entity) else {
-            return;
-        };
-        if !(callback)(
-            root_entity,
-            0,
-            text.map_unchanged(|t| t.write_span()),
-            font,
-            color,
-        ) {
-            return;
-        }
-
-        // Prep stack.
-        let mut stack: Vec<(&Children, usize)> = self.scratch.take();
-        if let Ok(children) = self.children.get(root_entity) {
-            stack.push((children, 0));
-        }
-
-        // Span
-        loop {
-            let depth = stack.len();
-            let Some((children, idx)) = stack.last_mut() else {
-                self.scratch.recover(stack);
-                return;
-            };
-
-            loop {
-                let Some(child) = children.get(*idx) else {
-                    // All children at this stack entry have been iterated.
-                    stack.pop();
-                    break;
-                };
-
-                // Increment to prep the next entity in this stack level.
-                *idx += 1;
-
-                let entity = *child;
-                let Ok((text, font, color)) = self.spans.get_mut(entity) else {
-                    continue;
-                };
-
-                if !(callback)(
-                    entity,
-                    depth,
-                    text.map_unchanged(|t| t.write_span()),
-                    font,
-                    color,
-                ) {
-                    self.scratch.recover(stack);
-                    return;
-                }
-
-                if let Ok(children) = self.children.get(entity) {
-                    stack.push((children, 0));
-                    break;
-                }
-            }
-        }
-    }
-}
diff --git a/crates/bevy_ui/src/accessibility.rs b/crates/bevy_ui/src/accessibility.rs
index 81c78a50a2da8..033dd4594cbe8 100644
--- a/crates/bevy_ui/src/accessibility.rs
+++ b/crates/bevy_ui/src/accessibility.rs
@@ -2,7 +2,7 @@ use crate::{
     experimental::UiChildren,
     prelude::{Button, Label},
     ui_transform::UiGlobalTransform,
-    widget::{ImageNode, TextUiReader},
+    widget::{ImageNode, Text},
     ComputedNode,
 };
 use bevy_a11y::AccessibilityNode;
@@ -17,19 +17,17 @@ use bevy_ecs::{
 
 use accesskit::{Node, Rect, Role};
 use bevy_camera::CameraUpdateSystems;
+use bevy_text::{ComputedTextStyleUpdateSystems, TextRoot};
 
 fn calc_label(
-    text_reader: &mut TextUiReader,
+    text_query: &Query<&Text>,
     children: impl Iterator<Item = Entity>,
 ) -> Option<Box<str>> {
     let mut name = None;
     for child in children {
-        let values = text_reader
-            .iter(child)
-            .map(|(_, _, text, _, _)| text.into())
-            .collect::<Vec<String>>();
-        if !values.is_empty() {
-            name = Some(values.join(" "));
+        let values = text_query.get(child).map(|text| text.0.clone());
+        if let Ok(values) = values {
+            name = Some(values);
         }
     }
     name.map(String::into_boxed_str)
@@ -58,7 +56,7 @@ fn button_changed(
     mut commands: Commands,
     mut query: Query<(Entity, Option<&mut AccessibilityNode>), Changed<Button>>,
     ui_children: UiChildren,
-    mut text_reader: TextUiReader,
+    mut text_reader: Query<&Text>,
 ) {
     for (entity, accessible) in &mut query {
         let label = calc_label(&mut text_reader, ui_children.iter_ui_children(entity));
@@ -88,7 +86,7 @@ fn image_changed(
         (Changed<ImageNode>, Without<Button>),
     >,
     ui_children: UiChildren,
-    mut text_reader: TextUiReader,
+    mut text_reader: Query<&Text>,
 ) {
     for (entity, accessible) in &mut query {
         let label = calc_label(&mut text_reader, ui_children.iter_ui_children(entity));
@@ -114,12 +112,16 @@ fn image_changed(
 fn label_changed(
     mut commands: Commands,
     mut query: Query<(Entity, Option<&mut AccessibilityNode>), Changed<Label>>,
-    mut text_reader: TextUiReader,
+    root_query: Query<&TextRoot>,
+    text_reader: Query<&Text>,
 ) {
     for (entity, accessible) in &mut query {
-        let values = text_reader
-            .iter(entity)
-            .map(|(_, _, text, _, _)| text.into())
+        let values = root_query
+            .get(entity)
+            .unwrap()
+            .0
+            .iter()
+            .map(|entity| text_reader.get(*entity).ok().unwrap().0.clone())
             .collect::<Vec<String>>();
         let label = Some(values.join(" ").into_boxed_str());
         if let Some(mut accessible) = accessible {
@@ -154,9 +156,8 @@ impl Plugin for AccessibilityPlugin {
                     .after(CameraUpdateSystems)
                     // the listed systems do not affect calculated size
                     .ambiguous_with(crate::ui_stack_system),
-                button_changed,
-                image_changed,
-                label_changed,
+                (button_changed, image_changed, label_changed)
+                    .before(ComputedTextStyleUpdateSystems),
             ),
         );
     }
diff --git a/crates/bevy_ui/src/layout/mod.rs b/crates/bevy_ui/src/layout/mod.rs
index 3de05629ff294..642f96693767f 100644
--- a/crates/bevy_ui/src/layout/mod.rs
+++ b/crates/bevy_ui/src/layout/mod.rs
@@ -1,6 +1,7 @@
 use crate::{
     experimental::{UiChildren, UiRootNodes},
     ui_transform::{UiGlobalTransform, UiTransform},
+    widget::Text,
     BorderRadius, ComputedNode, ComputedUiRenderTargetInfo, ContentSize, Display, LayoutConfig,
     Node, Outline, OverflowAxis, ScrollPosition,
 };
@@ -9,7 +10,7 @@ use bevy_ecs::{
     entity::Entity,
     hierarchy::Children,
     lifecycle::RemovedComponents,
-    query::Added,
+    query::{Added, Or, With, Without},
     system::{Query, ResMut},
     world::Ref,
 };
@@ -19,7 +20,7 @@ use bevy_sprite::BorderRect;
 use thiserror::Error;
 use ui_surface::UiSurface;
 
-use bevy_text::ComputedTextBlock;
+use bevy_text::{ComputedTextBlock, TextRoot};
 
 use bevy_text::CosmicFontSystem;
 
@@ -74,23 +75,29 @@ pub fn ui_layout_system(
     mut ui_surface: ResMut<UiSurface>,
     ui_root_node_query: UiRootNodes,
     ui_children: UiChildren,
-    mut node_query: Query<(
-        Entity,
-        Ref<Node>,
-        Option<&mut ContentSize>,
-        Ref<ComputedUiRenderTargetInfo>,
-    )>,
+    mut node_query: Query<
+        (
+            Entity,
+            Ref<Node>,
+            Option<&mut ContentSize>,
+            Ref<ComputedUiRenderTargetInfo>,
+        ),
+        Or<(Without<Text>, (With<Text>, With<TextRoot>))>,
+    >,
     added_node_query: Query<(), Added<Node>>,
-    mut node_update_query: Query<(
-        &mut ComputedNode,
-        &UiTransform,
-        &mut UiGlobalTransform,
-        &Node,
-        Option<&LayoutConfig>,
-        Option<&BorderRadius>,
-        Option<&Outline>,
-        Option<&ScrollPosition>,
-    )>,
+    mut node_update_query: Query<
+        (
+            &mut ComputedNode,
+            &UiTransform,
+            &mut UiGlobalTransform,
+            &Node,
+            Option<&LayoutConfig>,
+            Option<&BorderRadius>,
+            Option<&Outline>,
+            Option<&ScrollPosition>,
+        ),
+        Or<(Without<Text>, (With<Text>, With<TextRoot>))>,
+    >,
     mut buffer_query: Query<&mut ComputedTextBlock>,
     mut font_system: ResMut<CosmicFontSystem>,
     mut removed_children: RemovedComponents<Children>,
@@ -192,16 +199,19 @@ pub fn ui_layout_system(
         inherited_use_rounding: bool,
         target_size: Vec2,
         mut inherited_transform: Affine2,
-        node_update_query: &mut Query<(
-            &mut ComputedNode,
-            &UiTransform,
-            &mut UiGlobalTransform,
-            &Node,
-            Option<&LayoutConfig>,
-            Option<&BorderRadius>,
-            Option<&Outline>,
-            Option<&ScrollPosition>,
-        )>,
+        node_update_query: &mut Query<
+            (
+                &mut ComputedNode,
+                &UiTransform,
+                &mut UiGlobalTransform,
+                &Node,
+                Option<&LayoutConfig>,
+                Option<&BorderRadius>,
+                Option<&Outline>,
+                Option<&ScrollPosition>,
+            ),
+            Or<(Without<Text>, (With<Text>, With<TextRoot>))>,
+        >,
         ui_children: &UiChildren,
         inverse_target_scale_factor: f32,
         parent_size: Vec2,
diff --git a/crates/bevy_ui/src/lib.rs b/crates/bevy_ui/src/lib.rs
index 2e90620575756..b3ad45cdf298f 100644
--- a/crates/bevy_ui/src/lib.rs
+++ b/crates/bevy_ui/src/lib.rs
@@ -34,6 +34,7 @@ mod layout;
 mod stack;
 mod ui_node;
 
+use bevy_text::update_text_roots;
 pub use focus::*;
 pub use geometry::*;
 pub use gradients::*;
@@ -51,7 +52,7 @@ pub mod prelude {
     #[cfg(feature = "bevy_ui_picking_backend")]
     pub use crate::picking_backend::{UiPickingCamera, UiPickingPlugin, UiPickingSettings};
     #[doc(hidden)]
-    pub use crate::widget::{Text, TextShadow, TextUiReader, TextUiWriter};
+    pub use crate::widget::{Text, TextShadow};
     #[doc(hidden)]
     pub use {
         crate::{
@@ -78,6 +79,8 @@ use stack::ui_stack_system;
 pub use stack::UiStack;
 use update::{propagate_ui_target_cameras, update_clipping_system};
 
+use crate::widget::Text;
+
 /// The basic plugin for Bevy UI
 #[derive(Default)]
 pub struct UiPlugin;
@@ -184,8 +187,7 @@ impl Plugin for UiPlugin {
 
         let ui_layout_system_config = ui_layout_system_config
             // Text and Text2D operate on disjoint sets of entities
-            .ambiguous_with(bevy_sprite::update_text2d_layout)
-            .ambiguous_with(bevy_text::detect_text_needs_rerender::<bevy_sprite::Text2d>);
+            .ambiguous_with(bevy_sprite::update_text2d_layout);
 
         app.add_systems(
             PostUpdate,
@@ -224,19 +226,13 @@ impl Plugin for UiPlugin {
 }
 
 fn build_text_interop(app: &mut App) {
-    use widget::Text;
-
     app.add_systems(
         PostUpdate,
         (
-            (
-                bevy_text::detect_text_needs_rerender::<Text>,
-                widget::measure_text_system,
-            )
+            (update_text_roots::<Text>, widget::measure_text_system)
                 .chain()
                 .in_set(UiSystems::Content)
                 // Text and Text2d are independent.
-                .ambiguous_with(bevy_text::detect_text_needs_rerender::<bevy_sprite::Text2d>)
                 // Potential conflict: `Assets<Image>`
                 // Since both systems will only ever insert new [`Image`] assets,
                 // they will never observe each other's effects.
@@ -249,10 +245,10 @@ fn build_text_interop(app: &mut App) {
                 .after(bevy_text::remove_dropped_font_atlas_sets)
                 .before(bevy_asset::AssetEventSystems)
                 // Text2d and bevy_ui text are entirely on separate entities
-                .ambiguous_with(bevy_text::detect_text_needs_rerender::<bevy_sprite::Text2d>)
                 .ambiguous_with(bevy_sprite::update_text2d_layout)
                 .ambiguous_with(bevy_sprite::calculate_bounds_text2d),
-        ),
+        )
+            .after(bevy_text::ComputedTextStyleUpdateSystems),
     );
 
     app.add_plugins(accessibility::AccessibilityPlugin);
diff --git a/crates/bevy_ui/src/widget/text.rs b/crates/bevy_ui/src/widget/text.rs
index 2998041a500ca..14f44bb44ce8a 100644
--- a/crates/bevy_ui/src/widget/text.rs
+++ b/crates/bevy_ui/src/widget/text.rs
@@ -9,7 +9,6 @@ use bevy_ecs::{
     change_detection::DetectChanges,
     component::Component,
     entity::Entity,
-    query::With,
     reflect::ReflectComponent,
     system::{Query, Res, ResMut},
     world::{Mut, Ref},
@@ -18,9 +17,9 @@ use bevy_image::prelude::*;
 use bevy_math::Vec2;
 use bevy_reflect::{std_traits::ReflectDefault, Reflect};
 use bevy_text::{
-    ComputedTextBlock, CosmicFontSystem, Font, FontAtlasSets, LineBreak, SwashCache, TextBounds,
-    TextColor, TextError, TextFont, TextLayout, TextLayoutInfo, TextMeasureInfo, TextPipeline,
-    TextReader, TextRoot, TextSpanAccess, TextWriter,
+    ComputedFontSize, ComputedTextBlock, ComputedTextStyle, CosmicFontSystem, DefaultTextStyle,
+    Font, FontAtlasSets, LineBreak, SwashCache, TextBounds, TextError, TextLayout, TextLayoutInfo,
+    TextMeasureInfo, TextPipeline, TextRoot,
 };
 use taffy::style::AvailableSpace;
 use tracing::error;
@@ -51,7 +50,7 @@ impl Default for TextNodeFlags {
 /// Adding [`Text`] to an entity will pull in required components for setting up a UI text node.
 ///
 /// The string in this component is the first 'text span' in a hierarchy of text spans that are collected into
-/// a [`ComputedTextBlock`]. See [`TextSpan`](bevy_text::TextSpan) for the component used by children of entities with [`Text`].
+/// a [`ComputedTextBlock`].
 ///
 /// Note that [`Transform`](bevy_transform::components::Transform) on this entity is managed automatically by the UI layout system.
 ///
@@ -61,7 +60,7 @@ impl Default for TextNodeFlags {
 /// # use bevy_color::Color;
 /// # use bevy_color::palettes::basic::BLUE;
 /// # use bevy_ecs::world::World;
-/// # use bevy_text::{Font, Justify, TextLayout, TextFont, TextColor, TextSpan};
+/// # use bevy_text::{Font, Justify, TextLayout, FontFace, TextColor};
 /// # use bevy_ui::prelude::Text;
 /// #
 /// # let font_handle: Handle<Font> = Default::default();
@@ -73,11 +72,8 @@ impl Default for TextNodeFlags {
 /// // With non-default style.
 /// world.spawn((
 ///     Text::new("hello world!"),
-///     TextFont {
-///         font: font_handle.clone().into(),
-///         font_size: 60.0,
-///         ..Default::default()
-///     },
+///     FontFace(font_handle.clone()),
+///     FontSize(60.0),
 ///     TextColor(BLUE.into()),
 /// ));
 ///
@@ -89,13 +85,13 @@ impl Default for TextNodeFlags {
 ///
 /// // With spans
 /// world.spawn(Text::new("hello ")).with_children(|parent| {
-///     parent.spawn(TextSpan::new("world"));
-///     parent.spawn((TextSpan::new("!"), TextColor(BLUE.into())));
+///     parent.spawn(Text::new("world"));
+///     parent.spawn((Text::new("!"), TextColor(BLUE.into())));
 /// });
 /// ```
 #[derive(Component, Debug, Default, Clone, Deref, DerefMut, Reflect, PartialEq)]
 #[reflect(Component, Default, Debug, PartialEq, Clone)]
-#[require(Node, TextLayout, TextFont, TextColor, TextNodeFlags, ContentSize)]
+#[require(Node, TextLayout, ComputedTextStyle, TextNodeFlags, ContentSize)]
 pub struct Text(pub String);
 
 impl Text {
@@ -105,26 +101,9 @@ impl Text {
     }
 }
 
-impl TextRoot for Text {}
-
-impl TextSpanAccess for Text {
-    fn read_span(&self) -> &str {
-        self.as_str()
-    }
-    fn write_span(&mut self) -> &mut String {
-        &mut *self
-    }
-}
-
-impl From<&str> for Text {
-    fn from(value: &str) -> Self {
-        Self(String::from(value))
-    }
-}
-
 impl From<String> for Text {
     fn from(value: String) -> Self {
-        Self(value)
+        Text(value)
     }
 }
 
@@ -150,12 +129,6 @@ impl Default for TextShadow {
     }
 }
 
-/// UI alias for [`TextReader`].
-pub type TextUiReader<'w, 's> = TextReader<'w, 's, Text>;
-
-/// UI alias for [`TextWriter`].
-pub type TextUiWriter<'w, 's> = TextWriter<'w, 's, Text>;
-
 /// Text measurement for UI layout. See [`NodeMeasure`].
 pub struct TextMeasure {
     pub info: TextMeasureInfo,
@@ -220,13 +193,15 @@ fn create_text_measure<'a>(
     entity: Entity,
     fonts: &Assets<Font>,
     scale_factor: f64,
-    spans: impl Iterator<Item = (Entity, usize, &'a str, &'a TextFont, Color)>,
+    spans: impl Iterator<Item = (Entity, usize, &'a str, &'a ComputedTextStyle)>,
     block: Ref<TextLayout>,
     text_pipeline: &mut TextPipeline,
     mut content_size: Mut<ContentSize>,
     mut text_flags: Mut<TextNodeFlags>,
     mut computed: Mut<ComputedTextBlock>,
     font_system: &mut CosmicFontSystem,
+    viewport_size: Vec2,
+    default_font_size: f32,
 ) {
     match text_pipeline.create_text_measure(
         entity,
@@ -236,6 +211,8 @@ fn create_text_measure<'a>(
         &block,
         computed.as_mut(),
         font_system,
+        viewport_size,
+        default_font_size,
     ) {
         Ok(measure) => {
             if block.linebreak == LineBreak::NoWrap {
@@ -270,52 +247,72 @@ fn create_text_measure<'a>(
 ///   method should be called when only changing the `Text`'s colors.
 pub fn measure_text_system(
     fonts: Res<Assets<Font>>,
-    mut text_query: Query<
-        (
-            Entity,
-            Ref<TextLayout>,
-            &mut ContentSize,
-            &mut TextNodeFlags,
-            &mut ComputedTextBlock,
-            Ref<ComputedUiRenderTargetInfo>,
-            &ComputedNode,
-        ),
-        With<Node>,
-    >,
-    mut text_reader: TextUiReader,
+    mut text_root_query: Query<(
+        Entity,
+        Ref<TextLayout>,
+        &mut ContentSize,
+        &mut TextNodeFlags,
+        &mut ComputedTextBlock,
+        Ref<ComputedUiRenderTargetInfo>,
+        &ComputedNode,
+        Ref<TextRoot>,
+    )>,
+    text_query: Query<(&Text, &ComputedTextStyle)>,
     mut text_pipeline: ResMut<TextPipeline>,
     mut font_system: ResMut<CosmicFontSystem>,
+    default_text_style: Res<DefaultTextStyle>,
 ) {
-    for (entity, block, content_size, text_flags, computed, computed_target, computed_node) in
-        &mut text_query
+    for (
+        entity,
+        block,
+        content_size,
+        text_flags,
+        computed,
+        computed_target,
+        computed_node,
+        text_root,
+    ) in &mut text_root_query
     {
         // Note: the ComputedTextBlock::needs_rerender bool is cleared in create_text_measure().
         // 1e-5 epsilon to ignore tiny scale factor float errors
         if 1e-5
             < (computed_target.scale_factor() - computed_node.inverse_scale_factor.recip()).abs()
+            || text_root.is_changed()
             || computed.needs_rerender()
             || text_flags.needs_measure_fn
             || content_size.is_added()
         {
+            let spans = text_root.0.iter().cloned().filter_map(|entity| {
+                text_query
+                    .get(entity)
+                    .map(|(text, style)| (entity, 0, text.0.as_str(), style))
+                    .ok()
+            });
+
+            let default_font_size = default_text_style
+                .font_size
+                .eval(computed_target.logical_size(), 20.);
+
             create_text_measure(
                 entity,
                 &fonts,
                 computed_target.scale_factor.into(),
-                text_reader.iter(entity),
+                spans,
                 block,
                 &mut text_pipeline,
                 content_size,
                 text_flags,
                 computed,
                 &mut font_system,
+                computed_target.logical_size(),
+                default_font_size,
             );
         }
     }
 }
 
 #[inline]
-fn queue_text(
-    entity: Entity,
+fn queue_text<'a>(
     fonts: &Assets<Font>,
     text_pipeline: &mut TextPipeline,
     font_atlas_sets: &mut FontAtlasSets,
@@ -328,9 +325,11 @@ fn queue_text(
     mut text_flags: Mut<TextNodeFlags>,
     text_layout_info: Mut<TextLayoutInfo>,
     computed: &mut ComputedTextBlock,
-    text_reader: &mut TextUiReader,
     font_system: &mut CosmicFontSystem,
     swash_cache: &mut SwashCache,
+    spans: impl Iterator<Item = (Entity, usize, &'a str, &'a ComputedTextStyle)>,
+    viewport_size: Vec2,
+    default_font_size: f32,
 ) {
     // Skip the text node if it is waiting for a new measure func
     if text_flags.needs_measure_fn {
@@ -349,7 +348,7 @@ fn queue_text(
     match text_pipeline.queue_text(
         text_layout_info,
         fonts,
-        text_reader.iter(entity),
+        spans,
         scale_factor.into(),
         block,
         physical_node_size,
@@ -359,6 +358,8 @@ fn queue_text(
         computed,
         font_system,
         swash_cache,
+        viewport_size,
+        default_font_size,
     ) {
         Err(TextError::NoSuchFont) => {
             // There was an error processing the text layout, try again next frame
@@ -389,22 +390,45 @@ pub fn text_system(
     mut texture_atlases: ResMut<Assets<TextureAtlasLayout>>,
     mut font_atlas_sets: ResMut<FontAtlasSets>,
     mut text_pipeline: ResMut<TextPipeline>,
-    mut text_query: Query<(
-        Entity,
+    mut text_root_query: Query<(
         Ref<ComputedNode>,
         &TextLayout,
         &mut TextLayoutInfo,
         &mut TextNodeFlags,
         &mut ComputedTextBlock,
+        &TextRoot,
+        &ComputedUiRenderTargetInfo,
     )>,
-    mut text_reader: TextUiReader,
+    mut text_query: Query<(&Text, &ComputedTextStyle, &mut ComputedFontSize)>,
     mut font_system: ResMut<CosmicFontSystem>,
     mut swash_cache: ResMut<SwashCache>,
+    default_text_style: Res<DefaultTextStyle>,
 ) {
-    for (entity, node, block, text_layout_info, text_flags, mut computed) in &mut text_query {
+    for (node, block, text_layout_info, text_flags, mut computed, text_root, target_info) in
+        &mut text_root_query
+    {
+        let default_font_size = default_text_style
+            .font_size
+            .eval(target_info.logical_size(), 20.);
+
         if node.is_changed() || text_flags.needs_recompute {
+            for &entity in text_root.0.iter() {
+                if let Ok((_, style, mut computed_size)) = text_query.get_mut(entity) {
+                    computed_size.0 = style
+                        .font_size()
+                        .eval(target_info.logical_size(), default_font_size)
+                        * node.inverse_scale_factor.recip();
+                }
+            }
+
+            let spans = text_root.0.iter().cloned().filter_map(|entity| {
+                text_query
+                    .get(entity)
+                    .map(|(text, style, _)| (entity, 0, text.0.as_str(), style))
+                    .ok()
+            });
+
             queue_text(
-                entity,
                 &fonts,
                 &mut text_pipeline,
                 &mut font_atlas_sets,
@@ -417,9 +441,11 @@ pub fn text_system(
                 text_flags,
                 text_layout_info,
                 computed.as_mut(),
-                &mut text_reader,
                 &mut font_system,
                 &mut swash_cache,
+                spans,
+                target_info.logical_size(),
+                default_font_size,
             );
         }
     }
diff --git a/crates/bevy_ui_render/src/lib.rs b/crates/bevy_ui_render/src/lib.rs
index d7a152868dd3c..a7d713940fadf 100644
--- a/crates/bevy_ui_render/src/lib.rs
+++ b/crates/bevy_ui_render/src/lib.rs
@@ -24,6 +24,7 @@ use bevy_reflect::prelude::ReflectDefault;
 use bevy_reflect::Reflect;
 use bevy_shader::load_shader_library;
 use bevy_sprite_render::SpriteAssetEvents;
+use bevy_text::ComputedTextStyle;
 use bevy_ui::widget::{ImageNode, TextShadow, ViewportNode};
 use bevy_ui::{
     BackgroundColor, BorderColor, CalculatedClip, ComputedNode, ComputedUiTargetCamera, Display,
@@ -59,9 +60,7 @@ pub use debug_overlay::UiDebugOptions;
 use gradient::GradientPlugin;
 
 use bevy_platform::collections::{HashMap, HashSet};
-use bevy_text::{
-    ComputedTextBlock, PositionedGlyph, TextBackgroundColor, TextColor, TextLayoutInfo,
-};
+use bevy_text::{ComputedTextBlock, PositionedGlyph, TextBackgroundColor, TextLayoutInfo};
 use bevy_transform::components::GlobalTransform;
 use box_shadow::BoxShadowPlugin;
 use bytemuck::{Pod, Zeroable};
@@ -138,7 +137,7 @@ pub enum RenderUiSystems {
 /// Marker for controlling whether UI is rendered with or without anti-aliasing
 /// in a camera. By default, UI is always anti-aliased.
 ///
-/// **Note:** This does not affect text anti-aliasing. For that, use the `font_smoothing` property of the [`TextFont`](bevy_text::TextFont) component.
+/// **Note:** This does not affect text anti-aliasing. For that, use the `FontSmoothing` component.
 ///
 /// ```
 /// use bevy_camera::prelude::*;
@@ -909,11 +908,11 @@ pub fn extract_text_sections(
             Option<&CalculatedClip>,
             &ComputedUiTargetCamera,
             &ComputedTextBlock,
-            &TextColor,
+            &ComputedTextStyle,
             &TextLayoutInfo,
         )>,
     >,
-    text_styles: Extract<Query<&TextColor>>,
+    text_styles: Extract<Query<&ComputedTextStyle>>,
     camera_map: Extract<UiCameraMap>,
 ) {
     let mut start = extracted_uinodes.glyphs.len();
@@ -928,7 +927,7 @@ pub fn extract_text_sections(
         clip,
         camera,
         computed_block,
-        text_color,
+        text_style,
         text_layout_info,
     ) in &uinode_query
     {
@@ -943,7 +942,7 @@ pub fn extract_text_sections(
 
         let transform = Affine2::from(*transform) * Affine2::from_translation(-0.5 * uinode.size());
 
-        let mut color = text_color.0.to_linear();
+        let mut color = text_style.color().to_linear();
 
         let mut current_span_index = 0;
 
@@ -963,7 +962,7 @@ pub fn extract_text_sections(
             {
                 color = text_styles
                     .get(span_entity)
-                    .map(|text_color| LinearRgba::from(text_color.0))
+                    .map(|style| LinearRgba::from(style.color()))
                     .unwrap_or_default();
                 current_span_index = *span_index;
             }
diff --git a/errors/B0005.md b/errors/B0005.md
index 7fecfd11a1b38..5a340aef9a346 100644
--- a/errors/B0005.md
+++ b/errors/B0005.md
@@ -2,7 +2,7 @@
 
 A runtime warning.
 
-Separate font atlases are created for each font and font size. This is expensive, and the memory is never reclaimed when e.g. interpolating `TextFont::font_size` or `UiScale::scale`.
+Separate font atlases are created for each font and font size. This is expensive, and the memory is never reclaimed when e.g. interpolating `FontSize` or `UiScale::scale`.
 
 If you need to smoothly scale font size, use `Transform::scale`.
 
diff --git a/examples/2d/sprite_scale.rs b/examples/2d/sprite_scale.rs
index aff8ab3b1be46..86c5aabac69c5 100644
--- a/examples/2d/sprite_scale.rs
+++ b/examples/2d/sprite_scale.rs
@@ -124,7 +124,7 @@ fn setup_sprites(mut commands: Commands, asset_server: Res<AssetServer>) {
             children![(
                 Text2d::new(rect.text),
                 TextLayout::new_with_justify(Justify::Center),
-                TextFont::from_font_size(15.),
+                FontSize::Px(15.),
                 Transform::from_xyz(0., -0.5 * rect.size.y - 10., 0.),
                 bevy::sprite::Anchor::TOP_CENTER,
             )],
@@ -266,7 +266,7 @@ fn setup_texture_atlas(
             children![(
                 Text2d::new(sprite_sheet.text),
                 TextLayout::new_with_justify(Justify::Center),
-                TextFont::from_font_size(15.),
+                FontSize::Px(15.),
                 Transform::from_xyz(0., -0.5 * sprite_sheet.size.y - 10., 0.),
                 bevy::sprite::Anchor::TOP_CENTER,
             )],
diff --git a/examples/2d/sprite_slice.rs b/examples/2d/sprite_slice.rs
index 91918b1d66091..4e4716ddb9d6d 100644
--- a/examples/2d/sprite_slice.rs
+++ b/examples/2d/sprite_slice.rs
@@ -14,7 +14,7 @@ fn spawn_sprites(
     texture_handle: Handle<Image>,
     mut position: Vec3,
     slice_border: f32,
-    style: TextFont,
+    style: FontFace,
     gap: f32,
 ) {
     let cases = [
@@ -107,10 +107,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     commands.spawn(Camera2d);
 
     let font = asset_server.load("fonts/FiraSans-Bold.ttf");
-    let style = TextFont {
-        font: font.clone(),
-        ..default()
-    };
+    let style = FontFace(font.clone());
 
     // Load textures
     let handle_1 = asset_server.load("textures/slice_square.png");
diff --git a/examples/2d/text2d.rs b/examples/2d/text2d.rs
index c51be59a1d1ac..cadaa8c167ade 100644
--- a/examples/2d/text2d.rs
+++ b/examples/2d/text2d.rs
@@ -35,11 +35,7 @@ struct AnimateScale;
 
 fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     let font = asset_server.load("fonts/FiraSans-Bold.ttf");
-    let text_font = TextFont {
-        font: font.clone(),
-        font_size: 50.0,
-        ..default()
-    };
+    let text_font = (FontFace(font.clone()), FontSize::Px(50.0));
     let text_justification = Justify::Center;
     commands.spawn(Camera2d);
     // Demonstrate changing translation
@@ -71,11 +67,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
         AnimateScale,
     ));
     // Demonstrate text wrapping
-    let slightly_smaller_text_font = TextFont {
-        font,
-        font_size: 35.0,
-        ..default()
-    };
+    let slightly_smaller_text_font = (FontFace(font), FontSize::Px(35.));
+
     let box_size = Vec2::new(300.0, 200.0);
     let box_position = Vec2::new(0.0, -250.0);
     let box_color = Color::srgb(0.25, 0.25, 0.55);
@@ -123,9 +116,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     // Demonstrate font smoothing off
     commands.spawn((
         Text2d::new("This text has\nFontSmoothing::None\nAnd Justify::Center"),
-        slightly_smaller_text_font
-            .clone()
-            .with_font_smoothing(FontSmoothing::None),
+        slightly_smaller_text_font.clone(),
+        FontSmoothing::None,
         TextLayout::new_with_justify(Justify::Center),
         Transform::from_translation(Vec3::new(-400.0, -250.0, 0.0)),
         // Add a black shadow to the text
@@ -141,13 +133,13 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
             Transform::from_translation(-1. * Vec3::Z),
             children![
                 (
-                    TextSpan("::".to_string()),
+                    Text2d("::".to_string()),
                     slightly_smaller_text_font.clone(),
                     TextColor(LIGHT_GREY.into()),
                     TextBackgroundColor(DARK_BLUE.into()),
                 ),
                 (
-                    TextSpan(format!("{text_anchor:?} ")),
+                    Text2d(format!("{text_anchor:?} ")),
                     slightly_smaller_text_font.clone(),
                     TextColor(color),
                     TextBackgroundColor(color.darker(0.3)),
diff --git a/examples/2d/texture_atlas.rs b/examples/2d/texture_atlas.rs
index 5380fc393b875..30fdeeb41b641 100644
--- a/examples/2d/texture_atlas.rs
+++ b/examples/2d/texture_atlas.rs
@@ -120,11 +120,7 @@ fn setup(
     let font = asset_server.load("fonts/FiraSans-Bold.ttf");
 
     // Padding label text style
-    let text_style: TextFont = TextFont {
-        font: font.clone(),
-        font_size: 42.0,
-        ..default()
-    };
+    let text_style = (FontFace(font.clone()), FontSize::Px(42.));
 
     // Labels to indicate padding
 
@@ -182,13 +178,6 @@ fn setup(
         ),
     ];
 
-    // Label text style
-    let sampling_label_style = TextFont {
-        font,
-        font_size: 25.0,
-        ..default()
-    };
-
     let base_y = 80.0; // y position of the sprites
 
     for (sampling, atlas_handle, atlas_sources, atlas_texture, x) in configurations {
@@ -207,7 +196,7 @@ fn setup(
             &mut commands,
             (x, base_y + 110.0, 0.0), // Offset to y position of the sprite
             sampling,
-            sampling_label_style.clone(),
+            (FontFace(font.clone()), FontSize::Px(25.)),
         );
     }
 }
@@ -274,7 +263,7 @@ fn create_label(
     commands: &mut Commands,
     translation: (f32, f32, f32),
     text: &str,
-    text_style: TextFont,
+    text_style: (FontFace, FontSize),
 ) {
     commands.spawn((
         Text2d::new(text),
diff --git a/examples/3d/auto_exposure.rs b/examples/3d/auto_exposure.rs
index 5d9e42c9310c8..f8a81ab12140a 100644
--- a/examples/3d/auto_exposure.rs
+++ b/examples/3d/auto_exposure.rs
@@ -123,7 +123,7 @@ fn setup(
         },
     ));
 
-    let text_font = TextFont::default();
+    let text_font = FontFace::default();
 
     commands.spawn((Text::new("Left / Right - Rotate Camera\nC - Toggle Compensation Curve\nM - Toggle Metering Mask\nV - Visualize Metering Mask"),
             text_font.clone(), Node {
diff --git a/examples/3d/blend_modes.rs b/examples/3d/blend_modes.rs
index e144b05db8212..902b605031f93 100644
--- a/examples/3d/blend_modes.rs
+++ b/examples/3d/blend_modes.rs
@@ -160,10 +160,7 @@ fn setup(
     // Controls Text
 
     // We need the full version of this font so we can use box drawing characters.
-    let text_style = TextFont {
-        font: asset_server.load("fonts/FiraMono-Medium.ttf"),
-        ..default()
-    };
+    let text_style = FontFace(asset_server.load("fonts/FiraMono-Medium.ttf"));
 
     let label_text_style = (text_style.clone(), TextColor(ORANGE.into()));
 
diff --git a/examples/3d/color_grading.rs b/examples/3d/color_grading.rs
index 12c6bb2c7099f..3ccaefe9c4f8c 100644
--- a/examples/3d/color_grading.rs
+++ b/examples/3d/color_grading.rs
@@ -291,10 +291,7 @@ fn add_help_text(
 ) {
     commands.spawn((
         Text::new(create_help_text(currently_selected_option)),
-        TextFont {
-            font: font.clone(),
-            ..default()
-        },
+        FontFace(font.clone()),
         Node {
             position_type: PositionType::Absolute,
             left: px(12),
@@ -309,11 +306,8 @@ fn add_help_text(
 fn text(label: &str, font: &Handle<Font>, color: Color) -> impl Bundle + use<> {
     (
         Text::new(label),
-        TextFont {
-            font: font.clone(),
-            font_size: 15.0,
-            ..default()
-        },
+        FontFace(font.clone()),
+        FontSize::Px(15.),
         TextColor(color),
     )
 }
@@ -521,6 +515,7 @@ fn handle_button_presses(
 
 /// Updates the state of the UI based on the current state.
 fn update_ui_state(
+    mut commands: Commands,
     mut buttons: Query<(
         &mut BackgroundColor,
         &mut BorderColor,
@@ -528,7 +523,6 @@ fn update_ui_state(
     )>,
     button_text: Query<(Entity, &ColorGradingOptionWidget), (With<Text>, Without<HelpText>)>,
     help_text: Single<Entity, With<HelpText>>,
-    mut writer: TextUiWriter,
     cameras: Single<Ref<ColorGrading>>,
     currently_selected_option: Res<SelectedColorGradingOption>,
 ) {
@@ -560,22 +554,20 @@ fn update_ui_state(
             Color::WHITE
         };
 
-        writer.for_each_color(entity, |mut text_color| {
-            text_color.0 = color;
-        });
+        commands.entity(entity).insert(TextColor(color));
 
         // Update the displayed value, if this is the currently-selected option.
         if widget.widget_type == ColorGradingOptionWidgetType::Value
             && *currently_selected_option == widget.option
         {
-            writer.for_each_text(entity, |mut text| {
-                text.clone_from(&value_label);
-            });
+            commands.entity(entity).insert(Text::new(&value_label));
         }
     }
 
     // Update the help text.
-    *writer.text(*help_text, 0) = create_help_text(&currently_selected_option);
+    commands
+        .entity(*help_text)
+        .insert(Text(create_help_text(&currently_selected_option)));
 }
 
 /// Creates the help text at the top left of the window.
diff --git a/examples/3d/lighting.rs b/examples/3d/lighting.rs
index a23a68885abb3..824e12a9bc592 100644
--- a/examples/3d/lighting.rs
+++ b/examples/3d/lighting.rs
@@ -220,25 +220,25 @@ fn setup(
             ..default()
         },
         children![
-            TextSpan::new("Ambient light is on\n"),
-            TextSpan(format!("Aperture: f/{:.0}\n", parameters.aperture_f_stops,)),
-            TextSpan(format!(
+            Text::new("Ambient light is on\n"),
+            Text(format!("Aperture: f/{:.0}\n", parameters.aperture_f_stops,)),
+            Text(format!(
                 "Shutter speed: 1/{:.0}s\n",
                 1.0 / parameters.shutter_speed_s
             )),
-            TextSpan(format!(
+            Text(format!(
                 "Sensitivity: ISO {:.0}\n",
                 parameters.sensitivity_iso
             )),
-            TextSpan::new("\n\n"),
-            TextSpan::new("Controls\n"),
-            TextSpan::new("---------------\n"),
-            TextSpan::new("Arrow keys - Move objects\n"),
-            TextSpan::new("Space - Toggle ambient light\n"),
-            TextSpan::new("1/2 - Decrease/Increase aperture\n"),
-            TextSpan::new("3/4 - Decrease/Increase shutter speed\n"),
-            TextSpan::new("5/6 - Decrease/Increase sensitivity\n"),
-            TextSpan::new("R - Reset exposure"),
+            Text::new("\n\n"),
+            Text::new("Controls\n"),
+            Text::new("---------------\n"),
+            Text::new("Arrow keys - Move objects\n"),
+            Text::new("Space - Toggle ambient light\n"),
+            Text::new("1/2 - Decrease/Increase aperture\n"),
+            Text::new("3/4 - Decrease/Increase shutter speed\n"),
+            Text::new("5/6 - Decrease/Increase sensitivity\n"),
+            Text::new("R - Reset exposure"),
         ],
     ));
 
diff --git a/examples/3d/motion_blur.rs b/examples/3d/motion_blur.rs
index 92c5d8cd72cb7..11e05a7d403eb 100644
--- a/examples/3d/motion_blur.rs
+++ b/examples/3d/motion_blur.rs
@@ -244,11 +244,11 @@ fn setup_ui(mut commands: Commands) {
             ..default()
         },
         children![
-            TextSpan::default(),
-            TextSpan::default(),
-            TextSpan::new("1/2: -/+ shutter angle (blur amount)\n"),
-            TextSpan::new("3/4: -/+ sample count (blur quality)\n"),
-            TextSpan::new("Spacebar: cycle camera\n"),
+            Text::default(),
+            Text::default(),
+            Text::new("1/2: -/+ shutter angle (blur amount)\n"),
+            Text::new("3/4: -/+ sample count (blur quality)\n"),
+            Text::new("Spacebar: cycle camera\n"),
         ],
     ));
 }
diff --git a/examples/3d/order_independent_transparency.rs b/examples/3d/order_independent_transparency.rs
index afec7d9a0506d..cb09bd5221362 100644
--- a/examples/3d/order_independent_transparency.rs
+++ b/examples/3d/order_independent_transparency.rs
@@ -56,9 +56,9 @@ fn setup(
         },
         RenderLayers::layer(1),
         children![
-            TextSpan::new("Press T to toggle OIT\n"),
-            TextSpan::new("OIT Enabled"),
-            TextSpan::new("\nPress C to cycle test scenes"),
+            Text::new("Press T to toggle OIT\n"),
+            Text::new("OIT Enabled"),
+            Text::new("\nPress C to cycle test scenes"),
         ],
     ));
 
diff --git a/examples/3d/parallax_mapping.rs b/examples/3d/parallax_mapping.rs
index 5f5827223e0cf..f66a45ccbd114 100644
--- a/examples/3d/parallax_mapping.rs
+++ b/examples/3d/parallax_mapping.rs
@@ -304,15 +304,15 @@ fn setup(
             ..default()
         },
         children![
-            (TextSpan(format!("Parallax depth scale: {parallax_depth_scale:.5}\n"))),
-            (TextSpan(format!("Layers: {max_parallax_layer_count:.0}\n"))),
-            (TextSpan(format!("{parallax_mapping_method}\n"))),
-            (TextSpan::new("\n\n")),
-            (TextSpan::new("Controls:\n")),
-            (TextSpan::new("Left click - Change view angle\n")),
-            (TextSpan::new("1/2 - Decrease/Increase parallax depth scale\n",)),
-            (TextSpan::new("3/4 - Decrease/Increase layer count\n")),
-            (TextSpan::new("Space - Switch parallaxing algorithm\n")),
+            (Text(format!("Parallax depth scale: {parallax_depth_scale:.5}\n"))),
+            (Text(format!("Layers: {max_parallax_layer_count:.0}\n"))),
+            (Text(format!("{parallax_mapping_method}\n"))),
+            (Text::new("\n\n")),
+            (Text::new("Controls:\n")),
+            (Text::new("Left click - Change view angle\n")),
+            (Text::new("1/2 - Decrease/Increase parallax depth scale\n",)),
+            (Text::new("3/4 - Decrease/Increase layer count\n")),
+            (Text::new("Space - Switch parallaxing algorithm\n")),
         ],
     ));
 }
diff --git a/examples/3d/pbr.rs b/examples/3d/pbr.rs
index 4a8dc9757cfe2..9fbf0bce3c92b 100644
--- a/examples/3d/pbr.rs
+++ b/examples/3d/pbr.rs
@@ -61,10 +61,7 @@ fn setup(
     // labels
     commands.spawn((
         Text::new("Perceptual Roughness"),
-        TextFont {
-            font_size: 30.0,
-            ..default()
-        },
+        FontSize::Px(30.0),
         Node {
             position_type: PositionType::Absolute,
             top: px(20),
@@ -75,10 +72,7 @@ fn setup(
 
     commands.spawn((
         Text::new("Metallic"),
-        TextFont {
-            font_size: 30.0,
-            ..default()
-        },
+        FontSize::Px(30.0),
         Node {
             position_type: PositionType::Absolute,
             top: px(130),
@@ -93,10 +87,7 @@ fn setup(
 
     commands.spawn((
         Text::new("Loading Environment Map..."),
-        TextFont {
-            font_size: 30.0,
-            ..default()
-        },
+        FontSize::Px(30.0),
         Node {
             position_type: PositionType::Absolute,
             bottom: px(20),
diff --git a/examples/3d/shadow_biases.rs b/examples/3d/shadow_biases.rs
index 9285aff0adee0..5a647ee1901de 100644
--- a/examples/3d/shadow_biases.rs
+++ b/examples/3d/shadow_biases.rs
@@ -106,33 +106,33 @@ fn setup(
         children![(
             Text::default(),
             children![
-                (TextSpan::new("Controls:\n")),
-                (TextSpan::new("R / Z - reset biases to default / zero\n")),
-                (TextSpan::new("L     - switch between directional and point lights [",)),
-                (TextSpan::new("DirectionalLight")),
-                (TextSpan::new("]\n")),
-                (TextSpan::new("F     - switch directional light filter methods [",)),
-                (TextSpan::new("Hardware2x2")),
-                (TextSpan::new("]\n")),
-                (TextSpan::new("1/2   - change point light depth bias [")),
-                (TextSpan::new("0.00")),
-                (TextSpan::new("]\n")),
-                (TextSpan::new("3/4   - change point light normal bias [")),
-                (TextSpan::new("0.0")),
-                (TextSpan::new("]\n")),
-                (TextSpan::new("5/6   - change direction light depth bias [")),
-                (TextSpan::new("0.00")),
-                (TextSpan::new("]\n")),
-                (TextSpan::new("7/8   - change direction light normal bias [",)),
-                (TextSpan::new("0.0")),
-                (TextSpan::new("]\n")),
-                (TextSpan::new(
+                (Text::new("Controls:\n")),
+                (Text::new("R / Z - reset biases to default / zero\n")),
+                (Text::new("L     - switch between directional and point lights [",)),
+                (Text::new("DirectionalLight")),
+                (Text::new("]\n")),
+                (Text::new("F     - switch directional light filter methods [",)),
+                (Text::new("Hardware2x2")),
+                (Text::new("]\n")),
+                (Text::new("1/2   - change point light depth bias [")),
+                (Text::new("0.00")),
+                (Text::new("]\n")),
+                (Text::new("3/4   - change point light normal bias [")),
+                (Text::new("0.0")),
+                (Text::new("]\n")),
+                (Text::new("5/6   - change direction light depth bias [")),
+                (Text::new("0.00")),
+                (Text::new("]\n")),
+                (Text::new("7/8   - change direction light normal bias [",)),
+                (Text::new("0.0")),
+                (Text::new("]\n")),
+                (Text::new(
                     "left/right/up/down/pgup/pgdown - adjust light position (looking at 0,0,0) [",
                 )),
                 (TextSpan(format!("{:.1},", light_transform.translation.x))),
                 (TextSpan(format!(" {:.1},", light_transform.translation.y))),
                 (TextSpan(format!(" {:.1}", light_transform.translation.z))),
-                (TextSpan::new("]\n")),
+                (Text::new("]\n")),
             ]
         )],
     ));
diff --git a/examples/3d/tonemapping.rs b/examples/3d/tonemapping.rs
index 5d8b19e4367e1..eeb940aa288b8 100644
--- a/examples/3d/tonemapping.rs
+++ b/examples/3d/tonemapping.rs
@@ -176,10 +176,7 @@ fn setup_image_viewer_scene(
 
     commands.spawn((
         Text::new("Drag and drop an HDR or EXR file"),
-        TextFont {
-            font_size: 36.0,
-            ..default()
-        },
+        FontSize::Px(36.),
         TextColor(Color::BLACK),
         TextLayout::new_with_justify(Justify::Center),
         Node {
diff --git a/examples/animation/animated_ui.rs b/examples/animation/animated_ui.rs
index 8243592034abc..6a1be245d0d58 100644
--- a/examples/animation/animated_ui.rs
+++ b/examples/animation/animated_ui.rs
@@ -47,7 +47,7 @@ impl AnimationInfo {
         animation_clip.add_curve_to_target(
             animation_target_id,
             AnimatableCurve::new(
-                animated_field!(TextFont::font_size),
+                animated_field!(FontSize::Px(font_size)),
                 AnimatableKeyframeCurve::new(
                     [0.0, 0.5, 1.0, 1.5, 2.0, 2.5, 3.0]
                         .into_iter()
@@ -141,11 +141,8 @@ fn setup(
     let player = entity.id();
     entity.insert(children![(
         Text::new("Bevy"),
-        TextFont {
-            font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-            font_size: 24.0,
-            ..default()
-        },
+        FontFace(asset_server.load("fonts/FiraSans-Bold.ttf")),
+        FontSize::Px(24.0),
         TextColor(Color::Srgba(Srgba::RED)),
         TextLayout::new_with_justify(Justify::Center),
         animation_target_id,
diff --git a/examples/animation/animation_events.rs b/examples/animation/animation_events.rs
index 177f6c478153a..78df4884ce88c 100644
--- a/examples/animation/animation_events.rs
+++ b/examples/animation/animation_events.rs
@@ -56,10 +56,7 @@ fn setup(
     commands.spawn((
         MessageText,
         Text2d::default(),
-        TextFont {
-            font_size: 119.0,
-            ..default()
-        },
+        FontSize(119.0),
         TextColor(Color::NONE),
     ));
 
diff --git a/examples/animation/animation_graph.rs b/examples/animation/animation_graph.rs
index bc4b8b2bdf3a1..7c07967da235f 100644
--- a/examples/animation/animation_graph.rs
+++ b/examples/animation/animation_graph.rs
@@ -278,10 +278,7 @@ fn setup_node_rects(commands: &mut Commands) {
         let text = commands
             .spawn((
                 Text::new(node_string),
-                TextFont {
-                    font_size: 16.0,
-                    ..default()
-                },
+                FontSize::Px(16.),
                 TextColor(ANTIQUE_WHITE.into()),
                 TextLayout::new_with_justify(Justify::Center),
             ))
diff --git a/examples/animation/animation_masks.rs b/examples/animation/animation_masks.rs
index 4566d06034e33..c92f2f8196c86 100644
--- a/examples/animation/animation_masks.rs
+++ b/examples/animation/animation_masks.rs
@@ -227,13 +227,7 @@ fn setup_ui(mut commands: Commands) {
 // The button will automatically become a child of the parent that owns the
 // given `ChildSpawnerCommands`.
 fn new_mask_group_control(label: &str, width: Val, mask_group_id: u32) -> impl Bundle {
-    let button_text_style = (
-        TextFont {
-            font_size: 14.0,
-            ..default()
-        },
-        TextColor::WHITE,
-    );
+    let button_text_style = (FontSize(14.0), TextColor::WHITE);
     let selected_button_text_style = (button_text_style.0.clone(), TextColor::BLACK);
     let label_text_style = (
         button_text_style.0.clone(),
diff --git a/examples/animation/easing_functions.rs b/examples/animation/easing_functions.rs
index 95f5d9b10fdab..e5ed5008f1887 100644
--- a/examples/animation/easing_functions.rs
+++ b/examples/animation/easing_functions.rs
@@ -21,10 +21,7 @@ const PLOT_SIZE: Vec2 = Vec2::splat(80.0);
 fn setup(mut commands: Commands) {
     commands.spawn(Camera2d);
 
-    let text_font = TextFont {
-        font_size: 10.0,
-        ..default()
-    };
+    let text_font = FontSize::Px(10.);
 
     let chunks = [
         // "In" row
diff --git a/examples/app/log_layers_ecs.rs b/examples/app/log_layers_ecs.rs
index 8dc663afc2148..3fa2e976778d5 100644
--- a/examples/app/log_layers_ecs.rs
+++ b/examples/app/log_layers_ecs.rs
@@ -154,10 +154,10 @@ fn print_logs(
                 Text::default(),
                 children![
                     (
-                        TextSpan::new(format!("{:5} ", log_message.level)),
+                        Text::new(format!("{:5} ", log_message.level)),
                         TextColor(level_color(&log_message.level)),
                     ),
-                    TextSpan::new(&log_message.message),
+                    Text::new(&log_message.message),
                 ],
             ));
         }
diff --git a/examples/dev_tools/fps_overlay.rs b/examples/dev_tools/fps_overlay.rs
index 5637706c756ed..5ec53a4044c66 100644
--- a/examples/dev_tools/fps_overlay.rs
+++ b/examples/dev_tools/fps_overlay.rs
@@ -3,7 +3,7 @@
 use bevy::{
     dev_tools::fps_overlay::{FpsOverlayConfig, FpsOverlayPlugin, FrameTimeGraphConfig},
     prelude::*,
-    text::FontSmoothing,
+    text::{FontSmoothing, TextStyle},
 };
 
 struct OverlayColor;
@@ -19,17 +19,17 @@ fn main() {
             DefaultPlugins,
             FpsOverlayPlugin {
                 config: FpsOverlayConfig {
-                    text_config: TextFont {
+                    text_style: TextStyle {
                         // Here we define size of our overlay
                         font_size: 42.0,
                         // If we want, we can use a custom font
                         font: default(),
                         // We could also disable font smoothing,
                         font_smoothing: FontSmoothing::default(),
+                        // We can also change color of the overlay
+                        color: OverlayColor::GREEN,
                         ..default()
                     },
-                    // We can also change color of the overlay
-                    text_color: OverlayColor::GREEN,
                     // We can also set the refresh interval for the FPS counter
                     refresh_interval: core::time::Duration::from_millis(100),
                     enabled: true,
@@ -74,17 +74,17 @@ fn setup(mut commands: Commands) {
 fn customize_config(input: Res<ButtonInput<KeyCode>>, mut overlay: ResMut<FpsOverlayConfig>) {
     if input.just_pressed(KeyCode::Digit1) {
         // Changing resource will affect overlay
-        if overlay.text_color == OverlayColor::GREEN {
-            overlay.text_color = OverlayColor::RED;
+        if overlay.text_style.color == OverlayColor::GREEN {
+            overlay.text_style.color = OverlayColor::RED;
         } else {
-            overlay.text_color = OverlayColor::GREEN;
+            overlay.text_style.color = OverlayColor::GREEN;
         }
     }
     if input.just_pressed(KeyCode::Digit2) {
-        overlay.text_config.font_size -= 2.0;
+        overlay.text_style.font_size -= 2.0;
     }
     if input.just_pressed(KeyCode::Digit3) {
-        overlay.text_config.font_size += 2.0;
+        overlay.text_style.font_size += 2.0;
     }
     if input.just_pressed(KeyCode::Digit4) {
         overlay.enabled = !overlay.enabled;
diff --git a/examples/ecs/hotpatching_systems.rs b/examples/ecs/hotpatching_systems.rs
index 7dd781fae4004..c9ed980664206 100644
--- a/examples/ecs/hotpatching_systems.rs
+++ b/examples/ecs/hotpatching_systems.rs
@@ -69,7 +69,7 @@ fn setup(mut commands: Commands) {
             },
             children![(
                 Text::default(),
-                TextFont {
+                FontFace {
                     font_size: 100.0,
                     ..default()
                 },
diff --git a/examples/ecs/one_shot_systems.rs b/examples/ecs/one_shot_systems.rs
index 59b8dedb045f6..4af7444f93803 100644
--- a/examples/ecs/one_shot_systems.rs
+++ b/examples/ecs/one_shot_systems.rs
@@ -100,10 +100,10 @@ fn setup_ui(mut commands: Commands) {
             ..default()
         },
         children![
-            (TextSpan::new("Press A or B to trigger a one-shot system\n")),
-            (TextSpan::new("Last Triggered: ")),
+            (Text::new("Press A or B to trigger a one-shot system\n")),
+            (Text::new("Last Triggered: ")),
             (
-                TextSpan::new("-"),
+                Text::new("-"),
                 TextColor(bevy::color::palettes::css::ORANGE.into()),
             )
         ],
diff --git a/examples/ecs/state_scoped.rs b/examples/ecs/state_scoped.rs
index 8fd4f0a6196fd..a15610e4aa640 100644
--- a/examples/ecs/state_scoped.rs
+++ b/examples/ecs/state_scoped.rs
@@ -35,10 +35,7 @@ fn on_a_enter(mut commands: Commands) {
     commands.spawn((
         DespawnOnExit(GameState::A),
         Text::new("Game is in state 'A'"),
-        TextFont {
-            font_size: 33.0,
-            ..default()
-        },
+        FontSize::Px(33.0),
         TextColor(Color::srgb(0.5, 0.5, 1.0)),
         Node {
             position_type: PositionType::Absolute,
@@ -54,10 +51,7 @@ fn on_a_exit(mut commands: Commands) {
     commands.spawn((
         DespawnOnEnter(GameState::A),
         Text::new("Game state 'A' will be back in 1 second"),
-        TextFont {
-            font_size: 33.0,
-            ..default()
-        },
+        FontSize::Px(33.0),
         TextColor(Color::srgb(0.5, 0.5, 1.0)),
         Node {
             position_type: PositionType::Absolute,
@@ -73,10 +67,7 @@ fn on_b_enter(mut commands: Commands) {
     commands.spawn((
         DespawnOnExit(GameState::B),
         Text::new("Game is in state 'B'"),
-        TextFont {
-            font_size: 33.0,
-            ..default()
-        },
+        FontSize::Px(33.0),
         TextColor(Color::srgb(0.5, 0.5, 1.0)),
         Node {
             position_type: PositionType::Absolute,
@@ -92,10 +83,7 @@ fn on_b_exit(mut commands: Commands) {
     commands.spawn((
         DespawnOnEnter(GameState::B),
         Text::new("Game state 'B' will be back in 1 second"),
-        TextFont {
-            font_size: 33.0,
-            ..default()
-        },
+        FontSize::Px(33.0),
         TextColor(Color::srgb(0.5, 0.5, 1.0)),
         Node {
             position_type: PositionType::Absolute,
diff --git a/examples/games/alien_cake_addict.rs b/examples/games/alien_cake_addict.rs
index 2e9f33bf739bb..0350b7ff35145 100644
--- a/examples/games/alien_cake_addict.rs
+++ b/examples/games/alien_cake_addict.rs
@@ -179,7 +179,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>, mut game: ResMu
     commands.spawn((
         DespawnOnExit(GameState::Playing),
         Text::new("Score:"),
-        TextFont {
+        FontFace {
             font_size: 33.0,
             ..default()
         },
@@ -399,7 +399,7 @@ fn display_score(mut commands: Commands, game: Res<Game>) {
         },
         children![(
             Text::new(format!("Cake eaten: {}", game.cake_eaten)),
-            TextFont {
+            FontFace {
                 font_size: 67.0,
                 ..default()
             },
diff --git a/examples/games/breakout.rs b/examples/games/breakout.rs
index f5a65e6cdeb74..e00f2fa6cc73c 100644
--- a/examples/games/breakout.rs
+++ b/examples/games/breakout.rs
@@ -210,7 +210,7 @@ fn setup(
     // Scoreboard
     commands.spawn((
         Text::new("Score: "),
-        TextFont {
+        FontFace {
             font_size: SCOREBOARD_FONT_SIZE,
             ..default()
         },
@@ -223,8 +223,8 @@ fn setup(
             ..default()
         },
         children![(
-            TextSpan::default(),
-            TextFont {
+            Text::default(),
+            FontFace {
                 font_size: SCOREBOARD_FONT_SIZE,
                 ..default()
             },
diff --git a/examples/games/contributors.rs b/examples/games/contributors.rs
index 24dc1445628d3..34da13dd0ab31 100644
--- a/examples/games/contributors.rs
+++ b/examples/games/contributors.rs
@@ -138,7 +138,7 @@ fn setup_contributor_selection(
 fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     commands.spawn(Camera2d);
 
-    let text_style = TextFont {
+    let text_style = FontFace {
         font: asset_server.load("fonts/FiraSans-Bold.ttf"),
         font_size: 60.0,
         ..default()
@@ -157,8 +157,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
             },
         ))
         .with_child((
-            TextSpan::default(),
-            TextFont {
+            Text::default(),
+            FontFace {
                 font_size: 30.,
                 ..text_style
             },
diff --git a/examples/games/desk_toy.rs b/examples/games/desk_toy.rs
index 8c066d2575ba3..092acd76a841f 100644
--- a/examples/games/desk_toy.rs
+++ b/examples/games/desk_toy.rs
@@ -107,7 +107,7 @@ fn setup(
 
     // Spawn the text instructions
     let font = asset_server.load("fonts/FiraSans-Bold.ttf");
-    let text_style = TextFont {
+    let text_style = FontFace {
         font: font.clone(),
         font_size: 25.0,
         ..default()
diff --git a/examples/games/game_menu.rs b/examples/games/game_menu.rs
index 59a09cf319dbb..dd3e624690375 100644
--- a/examples/games/game_menu.rs
+++ b/examples/games/game_menu.rs
@@ -158,10 +158,7 @@ mod game {
                 children![
                     (
                         Text::new("Will be back to the menu shortly..."),
-                        TextFont {
-                            font_size: 67.0,
-                            ..default()
-                        },
+                        FontSize::Px(67.0),
                         TextColor(TEXT_COLOR),
                         Node {
                             margin: UiRect::all(px(50)),
@@ -170,33 +167,20 @@ mod game {
                     ),
                     (
                         Text::default(),
+                        FontSize::Px(50.0),
                         Node {
                             margin: UiRect::all(px(50)),
                             ..default()
                         },
                         children![
                             (
-                                TextSpan(format!("quality: {:?}", *display_quality)),
-                                TextFont {
-                                    font_size: 50.0,
-                                    ..default()
-                                },
+                                Text(format!("quality: {:?}", *display_quality)),
+                                FontSize::Px(50.0),
                                 TextColor(BLUE.into()),
                             ),
+                            (Text::new(" - "), TextColor(TEXT_COLOR),),
                             (
-                                TextSpan::new(" - "),
-                                TextFont {
-                                    font_size: 50.0,
-                                    ..default()
-                                },
-                                TextColor(TEXT_COLOR),
-                            ),
-                            (
-                                TextSpan(format!("volume: {:?}", *volume)),
-                                TextFont {
-                                    font_size: 50.0,
-                                    ..default()
-                                },
+                                Text(format!("volume: {:?}", *volume)),
                                 TextColor(LIME.into()),
                             ),
                         ]
@@ -373,10 +357,7 @@ mod menu {
             left: px(10),
             ..default()
         };
-        let button_text_font = TextFont {
-            font_size: 33.0,
-            ..default()
-        };
+        let button_text_font = FontSize::Px(33.);
 
         let right_icon = asset_server.load("textures/Game Icons/right.png");
         let wrench_icon = asset_server.load("textures/Game Icons/wrench.png");
@@ -403,10 +384,7 @@ mod menu {
                     // Display the game name
                     (
                         Text::new("Bevy Game Menu UI"),
-                        TextFont {
-                            font_size: 67.0,
-                            ..default()
-                        },
+                        FontSize::Px(67.0),
                         TextColor(TEXT_COLOR),
                         Node {
                             margin: UiRect::all(px(50)),
@@ -470,14 +448,6 @@ mod menu {
             ..default()
         };
 
-        let button_text_style = (
-            TextFont {
-                font_size: 33.0,
-                ..default()
-            },
-            TextColor(TEXT_COLOR),
-        );
-
         commands.spawn((
             DespawnOnExit(MenuState::Settings),
             Node {
@@ -487,6 +457,9 @@ mod menu {
                 justify_content: JustifyContent::Center,
                 ..default()
             },
+            FontSize::Px(33.0),
+            TextColor(TEXT_COLOR),
+            BackgroundColor(CRIMSON.into()),
             OnSettingsMenuScreen,
             children![(
                 Node {
@@ -494,7 +467,6 @@ mod menu {
                     align_items: AlignItems::Center,
                     ..default()
                 },
-                BackgroundColor(CRIMSON.into()),
                 Children::spawn(SpawnIter(
                     [
                         (MenuButtonAction::SettingsDisplay, "Display"),
@@ -508,7 +480,7 @@ mod menu {
                             button_node.clone(),
                             BackgroundColor(NORMAL_BUTTON),
                             action,
-                            children![(Text::new(text), button_text_style.clone())],
+                            children![(Text::new(text))],
                         )
                     })
                 ))
@@ -527,15 +499,6 @@ mod menu {
                 ..default()
             }
         }
-        fn button_text_style() -> impl Bundle {
-            (
-                TextFont {
-                    font_size: 33.0,
-                    ..default()
-                },
-                TextColor(TEXT_COLOR),
-            )
-        }
 
         let display_quality = *display_quality;
         commands.spawn((
@@ -547,6 +510,8 @@ mod menu {
                 justify_content: JustifyContent::Center,
                 ..default()
             },
+            FontSize::Px(33.),
+            TextColor(TEXT_COLOR),
             OnDisplaySettingsMenuScreen,
             children![(
                 Node {
@@ -566,7 +531,7 @@ mod menu {
                         BackgroundColor(CRIMSON.into()),
                         Children::spawn((
                             // Display a label for the current setting
-                            Spawn((Text::new("Display Quality"), button_text_style())),
+                            Spawn(Text::new("Display Quality")),
                             SpawnWith(move |parent: &mut ChildSpawner| {
                                 for quality_setting in [
                                     DisplayQuality::Low,
@@ -582,10 +547,7 @@ mod menu {
                                         },
                                         BackgroundColor(NORMAL_BUTTON),
                                         quality_setting,
-                                        children![(
-                                            Text::new(format!("{quality_setting:?}")),
-                                            button_text_style(),
-                                        )],
+                                        children![(Text::new(format!("{quality_setting:?}")),)],
                                     ));
                                     if display_quality == quality_setting {
                                         entity.insert(SelectedOption);
@@ -600,7 +562,7 @@ mod menu {
                         button_node(),
                         BackgroundColor(NORMAL_BUTTON),
                         MenuButtonAction::BackToSettings,
-                        children![(Text::new("Back"), button_text_style())]
+                        children![(Text::new("Back"))]
                     )
                 ]
             )],
@@ -616,13 +578,6 @@ mod menu {
             align_items: AlignItems::Center,
             ..default()
         };
-        let button_text_style = (
-            TextFont {
-                font_size: 33.0,
-                ..default()
-            },
-            TextColor(TEXT_COLOR),
-        );
 
         let volume = *volume;
         let button_node_clone = button_node.clone();
@@ -635,6 +590,8 @@ mod menu {
                 justify_content: JustifyContent::Center,
                 ..default()
             },
+            FontSize::Px(33.),
+            TextColor(TEXT_COLOR),
             OnSoundSettingsMenuScreen,
             children![(
                 Node {
@@ -651,7 +608,7 @@ mod menu {
                         },
                         BackgroundColor(CRIMSON.into()),
                         Children::spawn((
-                            Spawn((Text::new("Volume"), button_text_style.clone())),
+                            Spawn(Text::new("Volume")),
                             SpawnWith(move |parent: &mut ChildSpawner| {
                                 for volume_setting in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] {
                                     let mut entity = parent.spawn((
@@ -676,7 +633,7 @@ mod menu {
                         button_node,
                         BackgroundColor(NORMAL_BUTTON),
                         MenuButtonAction::BackToSettings,
-                        children![(Text::new("Back"), button_text_style)]
+                        children![Text::new("Back")]
                     )
                 ]
             )],
diff --git a/examples/games/loading_screen.rs b/examples/games/loading_screen.rs
index 5f9e4c5c6bd76..6e8858a15b342 100644
--- a/examples/games/loading_screen.rs
+++ b/examples/games/loading_screen.rs
@@ -77,7 +77,7 @@ fn setup(mut commands: Commands) {
     commands.insert_resource(level_data);
 
     // Spawns the UI that will show the user prompts.
-    let text_style = TextFont {
+    let text_style = FontFace {
         font_size: 42.0,
         ..default()
     };
@@ -228,7 +228,7 @@ struct LoadingScreen;
 
 // Spawns the necessary components for the loading screen.
 fn load_loading_screen(mut commands: Commands) {
-    let text_style = TextFont {
+    let text_style = FontFace {
         font_size: 67.0,
         ..default()
     };
diff --git a/examples/games/stepping.rs b/examples/games/stepping.rs
index f1e71bcedbc9a..0b4191da193a0 100644
--- a/examples/games/stepping.rs
+++ b/examples/games/stepping.rs
@@ -118,11 +118,8 @@ fn build_ui(
     for label in schedule_order {
         let schedule = schedules.get(*label).unwrap();
         text_spans.push((
-            TextSpan(format!("{label:?}\n")),
-            TextFont {
-                font: asset_server.load(FONT_BOLD),
-                ..default()
-            },
+            Text(format!("{label:?}\n")),
+            FontFace(asset_server.load(FONT_BOLD)),
             TextColor(FONT_COLOR),
         ));
 
@@ -148,16 +145,12 @@ fn build_ui(
                 .push((*label, NodeId::System(key), text_spans.len() + 1));
 
             // Add a text section for displaying the cursor for this system
-            text_spans.push((
-                TextSpan::new("   "),
-                TextFont::default(),
-                TextColor(FONT_COLOR),
-            ));
+            text_spans.push((Text::new("   "), FontFace::default(), TextColor(FONT_COLOR)));
 
             // add the name of the system to the ui
             text_spans.push((
-                TextSpan(format!("{}\n", system.name())),
-                TextFont::default(),
+                Text(format!("{}\n", system.name())),
+                FontFace::default(),
                 TextColor(FONT_COLOR),
             ));
         }
@@ -193,10 +186,6 @@ fn build_stepping_hint(mut commands: Commands) {
     // stepping description box
     commands.spawn((
         Text::new(hint_text),
-        TextFont {
-            font_size: 15.0,
-            ..default()
-        },
         TextColor(FONT_COLOR),
         Node {
             position_type: PositionType::Absolute,
diff --git a/examples/gltf/load_gltf_extras.rs b/examples/gltf/load_gltf_extras.rs
index f9102106c0e0b..931316b811a80 100644
--- a/examples/gltf/load_gltf_extras.rs
+++ b/examples/gltf/load_gltf_extras.rs
@@ -35,10 +35,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     // a place to display the extras on screen
     commands.spawn((
         Text::default(),
-        TextFont {
-            font_size: 15.,
-            ..default()
-        },
+        FontSize::Px(15.),
         Node {
             position_type: PositionType::Absolute,
             top: px(12),
diff --git a/examples/helpers/widgets.rs b/examples/helpers/widgets.rs
index 041ffaa59f5d8..9732f4dff38f8 100644
--- a/examples/helpers/widgets.rs
+++ b/examples/helpers/widgets.rs
@@ -154,7 +154,7 @@ where
 pub fn ui_text(label: &str, color: Color) -> impl Bundle + use<> {
     (
         Text::new(label),
-        TextFont {
+        FontFace {
             font_size: 18.0,
             ..default()
         },
diff --git a/examples/input/text_input.rs b/examples/input/text_input.rs
index b5f04241c750e..79887d4c1007f 100644
--- a/examples/input/text_input.rs
+++ b/examples/input/text_input.rs
@@ -43,15 +43,15 @@ fn setup_scene(mut commands: Commands, asset_server: Res<AssetServer>) {
             ..default()
         },
         children![
-            TextSpan::new("Click to toggle IME. Press return to start a new line.\n\n",),
-            TextSpan::new("IME Enabled: "),
-            TextSpan::new("false\n"),
-            TextSpan::new("IME Active:  "),
-            TextSpan::new("false\n"),
-            TextSpan::new("IME Buffer:  "),
+            Text::new("Click to toggle IME. Press return to start a new line.\n\n",),
+            Text::new("IME Enabled: "),
+            Text::new("false\n"),
+            Text::new("IME Active:  "),
+            Text::new("false\n"),
+            Text::new("IME Buffer:  "),
             (
-                TextSpan::new("\n"),
-                TextFont {
+                Text::new("\n"),
+                FontFace {
                     font: font.clone(),
                     ..default()
                 },
@@ -61,7 +61,7 @@ fn setup_scene(mut commands: Commands, asset_server: Res<AssetServer>) {
 
     commands.spawn((
         Text2d::new(""),
-        TextFont {
+        FontFace {
             font,
             font_size: 100.0,
             ..default()
@@ -132,7 +132,7 @@ fn listen_ime_events(
 fn listen_keyboard_input_events(
     mut commands: Commands,
     mut keyboard_input_reader: MessageReader<KeyboardInput>,
-    edit_text: Single<(&mut Text2d, &TextFont), (Without<Node>, Without<Bubble>)>,
+    edit_text: Single<(&mut Text2d, &FontFace), (Without<Node>, Without<Bubble>)>,
 ) {
     let (mut text, style) = edit_text.into_inner();
     for keyboard_input in keyboard_input_reader.read() {
diff --git a/examples/math/cubic_splines.rs b/examples/math/cubic_splines.rs
index dbbce26c797c2..f196313d8822c 100644
--- a/examples/math/cubic_splines.rs
+++ b/examples/math/cubic_splines.rs
@@ -75,7 +75,7 @@ fn setup(mut commands: Commands) {
         C: Toggle cyclic curve construction";
     let spline_mode_text = format!("Spline: {spline_mode}");
     let cycling_mode_text = format!("{cycling_mode}");
-    let style = TextFont::default();
+    let style = FontFace::default();
 
     commands
         .spawn(Node {
diff --git a/examples/math/render_primitives.rs b/examples/math/render_primitives.rs
index b33700ea18157..70ab3c6691609 100644
--- a/examples/math/render_primitives.rs
+++ b/examples/math/render_primitives.rs
@@ -354,15 +354,15 @@ fn setup_text(mut commands: Commands, cameras: Query<(Entity, &Camera)>) {
             HeaderText,
             TextLayout::new_with_justify(Justify::Center),
             children![
-                TextSpan::new("Primitive: "),
-                TextSpan(format!("{text}", text = PrimitiveSelected::default())),
-                TextSpan::new("\n\n"),
-                TextSpan::new(
+                Text::new("Primitive: "),
+                Text(format!("{text}", text = PrimitiveSelected::default())),
+                Text::new("\n\n"),
+                Text::new(
                     "Press 'C' to switch between 2D and 3D mode\n\
                     Press 'Up' or 'Down' to switch to the next/previous primitive",
                 ),
-                TextSpan::new("\n\n"),
-                TextSpan::new("(If nothing is displayed, there's no rendering support yet)",),
+                Text::new("\n\n"),
+                Text::new("(If nothing is displayed, there's no rendering support yet)",),
             ]
         )],
     ));
diff --git a/examples/mobile/src/lib.rs b/examples/mobile/src/lib.rs
index b70da4c672a0f..9797e44f1ce2a 100644
--- a/examples/mobile/src/lib.rs
+++ b/examples/mobile/src/lib.rs
@@ -153,10 +153,7 @@ fn setup_scene(
         ))
         .with_child((
             Text::new("Test Button"),
-            TextFont {
-                font_size: 30.0,
-                ..default()
-            },
+            FontSize::Px(30.),
             TextColor::BLACK,
             TextLayout::new_with_justify(Justify::Center),
         ));
diff --git a/examples/movement/physics_in_fixed_timestep.rs b/examples/movement/physics_in_fixed_timestep.rs
index eee2914356484..3f37315a3963a 100644
--- a/examples/movement/physics_in_fixed_timestep.rs
+++ b/examples/movement/physics_in_fixed_timestep.rs
@@ -222,10 +222,6 @@ fn spawn_environment(
 
 /// Spawn a bit of UI text to explain how to move the player.
 fn spawn_text(mut commands: Commands) {
-    let font = TextFont {
-        font_size: 25.0,
-        ..default()
-    };
     commands.spawn((
         Node {
             position_type: PositionType::Absolute,
@@ -234,9 +230,10 @@ fn spawn_text(mut commands: Commands) {
             flex_direction: FlexDirection::Column,
             ..default()
         },
+        FontSize::Px(25.),
         children![
-            (Text::new("Move the player with WASD"), font.clone()),
-            (Text::new("Rotate the camera with the mouse"), font)
+            (Text::new("Move the player with WASD")),
+            (Text::new("Rotate the camera with the mouse"))
         ],
     ));
 }
diff --git a/examples/scene/scene.rs b/examples/scene/scene.rs
index 2fba727a82f9a..39f89b790b9a2 100644
--- a/examples/scene/scene.rs
+++ b/examples/scene/scene.rs
@@ -213,10 +213,7 @@ fn infotext_system(mut commands: Commands) {
     commands.spawn(Camera2d);
     commands.spawn((
         Text::new("Nothing to see in this window! Check the console output!"),
-        TextFont {
-            font_size: 42.0,
-            ..default()
-        },
+        FontSize::Px(42.),
         Node {
             align_self: AlignSelf::FlexEnd,
             ..default()
diff --git a/examples/shader/shader_prepass.rs b/examples/shader/shader_prepass.rs
index 58b6bf7ed7360..3e61dbddc536b 100644
--- a/examples/shader/shader_prepass.rs
+++ b/examples/shader/shader_prepass.rs
@@ -16,6 +16,9 @@ use bevy::{
 const PREPASS_SHADER_ASSET_PATH: &str = "shaders/show_prepass.wgsl";
 const MATERIAL_SHADER_ASSET_PATH: &str = "shaders/custom_material.wgsl";
 
+#[derive(Component)]
+struct PrepassOutputLabel;
+
 fn main() {
     App::new()
         .add_plugins((
@@ -122,6 +125,7 @@ fn setup(
 
     commands.spawn((
         Text::default(),
+        TextColor(Color::WHITE),
         Node {
             position_type: PositionType::Absolute,
             top: px(12),
@@ -129,11 +133,11 @@ fn setup(
             ..default()
         },
         children![
-            TextSpan::new("Prepass Output: transparent\n"),
-            TextSpan::new("\n\n"),
-            TextSpan::new("Controls\n"),
-            TextSpan::new("---------------\n"),
-            TextSpan::new("Space - Change output\n"),
+            Text::new("Prepass Output: transparent\n"),
+            (Text::new("\n\n"), PrepassOutputLabel),
+            Text::new("Controls\n"),
+            Text::new("---------------\n"),
+            Text::new("Space - Change output\n"),
         ],
     ));
 }
@@ -214,8 +218,8 @@ fn toggle_prepass_view(
     keycode: Res<ButtonInput<KeyCode>>,
     material_handle: Single<&MeshMaterial3d<PrepassOutputMaterial>>,
     mut materials: ResMut<Assets<PrepassOutputMaterial>>,
-    text: Single<Entity, With<Text>>,
-    mut writer: TextUiWriter,
+    query: Query<Entity, With<PrepassOutputLabel>>,
+    mut commands: Commands,
 ) {
     if keycode.just_pressed(KeyCode::Space) {
         *prepass_view = (*prepass_view + 1) % 4;
@@ -227,11 +231,11 @@ fn toggle_prepass_view(
             3 => "motion vectors",
             _ => unreachable!(),
         };
-        let text = *text;
-        *writer.text(text, 1) = format!("Prepass Output: {label}\n");
-        writer.for_each_color(text, |mut color| {
-            color.0 = Color::WHITE;
-        });
+
+        let entity = query.single().unwrap();
+        commands
+            .entity(entity)
+            .insert(Text(format!("Prepass Output: {label}\n")));
 
         let mat = materials.get_mut(*material_handle).unwrap();
         mat.settings.show_depth = (*prepass_view == 1) as u32;
diff --git a/examples/state/computed_states.rs b/examples/state/computed_states.rs
index 7e98acacc4bba..528e6bb67f4f5 100644
--- a/examples/state/computed_states.rs
+++ b/examples/state/computed_states.rs
@@ -357,7 +357,7 @@ mod ui {
                         MenuButton::Play,
                         children![(
                             Text::new("Play"),
-                            TextFont {
+                            FontFace {
                                 font_size: 33.0,
                                 ..default()
                             },
@@ -382,7 +382,7 @@ mod ui {
                         MenuButton::Tutorial,
                         children![(
                             Text::new("Tutorial"),
-                            TextFont {
+                            FontFace {
                                 font_size: 33.0,
                                 ..default()
                             },
@@ -469,7 +469,7 @@ mod ui {
                 MenuButton::Play,
                 children![(
                     Text::new("Paused"),
-                    TextFont {
+                    FontFace {
                         font_size: 33.0,
                         ..default()
                     },
@@ -495,7 +495,7 @@ mod ui {
             },
             children![(
                 Text::new("TURBO MODE"),
-                TextFont {
+                FontFace {
                     font_size: 33.0,
                     ..default()
                 },
@@ -532,7 +532,7 @@ mod ui {
             children![
                 (
                     Text::new("Move the bevy logo with the arrow keys"),
-                    TextFont {
+                    FontFace {
                         font_size: 33.0,
                         ..default()
                     },
@@ -540,7 +540,7 @@ mod ui {
                 ),
                 (
                     Text::new("Press T to enter TURBO MODE"),
-                    TextFont {
+                    FontFace {
                         font_size: 33.0,
                         ..default()
                     },
@@ -548,7 +548,7 @@ mod ui {
                 ),
                 (
                     Text::new("Press SPACE to pause"),
-                    TextFont {
+                    FontFace {
                         font_size: 33.0,
                         ..default()
                     },
@@ -556,7 +556,7 @@ mod ui {
                 ),
                 (
                     Text::new("Press ESCAPE to return to the menu"),
-                    TextFont {
+                    FontFace {
                         font_size: 33.0,
                         ..default()
                     },
@@ -583,7 +583,7 @@ mod ui {
             children![
                 (
                     Text::new("Press SPACE to resume"),
-                    TextFont {
+                    FontFace {
                         font_size: 33.0,
                         ..default()
                     },
@@ -591,7 +591,7 @@ mod ui {
                 ),
                 (
                     Text::new("Press ESCAPE to return to the menu"),
-                    TextFont {
+                    FontFace {
                         font_size: 33.0,
                         ..default()
                     },
diff --git a/examples/state/custom_transitions.rs b/examples/state/custom_transitions.rs
index b20f1e4e42a2e..82dbe094d7243 100644
--- a/examples/state/custom_transitions.rs
+++ b/examples/state/custom_transitions.rs
@@ -266,7 +266,7 @@ fn setup_menu(mut commands: Commands) {
                 BackgroundColor(NORMAL_BUTTON),
                 children![(
                     Text::new("Play"),
-                    TextFont {
+                    FontFace {
                         font_size: 33.0,
                         ..default()
                     },
diff --git a/examples/state/states.rs b/examples/state/states.rs
index 699e38d7248e6..581e93e121607 100644
--- a/examples/state/states.rs
+++ b/examples/state/states.rs
@@ -74,7 +74,7 @@ fn setup_menu(mut commands: Commands) {
                 BackgroundColor(NORMAL_BUTTON),
                 children![(
                     Text::new("Play"),
-                    TextFont {
+                    FontFace {
                         font_size: 33.0,
                         ..default()
                     },
diff --git a/examples/state/sub_states.rs b/examples/state/sub_states.rs
index 20d9898968ea9..15a326ad57321 100644
--- a/examples/state/sub_states.rs
+++ b/examples/state/sub_states.rs
@@ -179,7 +179,7 @@ mod ui {
                     BackgroundColor(NORMAL_BUTTON),
                     children![(
                         Text::new("Play"),
-                        TextFont {
+                        FontFace {
                             font_size: 33.0,
                             ..default()
                         },
@@ -221,7 +221,7 @@ mod ui {
                 BackgroundColor(NORMAL_BUTTON),
                 children![(
                     Text::new("Paused"),
-                    TextFont {
+                    FontFace {
                         font_size: 33.0,
                         ..default()
                     },
diff --git a/examples/stress_tests/bevymark.rs b/examples/stress_tests/bevymark.rs
index f133a3b2a438c..fdbc44342e7fe 100644
--- a/examples/stress_tests/bevymark.rs
+++ b/examples/stress_tests/bevymark.rs
@@ -210,6 +210,17 @@ struct BirdResources {
 #[derive(Component)]
 struct StatsText;
 
+#[derive(Component)]
+struct CountText;
+#[derive(Component)]
+struct RawText;
+
+#[derive(Component)]
+struct SmaText;
+
+#[derive(Component)]
+struct EmaText;
+
 fn setup(
     mut commands: Commands,
     args: Res<Args>,
@@ -246,11 +257,6 @@ fn setup(
         transform_rng: ChaCha8Rng::seed_from_u64(42),
     };
 
-    let font = TextFont {
-        font_size: 40.0,
-        ..Default::default()
-    };
-
     commands.spawn(Camera2d);
     commands
         .spawn((
@@ -259,35 +265,20 @@ fn setup(
                 padding: UiRect::all(px(5)),
                 ..default()
             },
+            FontSize::Px(40.0),
             BackgroundColor(Color::BLACK.with_alpha(0.75)),
             GlobalZIndex(i32::MAX),
         ))
         .with_children(|p| {
             p.spawn((Text::default(), StatsText)).with_children(|p| {
-                p.spawn((
-                    TextSpan::new("Bird Count: "),
-                    font.clone(),
-                    TextColor(LIME.into()),
-                ));
-                p.spawn((TextSpan::new(""), font.clone(), TextColor(AQUA.into())));
-                p.spawn((
-                    TextSpan::new("\nFPS (raw): "),
-                    font.clone(),
-                    TextColor(LIME.into()),
-                ));
-                p.spawn((TextSpan::new(""), font.clone(), TextColor(AQUA.into())));
-                p.spawn((
-                    TextSpan::new("\nFPS (SMA): "),
-                    font.clone(),
-                    TextColor(LIME.into()),
-                ));
-                p.spawn((TextSpan::new(""), font.clone(), TextColor(AQUA.into())));
-                p.spawn((
-                    TextSpan::new("\nFPS (EMA): "),
-                    font.clone(),
-                    TextColor(LIME.into()),
-                ));
-                p.spawn((TextSpan::new(""), font.clone(), TextColor(AQUA.into())));
+                p.spawn((Text::new("Bird Count: "), TextColor(LIME.into())));
+                p.spawn((Text::new(""), CountText, TextColor(AQUA.into())));
+                p.spawn((Text::new("\nFPS (raw): "), TextColor(LIME.into())));
+                p.spawn((Text::new(""), RawText, TextColor(AQUA.into())));
+                p.spawn((Text::new("\nFPS (SMA): "), TextColor(LIME.into())));
+                p.spawn((Text::new(""), SmaText, TextColor(AQUA.into())));
+                p.spawn((Text::new("\nFPS (EMA): "), TextColor(LIME.into())));
+                p.spawn((Text::new(""), EmaText, TextColor(AQUA.into())));
             });
         });
 
@@ -540,26 +531,35 @@ fn collision_system(window: Query<&Window>, mut bird_query: Query<(&mut Bird, &T
 }
 
 fn counter_system(
+    mut commands: Commands,
     diagnostics: Res<DiagnosticsStore>,
     counter: Res<BevyCounter>,
-    query: Single<Entity, With<StatsText>>,
-    mut writer: TextUiWriter,
+    count_query: Query<Entity, With<CountText>>,
+    raw_query: Query<Entity, With<RawText>>,
+    sma_query: Query<Entity, With<SmaText>>,
+    ema_query: Query<Entity, With<EmaText>>,
 ) {
-    let text = *query;
-
     if counter.is_changed() {
-        *writer.text(text, 2) = counter.count.to_string();
+        commands
+            .entity(count_query.single().unwrap())
+            .insert(Text(counter.count.to_string()));
     }
 
     if let Some(fps) = diagnostics.get(&FrameTimeDiagnosticsPlugin::FPS) {
         if let Some(raw) = fps.value() {
-            *writer.text(text, 4) = format!("{raw:.2}");
+            commands
+                .entity(raw_query.single().unwrap())
+                .insert(Text(format!("{raw:.2}")));
         }
         if let Some(sma) = fps.average() {
-            *writer.text(text, 6) = format!("{sma:.2}");
+            commands
+                .entity(sma_query.single().unwrap())
+                .insert(Text(format!("{sma:.2}")));
         }
         if let Some(ema) = fps.smoothed() {
-            *writer.text(text, 8) = format!("{ema:.2}");
+            commands
+                .entity(ema_query.single().unwrap())
+                .insert(Text(format!("{ema:.2}")));
         }
     };
 }
diff --git a/examples/stress_tests/many_buttons.rs b/examples/stress_tests/many_buttons.rs
index 01ea9f8f8b82a..0c8f86c6956f9 100644
--- a/examples/stress_tests/many_buttons.rs
+++ b/examples/stress_tests/many_buttons.rs
@@ -300,18 +300,12 @@ fn spawn_button(
             parent
                 .spawn((
                     Text(format!("{column}, ")),
-                    TextFont {
-                        font_size: FONT_SIZE,
-                        ..default()
-                    },
+                    FontSize::Px(FONT_SIZE),
                     TextColor(Color::srgb(0.5, 0.2, 0.2)),
                 ))
                 .with_child((
-                    TextSpan(format!("{row}")),
-                    TextFont {
-                        font_size: FONT_SIZE,
-                        ..default()
-                    },
+                    Text(format!("{row}")),
+                    FontSize::Px(FONT_SIZE),
                     TextColor(Color::srgb(0.2, 0.2, 0.5)),
                 ));
         });
diff --git a/examples/stress_tests/many_glyphs.rs b/examples/stress_tests/many_glyphs.rs
index e3db576468506..66a66bbc04de9 100644
--- a/examples/stress_tests/many_glyphs.rs
+++ b/examples/stress_tests/many_glyphs.rs
@@ -66,10 +66,7 @@ fn setup(mut commands: Commands, args: Res<Args>) {
 
     commands.spawn(Camera2d);
     let text_string = "0123456789".repeat(10_000);
-    let text_font = TextFont {
-        font_size: 4.,
-        ..Default::default()
-    };
+    let font_sizetext_font = FontSize::Px(4.);
     let text_block = TextLayout {
         justify: Justify::Left,
         linebreak: LineBreak::AnyCharacter,
@@ -89,14 +86,18 @@ fn setup(mut commands: Commands, args: Res<Args>) {
                         width: px(1000),
                         ..Default::default()
                     })
-                    .with_child((Text(text_string.clone()), text_font.clone(), text_block));
+                    .with_child((
+                        Text(text_string.clone()),
+                        font_sizetext_font.clone(),
+                        text_block,
+                    ));
             });
     }
 
     if !args.no_text2d {
         commands.spawn((
             Text2d::new(text_string),
-            text_font.clone(),
+            font_sizetext_font.clone(),
             TextColor(RED.into()),
             bevy::sprite::Anchor::CENTER,
             TextBounds::new_horizontal(1000.),
diff --git a/examples/stress_tests/many_text2d.rs b/examples/stress_tests/many_text2d.rs
index 85db41cda6450..903e34a988298 100644
--- a/examples/stress_tests/many_text2d.rs
+++ b/examples/stress_tests/many_text2d.rs
@@ -193,18 +193,13 @@ fn print_counts(
     );
 }
 
-fn random_text_font(rng: &mut ChaCha8Rng, args: &Args, font: Handle<Font>) -> TextFont {
+fn random_text_font(rng: &mut ChaCha8Rng, args: &Args, font: Handle<Font>) -> (FontFace, FontSize) {
     let font_size = if args.many_font_sizes {
         *[10.0, 20.0, 30.0, 40.0, 50.0, 60.0].choose(rng).unwrap()
     } else {
         60.0
     };
-
-    TextFont {
-        font_size,
-        font,
-        ..default()
-    }
+    (FontFace(font), FontSize::Px(font_size))
 }
 
 fn random_text(rng: &mut ChaCha8Rng, args: &Args) -> String {
diff --git a/examples/stress_tests/text_pipeline.rs b/examples/stress_tests/text_pipeline.rs
index f2c43cb162978..6b252b0dda671 100644
--- a/examples/stress_tests/text_pipeline.rs
+++ b/examples/stress_tests/text_pipeline.rs
@@ -39,21 +39,15 @@ fn spawn(mut commands: Commands, asset_server: Res<AssetServer>) {
     let make_spans = |i| {
         [
             (
-                TextSpan("text".repeat(i)),
-                TextFont {
-                    font: asset_server.load("fonts/FiraMono-Medium.ttf"),
-                    font_size: (4 + i % 10) as f32,
-                    ..Default::default()
-                },
+                Text2d("text".repeat(i)),
+                FontFace(asset_server.load("fonts/FiraMono-Medium.ttf")),
+                FontSize::Px((4 + i % 10) as f32),
                 TextColor(BLUE.into()),
             ),
             (
-                TextSpan("pipeline".repeat(i)),
-                TextFont {
-                    font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-                    font_size: (4 + i % 11) as f32,
-                    ..default()
-                },
+                Text2d("pipeline".repeat(i)),
+                FontFace(asset_server.load("fonts/FiraSans-Bold.ttf")),
+                FontSize::Px((4 + i % 11) as f32),
                 TextColor(YELLOW.into()),
             ),
         ]
diff --git a/examples/testbed/2d.rs b/examples/testbed/2d.rs
index 0a10ee04e408d..303517243293d 100644
--- a/examples/testbed/2d.rs
+++ b/examples/testbed/2d.rs
@@ -166,7 +166,7 @@ mod text {
             );
         }
 
-        let sans_serif = TextFont::from(asset_server.load("fonts/FiraSans-Bold.ttf"));
+        let sans_serif = FontFace::from(asset_server.load("fonts/FiraSans-Bold.ttf"));
 
         const NUM_ITERATIONS: usize = 10;
         for i in 0..NUM_ITERATIONS {
@@ -223,13 +223,13 @@ mod text {
                 },
                 children![
                     (
-                        TextSpan::new(format!("{}, {}\n", anchor.x, anchor.y)),
-                        TextFont::from_font_size(14.0),
+                        Text2d(format!("{}, {}\n", anchor.x, anchor.y)),
+                        FontSize::Px(14.0),
                         TextColor(palettes::tailwind::BLUE_400.into()),
                     ),
                     (
-                        TextSpan::new(format!("{justify:?}")),
-                        TextFont::from_font_size(14.0),
+                        Text2d(format!("{justify:?}")),
+                        FontSize::Px(14.0),
                         TextColor(palettes::tailwind::GREEN_400.into()),
                     ),
                 ],
diff --git a/examples/testbed/full_ui.rs b/examples/testbed/full_ui.rs
index e8644c24e2563..5684f87d16fd0 100644
--- a/examples/testbed/full_ui.rs
+++ b/examples/testbed/full_ui.rs
@@ -70,7 +70,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                             // text
                             parent.spawn((
                                 Text::new("Text Example"),
-                                TextFont {
+                                FontFace {
                                     font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                                     font_size: 25.0,
                                     ..default()
@@ -86,7 +86,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                                 // Debug overlay text
                                 parent.spawn((
                                     Text::new("Press Space to toggle debug outlines."),
-                                    TextFont {
+                                    FontFace {
                                         font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                                         ..default()
                                     },
@@ -95,7 +95,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
 
                                 parent.spawn((
                                     Text::new("V: toggle UI root's visibility"),
-                                    TextFont {
+                                    FontFace {
                                         font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                                         font_size: 12.,
                                         ..default()
@@ -105,7 +105,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
 
                                 parent.spawn((
                                     Text::new("S: toggle outlines for hidden nodes"),
-                                    TextFont {
+                                    FontFace {
                                         font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                                         font_size: 12.,
                                         ..default()
@@ -114,7 +114,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                                 ));
                                 parent.spawn((
                                     Text::new("C: toggle outlines for clipped nodes"),
-                                    TextFont {
+                                    FontFace {
                                         font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                                         font_size: 12.,
                                         ..default()
@@ -125,7 +125,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                             #[cfg(not(feature = "bevy_ui_debug"))]
                             parent.spawn((
                                 Text::new("Try enabling feature \"bevy_ui_debug\"."),
-                                TextFont {
+                                FontFace {
                                     font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                                     ..default()
                                 },
@@ -146,7 +146,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                     // Title
                     parent.spawn((
                         Text::new("Scrolling list"),
-                        TextFont {
+                        FontFace {
                             font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                             font_size: 21.,
                             ..default()
@@ -187,7 +187,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                                         parent
                                             .spawn((
                                                 Text(format!("Item {i}")),
-                                                TextFont {
+                                                FontFace {
                                                     font: asset_server
                                                         .load("fonts/FiraSans-Bold.ttf"),
                                                     ..default()
diff --git a/examples/testbed/ui.rs b/examples/testbed/ui.rs
index 6dc2cbe6d7933..b339951856fa0 100644
--- a/examples/testbed/ui.rs
+++ b/examples/testbed/ui.rs
@@ -95,11 +95,8 @@ mod text {
         commands.spawn((Camera2d, DespawnOnExit(super::Scene::Text)));
         commands.spawn((
             Text::new("Hello World."),
-            TextFont {
-                font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-                font_size: 200.,
-                ..default()
-            },
+            FontFace(asset_server.load("fonts/FiraSans-Bold.ttf")),
+            FontSize::Px(200.),
             DespawnOnExit(super::Scene::Text),
         ));
 
@@ -110,22 +107,28 @@ mod text {
                 ..Default::default()
             },
             Text::new("white "),
-            TextFont {
-                font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-                ..default()
-            },
+            FontFace(asset_server.load("fonts/FiraSans-Bold.ttf")),
             DespawnOnExit(super::Scene::Text),
             children![
-                (TextSpan::new("red "), TextColor(RED.into()),),
-                (TextSpan::new("green "), TextColor(GREEN.into()),),
-                (TextSpan::new("blue "), TextColor(BLUE.into()),),
                 (
-                    TextSpan::new("black"),
+                    Text::new("red "),
+                    TextColor(RED.into()),
+                    FontFace::default()
+                ),
+                (
+                    Text::new("green "),
+                    TextColor(GREEN.into()),
+                    FontFace::default()
+                ),
+                (
+                    Text::new("blue "),
+                    TextColor(BLUE.into()),
+                    FontFace::default()
+                ),
+                (
+                    Text::new("black"),
                     TextColor(Color::BLACK),
-                    TextFont {
-                        font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-                        ..default()
-                    },
+                    FontFace(asset_server.load("fonts/FiraSans-Bold.ttf")),
                     TextBackgroundColor(Color::WHITE)
                 ),
             ],
@@ -138,29 +141,32 @@ mod text {
                 ..Default::default()
             },
             Text::new(""),
-            TextFont {
-                font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-                ..default()
-            },
+            FontFace(asset_server.load("fonts/FiraSans-Bold.ttf")),
             DespawnOnExit(super::Scene::Text),
             children![
                 (
-                    TextSpan::new("white "),
-                    TextFont {
-                        font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-                        ..default()
-                    }
+                    Text::new("white "),
+                    FontFace(asset_server.load("fonts/FiraSans-Bold.ttf")),
+                ),
+                (
+                    Text::new("red "),
+                    TextColor(RED.into()),
+                    FontFace::default()
                 ),
-                (TextSpan::new("red "), TextColor(RED.into()),),
-                (TextSpan::new("green "), TextColor(GREEN.into()),),
-                (TextSpan::new("blue "), TextColor(BLUE.into()),),
                 (
-                    TextSpan::new("black"),
+                    Text::new("green "),
+                    TextColor(GREEN.into()),
+                    FontFace::default()
+                ),
+                (
+                    Text::new("blue "),
+                    TextColor(BLUE.into()),
+                    FontFace::default()
+                ),
+                (
+                    Text::new("black"),
                     TextColor(Color::BLACK),
-                    TextFont {
-                        font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-                        ..default()
-                    },
+                    FontFace(asset_server.load("fonts/FiraSans-Bold.ttf")),
                     TextBackgroundColor(Color::WHITE)
                 ),
             ],
@@ -173,40 +179,43 @@ mod text {
                 ..Default::default()
             },
             Text::new(""),
-            TextFont {
-                font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-                ..default()
-            },
+            FontFace(asset_server.load("fonts/FiraSans-Bold.ttf")),
             DespawnOnExit(super::Scene::Text),
             children![
-                (TextSpan::new(""), TextColor(YELLOW.into()),),
-                TextSpan::new(""),
+                (Text::new(""), TextColor(YELLOW.into()),),
+                Text::new(""),
                 (
-                    TextSpan::new("white "),
-                    TextFont {
-                        font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-                        ..default()
-                    }
+                    Text::new("white "),
+                    FontFace(asset_server.load("fonts/FiraSans-Bold.ttf")),
+                ),
+                Text::new(""),
+                (
+                    Text::new("red "),
+                    TextColor(RED.into()),
+                    FontFace::default()
+                ),
+                Text::new(""),
+                Text::new(""),
+                (
+                    Text::new("green "),
+                    TextColor(GREEN.into()),
+                    FontFace::default()
                 ),
-                TextSpan::new(""),
-                (TextSpan::new("red "), TextColor(RED.into()),),
-                TextSpan::new(""),
-                TextSpan::new(""),
-                (TextSpan::new("green "), TextColor(GREEN.into()),),
-                (TextSpan::new(""), TextColor(YELLOW.into()),),
-                (TextSpan::new("blue "), TextColor(BLUE.into()),),
-                TextSpan::new(""),
-                (TextSpan::new(""), TextColor(YELLOW.into()),),
+                (Text::new(""), TextColor(YELLOW.into()),),
                 (
-                    TextSpan::new("black"),
+                    Text::new("blue "),
+                    TextColor(BLUE.into()),
+                    FontFace::default()
+                ),
+                Text::new(""),
+                (Text::new(""), TextColor(YELLOW.into()), FontFace::default()),
+                (
+                    Text::new("black"),
                     TextColor(Color::BLACK),
-                    TextFont {
-                        font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-                        ..default()
-                    },
+                    FontFace(asset_server.load("fonts/FiraSans-Bold.ttf")),
                     TextBackgroundColor(Color::WHITE)
                 ),
-                TextSpan::new(""),
+                Text::new(""),
             ],
         ));
     }
@@ -670,7 +679,7 @@ mod linear_gradient {
     use bevy::color::Color;
     use bevy::ecs::prelude::*;
     use bevy::state::state_scoped::DespawnOnExit;
-    use bevy::text::TextFont;
+    use bevy::text::FontSize;
     use bevy::ui::AlignItems;
     use bevy::ui::BackgroundGradient;
     use bevy::ui::ColorStop;
@@ -776,7 +785,7 @@ mod linear_gradient {
                                                 position_type: PositionType::Absolute,
                                                 ..default()
                                             },
-                                            TextFont::from_font_size(10.),
+                                            FontSize::Px(10.),
                                             bevy::ui::widget::Text(format!("{color_space:?}")),
                                         ]
                                     )],
@@ -860,7 +869,7 @@ mod radial_gradient {
                                             ..default()
                                         },
                                         Text(format!("{shape_label}\n{position_label}")),
-                                        TextFont::from_font_size(9.),
+                                        FontSize::Px(9.),
                                     ));
                                     commands.spawn((
                                         Node {
diff --git a/examples/time/virtual_time.rs b/examples/time/virtual_time.rs
index c9c6bd112b65a..4178affcdd8ca 100644
--- a/examples/time/virtual_time.rs
+++ b/examples/time/virtual_time.rs
@@ -73,9 +73,6 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>, mut time: ResMu
         VirtualTime,
     ));
 
-    // info UI
-    let font_size = 33.;
-
     commands.spawn((
         Node {
             display: Display::Flex,
@@ -86,30 +83,16 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>, mut time: ResMu
             padding: UiRect::all(px(20)),
             ..default()
         },
+        FontSize::Px(33.),
         children![
-            (
-                Text::default(),
-                TextFont {
-                    font_size,
-                    ..default()
-                },
-                RealTime,
-            ),
+            (Text::default(), RealTime,),
             (
                 Text::new("CONTROLS\nUn/Pause: Space\nSpeed+: Up\nSpeed-: Down"),
-                TextFont {
-                    font_size,
-                    ..default()
-                },
                 TextColor(Color::srgb(0.85, 0.85, 0.85)),
                 TextLayout::new_with_justify(Justify::Center),
             ),
             (
                 Text::default(),
-                TextFont {
-                    font_size,
-                    ..default()
-                },
                 TextColor(virtual_color),
                 TextLayout::new_with_justify(Justify::Right),
                 VirtualTime,
diff --git a/examples/tools/gamepad_viewer.rs b/examples/tools/gamepad_viewer.rs
index 0686c8fe0c0c2..55ff23bda47df 100644
--- a/examples/tools/gamepad_viewer.rs
+++ b/examples/tools/gamepad_viewer.rs
@@ -269,10 +269,6 @@ fn setup_sticks(
     let live_mid = (live_lower + live_upper) / 2.0;
 
     let mut spawn_stick = |x_pos, y_pos, x_axis, y_axis, button| {
-        let style = TextFont {
-            font_size: 13.,
-            ..default()
-        };
         commands.spawn((
             Transform::from_xyz(x_pos, y_pos, 0.),
             Visibility::default(),
@@ -291,10 +287,11 @@ fn setup_sticks(
                     Transform::from_xyz(0., STICK_BOUNDS_SIZE + 2., 4.),
                     Anchor::BOTTOM_CENTER,
                     TextWithAxes { x_axis, y_axis },
+                    FontSize::Px(13.),
                     children![
-                        (TextSpan(format!("{:.3}", 0.)), style.clone()),
-                        (TextSpan::new(", "), style.clone()),
-                        (TextSpan(format!("{:.3}", 0.)), style),
+                        Text2d(format!("{:.3}", 0.)),
+                        Text2d::new(", "),
+                        Text2d(format!("{:.3}", 0.)),
                     ]
                 ),
                 (
@@ -344,11 +341,8 @@ fn setup_triggers(
             ),
             children![(
                 Transform::from_xyz(0., 0., 1.),
-                Text(format!("{:.3}", 0.)),
-                TextFont {
-                    font_size: 13.,
-                    ..default()
-                },
+                Text2d(format!("{:.3}", 0.)),
+                FontSize::Px(13.),
                 TextWithButtonValue(button_type),
             )],
         ));
@@ -369,7 +363,7 @@ fn setup_connected(mut commands: Commands) {
             ..default()
         },
         ConnectedGamepadsText,
-        children![TextSpan::new("None")],
+        children![Text::new("None")],
     ));
 }
 
diff --git a/examples/tools/scene_viewer/morph_viewer_plugin.rs b/examples/tools/scene_viewer/morph_viewer_plugin.rs
index 404c07d479e32..65ef6a06b524b 100644
--- a/examples/tools/scene_viewer/morph_viewer_plugin.rs
+++ b/examples/tools/scene_viewer/morph_viewer_plugin.rs
@@ -127,8 +127,8 @@ impl fmt::Display for Target {
 }
 
 impl Target {
-    fn text_span(&self, key: &str, style: TextFont) -> (TextSpan, TextFont) {
-        (TextSpan::new(format!("[{key}] {self}\n")), style)
+    fn text_span(&self, key: &str, style: FontFace) -> (Text, FontFace) {
+        (Text::new(format!("[{key}] {self}\n")), style)
     }
     fn new(
         entity_name: Option<&Name>,
@@ -265,13 +265,11 @@ fn detect_morphs(
         detected.extend(targets);
     }
     detected.truncate(AVAILABLE_KEYS.len());
-    let style = TextFont {
-        font_size: FONT_SIZE,
-        ..default()
-    };
+    let style = FontSize::Px(FONT_SIZE);
+
     let mut spans = vec![
-        (TextSpan::new("Morph Target Controls\n"), style.clone()),
-        (TextSpan::new("---------------\n"), style.clone()),
+        (Text::new("Morph Target Controls\n"), style.clone()),
+        (Text::new("---------------\n"), style.clone()),
     ];
     let target_to_text =
         |(i, target): (usize, &Target)| target.text_span(AVAILABLE_KEYS[i].name, style.clone());
diff --git a/examples/ui/borders.rs b/examples/ui/borders.rs
index f87f78dd7e736..c2dabd9be4db1 100644
--- a/examples/ui/borders.rs
+++ b/examples/ui/borders.rs
@@ -135,7 +135,7 @@ fn setup(mut commands: Commands) {
                                 BackgroundColor(YELLOW.into()),
                             )]
                         ),
-                        (Text::new(label), TextFont::from_font_size(9.0))
+                        (Text::new(label), FontSize::Px(9.0))
                     ],
                 )
             },
@@ -204,7 +204,7 @@ fn setup(mut commands: Commands) {
                                 BackgroundColor(YELLOW.into()),
                             )],
                         ),
-                        (Text::new(label), TextFont::from_font_size(9.0))
+                        (Text::new(label), FontSize::Px(9.0))
                     ],
                 )
             },
@@ -237,6 +237,6 @@ fn label(text: &str) -> impl Bundle {
             margin: px(25).all(),
             ..default()
         },
-        children![(Text::new(text), TextFont::from_font_size(20.0))],
+        children![(Text::new(text), FontSize::Px(20.0))],
     )
 }
diff --git a/examples/ui/box_shadow.rs b/examples/ui/box_shadow.rs
index 130134433ba5d..749bb4b51a7a7 100644
--- a/examples/ui/box_shadow.rs
+++ b/examples/ui/box_shadow.rs
@@ -274,11 +274,8 @@ fn setup(
                     SettingsButton::Reset,
                     children![(
                         Text::new("Reset"),
-                        TextFont {
-                            font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-                            font_size: 16.0,
-                            ..default()
-                        },
+                        FontFace(asset_server.load("fonts/FiraSans-Bold.ttf")),
+                        FontSize::Px(16.0),
                     )],
                 )],
             ),
@@ -308,6 +305,8 @@ fn build_setting_row(
             height: px(32),
             ..default()
         },
+        FontFace(asset_server.load("fonts/FiraSans-Bold.ttf")),
+        FontSize::Px(16.0),
         children![
             (
                 Node {
@@ -317,14 +316,7 @@ fn build_setting_row(
                     ..default()
                 },
                 // Attach SettingType to the value label node, not the parent row
-                children![(
-                    Text::new(setting_type.label()),
-                    TextFont {
-                        font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-                        font_size: 16.0,
-                        ..default()
-                    },
-                )],
+                children![(Text::new(setting_type.label()),)],
             ),
             (
                 Button,
@@ -345,11 +337,7 @@ fn build_setting_row(
                     } else {
                         "-"
                     }),
-                    TextFont {
-                        font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-                        font_size: 18.0,
-                        ..default()
-                    },
+                    FontSize::Px(18.0),
                 )],
             ),
             (
@@ -362,17 +350,7 @@ fn build_setting_row(
                     ..default()
                 },
                 BorderRadius::all(px(6)),
-                children![{
-                    (
-                        Text::new(value_text),
-                        TextFont {
-                            font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-                            font_size: 16.0,
-                            ..default()
-                        },
-                        setting_type,
-                    )
-                }],
+                children![{ (Text::new(value_text), setting_type,) }],
             ),
             (
                 Button,
@@ -392,11 +370,7 @@ fn build_setting_row(
                     } else {
                         "+"
                     }),
-                    TextFont {
-                        font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-                        font_size: 18.0,
-                        ..default()
-                    },
+                    FontSize::Px(18.0),
                 )],
             ),
         ],
diff --git a/examples/ui/button.rs b/examples/ui/button.rs
index b2090ee4dd16b..a2dcb7bdfc85f 100644
--- a/examples/ui/button.rs
+++ b/examples/ui/button.rs
@@ -1,7 +1,7 @@
 //! This example illustrates how to create a button that changes color and text based on its
 //! interaction state.
 
-use bevy::{color::palettes::basic::*, input_focus::InputFocus, prelude::*};
+use bevy::{color::palettes::basic::*, input_focus::InputFocus, prelude::*, text::FontSize};
 
 fn main() {
     App::new()
@@ -96,11 +96,8 @@ fn button(asset_server: &AssetServer) -> impl Bundle {
             BackgroundColor(Color::BLACK),
             children![(
                 Text::new("Button"),
-                TextFont {
-                    font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-                    font_size: 33.0,
-                    ..default()
-                },
+                FontFace(asset_server.load("fonts/FiraSans-Bold.ttf")),
+                FontSize::Px(33.0),
                 TextColor(Color::srgb(0.9, 0.9, 0.9)),
                 TextShadow::default(),
             )]
diff --git a/examples/ui/display_and_visibility.rs b/examples/ui/display_and_visibility.rs
index ce96648c88636..33715ca2c8fc3 100644
--- a/examples/ui/display_and_visibility.rs
+++ b/examples/ui/display_and_visibility.rs
@@ -74,11 +74,6 @@ impl TargetUpdate for Target<Visibility> {
 fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     let palette: [Color; 4] = PALETTE.map(|hex| Srgba::hex(hex).unwrap().into());
 
-    let text_font = TextFont {
-        font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-        ..default()
-    };
-
     commands.spawn(Camera2d);
     commands
         .spawn((
@@ -90,12 +85,12 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                 justify_content: JustifyContent::SpaceEvenly,
                 ..Default::default()
             },
+            FontFace(asset_server.load("fonts/FiraSans-Bold.ttf")),
             BackgroundColor(Color::BLACK),
         ))
         .with_children(|parent| {
             parent.spawn((
                 Text::new("Use the panel on the right to change the Display and Visibility properties for the respective nodes of the panel on the left"),
-                text_font.clone(),
                 TextLayout::new_with_justify(Justify::Center),
                 Node {
                     margin: UiRect::bottom(px(10)),
@@ -128,7 +123,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                             ..default()
                         })
                         .with_children(|parent| {
-                            spawn_right_panel(parent, text_font, &palette, target_ids);
+                            spawn_right_panel(parent, &palette, target_ids);
                         });
                 });
 
@@ -141,24 +136,17 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                     ..default()
                 })
                 .with_children(|builder| {
-                    let text_font = TextFont {
-                        font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-                        ..default()
-                    };
-
                     builder.spawn((
                         Text::new("Display::None\nVisibility::Hidden\nVisibility::Inherited"),
-                        text_font.clone(),
                         TextColor(HIDDEN_COLOR),
                         TextLayout::new_with_justify(Justify::Center),
                     ));
                     builder.spawn((
                         Text::new("-\n-\n-"),
-                        text_font.clone(),
                         TextColor(DARK_GRAY.into()),
                         TextLayout::new_with_justify(Justify::Center),
                     ));
-                    builder.spawn((Text::new("The UI Node and its descendants will not be visible and will not be allotted any space in the UI layout.\nThe UI Node will not be visible but will still occupy space in the UI layout.\nThe UI node will inherit the visibility property of its parent. If it has no parent it will be visible."), text_font));
+                    builder.spawn(Text::new("The UI Node and its descendants will not be visible and will not be allotted any space in the UI layout.\nThe UI Node will not be visible but will still occupy space in the UI layout.\nThe UI node will inherit the visibility property of its parent. If it has no parent it will be visible."));
                 });
         });
 }
@@ -259,13 +247,12 @@ fn spawn_left_panel(builder: &mut ChildSpawnerCommands, palette: &[Color; 4]) ->
 
 fn spawn_right_panel(
     parent: &mut ChildSpawnerCommands,
-    text_font: TextFont,
     palette: &[Color; 4],
     mut target_ids: Vec<Entity>,
 ) {
     let spawn_buttons = |parent: &mut ChildSpawnerCommands, target_id| {
-        spawn_button::<Display>(parent, text_font.clone(), target_id);
-        spawn_button::<Visibility>(parent, text_font.clone(), target_id);
+        spawn_button::<Display>(parent, target_id);
+        spawn_button::<Visibility>(parent, target_id);
     };
     parent
         .spawn((
@@ -373,7 +360,7 @@ fn spawn_right_panel(
         });
 }
 
-fn spawn_button<T>(parent: &mut ChildSpawnerCommands, text_font: TextFont, target: Entity)
+fn spawn_button<T>(parent: &mut ChildSpawnerCommands, target: Entity)
 where
     T: Default + std::fmt::Debug + Send + Sync + 'static,
     Target<T>: TargetUpdate,
@@ -392,7 +379,6 @@ where
         .with_children(|builder| {
             builder.spawn((
                 Text(format!("{}::{:?}", Target::<T>::NAME, T::default())),
-                text_font,
                 TextLayout::new_with_justify(Justify::Center),
             ));
         });
diff --git a/examples/ui/flex_layout.rs b/examples/ui/flex_layout.rs
index be23790d5cb22..11e94cd0123a4 100644
--- a/examples/ui/flex_layout.rs
+++ b/examples/ui/flex_layout.rs
@@ -161,10 +161,6 @@ fn spawn_nested_text_bundle(
             BackgroundColor(background_color),
         ))
         .with_children(|builder| {
-            builder.spawn((
-                Text::new(text),
-                TextFont { font, ..default() },
-                TextColor::BLACK,
-            ));
+            builder.spawn((Text::new(text), FontFace(font), TextColor::BLACK));
         });
 }
diff --git a/examples/ui/font_atlas_debug.rs b/examples/ui/font_atlas_debug.rs
index 5fa5054ce150b..a588b49047ff0 100644
--- a/examples/ui/font_atlas_debug.rs
+++ b/examples/ui/font_atlas_debug.rs
@@ -98,11 +98,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>, mut state: ResM
         .with_children(|parent| {
             parent.spawn((
                 Text::new("a"),
-                TextFont {
-                    font: font_handle,
-                    font_size: 50.0,
-                    ..default()
-                },
+                FontFace(font_handle),
+                FontSize::Px(50.0),
                 TextColor(YELLOW.into()),
             ));
         });
diff --git a/examples/ui/ghost_nodes.rs b/examples/ui/ghost_nodes.rs
index 4d68724b3beec..57e54f6da80fe 100644
--- a/examples/ui/ghost_nodes.rs
+++ b/examples/ui/ghost_nodes.rs
@@ -88,10 +88,10 @@ fn create_button() -> impl Bundle {
     )
 }
 
-fn create_label(text: &str, font: Handle<Font>) -> (Text, TextFont, TextColor) {
+fn create_label(text: &str, font: Handle<Font>) -> (Text, FontFace, TextColor) {
     (
         Text::new(text),
-        TextFont {
+        FontFace {
             font,
             font_size: 33.0,
             ..default()
diff --git a/examples/ui/gradients.rs b/examples/ui/gradients.rs
index c0dc64346d099..5895aba871e05 100644
--- a/examples/ui/gradients.rs
+++ b/examples/ui/gradients.rs
@@ -277,7 +277,7 @@ fn setup(mut commands: Commands) {
                     ..Default::default()
                 }
             ).with_children(|commands| {
-                commands.spawn((Text::new(format!("{:?}", InterpolationColorSpace::default())), TextFont { font_size: 25., ..default() }, CurrentColorSpaceLabel));
+                commands.spawn((Text::new(format!("{:?}", InterpolationColorSpace::default())), FontSize::Px(25.), CurrentColorSpaceLabel));
 
             })
             .add_child(button);
diff --git a/examples/ui/grid.rs b/examples/ui/grid.rs
index 63b2b525be3a0..b75724a4330de 100644
--- a/examples/ui/grid.rs
+++ b/examples/ui/grid.rs
@@ -129,21 +129,15 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
                         row_gap: px(10),
                         ..default()
                     },
+                    FontFace(font.clone()),
                     BackgroundColor(BLACK.into()),
                 ))
                 .with_children(|builder| {
-                    builder.spawn((Text::new("Sidebar"),
-                        TextFont {
-                            font: font.clone(),
-                            ..default()
-                        },
-                    ));
+                    builder.spawn(Text::new("Sidebar"),
+                        
+                    );
                     builder.spawn((Text::new("A paragraph of text which ought to wrap nicely. A paragraph of text which ought to wrap nicely. A paragraph of text which ought to wrap nicely. A paragraph of text which ought to wrap nicely. A paragraph of text which ought to wrap nicely. A paragraph of text which ought to wrap nicely. A paragraph of text which ought to wrap nicely."),
-                        TextFont {
-                            font: font.clone(),
-                            font_size: 13.0,
-                            ..default()
-                        },
+                        FontSize::Px(13.0)
                     ));
                     builder.spawn(Node::default());
                 });
@@ -200,7 +194,7 @@ fn item_rect(builder: &mut ChildSpawnerCommands, color: Srgba) {
 fn spawn_nested_text_bundle(builder: &mut ChildSpawnerCommands, font: Handle<Font>, text: &str) {
     builder.spawn((
         Text::new(text),
-        TextFont { font, ..default() },
+        FontFace(font,),
         TextColor::BLACK,
     ));
 }
diff --git a/examples/ui/overflow.rs b/examples/ui/overflow.rs
index 2af51bf5c5fbd..00b9603925a0d 100644
--- a/examples/ui/overflow.rs
+++ b/examples/ui/overflow.rs
@@ -13,7 +13,7 @@ fn main() {
 fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     commands.spawn(Camera2d);
 
-    let text_style = TextFont::default();
+    let text_style = FontFace::default();
 
     let image = asset_server.load("branding/icon.png");
 
diff --git a/examples/ui/overflow_debug.rs b/examples/ui/overflow_debug.rs
index 1f0bde0eb5364..4bd64f4c5d5b3 100644
--- a/examples/ui/overflow_debug.rs
+++ b/examples/ui/overflow_debug.rs
@@ -79,7 +79,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
 
     // Instructions
 
-    let text_font = TextFont::default();
+    let text_font = FontFace::default();
 
     commands
         .spawn((
@@ -96,7 +96,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
             Instructions,
         ))
         .with_child((
-            TextSpan::new(format!("{:?}", Overflow::clip())),
+            Text::new(format!("{:?}", Overflow::clip())),
             text_font.clone(),
         ));
 
@@ -159,7 +159,7 @@ fn spawn_text(
     spawn_container(parent, update_transform, |parent| {
         parent.spawn((
             Text::new("Bevy"),
-            TextFont {
+            FontFace {
                 font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                 font_size: 100.0,
                 ..default()
diff --git a/examples/ui/relative_cursor_position.rs b/examples/ui/relative_cursor_position.rs
index 67932d69ef3d3..12186f2ecf209 100644
--- a/examples/ui/relative_cursor_position.rs
+++ b/examples/ui/relative_cursor_position.rs
@@ -48,7 +48,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
 
             parent.spawn((
                 Text::new("(0.0, 0.0)"),
-                TextFont {
+                FontFace {
                     font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                     font_size: 33.0,
                     ..default()
diff --git a/examples/ui/render_ui_to_texture.rs b/examples/ui/render_ui_to_texture.rs
index cbc78c20f4f76..799b81e38c52f 100644
--- a/examples/ui/render_ui_to_texture.rs
+++ b/examples/ui/render_ui_to_texture.rs
@@ -120,14 +120,7 @@ fn setup(
                     },
                 )
                 .with_children(|parent| {
-                    parent.spawn((
-                        Text::new("Drag Me!"),
-                        TextFont {
-                            font_size: 40.0,
-                            ..default()
-                        },
-                        TextColor::WHITE,
-                    ));
+                    parent.spawn((Text::new("Drag Me!"), FontSize::Px(40.0), TextColor::WHITE));
                 });
         });
 
diff --git a/examples/ui/scroll.rs b/examples/ui/scroll.rs
index 23ff6eefbab21..a828f5ad48f13 100644
--- a/examples/ui/scroll.rs
+++ b/examples/ui/scroll.rs
@@ -114,13 +114,16 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
 
     // root node
     commands
-        .spawn(Node {
-            width: percent(100),
-            height: percent(100),
-            justify_content: JustifyContent::SpaceBetween,
-            flex_direction: FlexDirection::Column,
-            ..default()
-        })
+        .spawn((
+            Node {
+                width: percent(100),
+                height: percent(100),
+                justify_content: JustifyContent::SpaceBetween,
+                flex_direction: FlexDirection::Column,
+                ..default()
+            },
+            FontFace(asset_server.load("fonts/FiraSans-Bold.ttf")),
+        ))
         .with_children(|parent| {
             // horizontal scroll example
             parent
@@ -133,11 +136,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                     // header
                     parent.spawn((
                         Text::new("Horizontally Scrolling list (Ctrl + MouseWheel)"),
-                        TextFont {
-                            font: font_handle.clone(),
-                            font_size: FONT_SIZE,
-                            ..default()
-                        },
+                        FontFace(font_handle.clone()),
+                        FontSize::Px(FONT_SIZE),
                         Label,
                     ));
 
@@ -158,10 +158,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                                 parent
                                     .spawn((
                                         Text(format!("Item {i}")),
-                                        TextFont {
-                                            font: font_handle.clone(),
-                                            ..default()
-                                        },
+                                        FontSize::Px(FONT_SIZE),
                                         Label,
                                         AccessibilityNode(Accessible::new(Role::ListItem)),
                                         Node {
@@ -208,15 +205,12 @@ fn vertically_scrolling_list(font_handle: Handle<Font>) -> impl Bundle {
             width: px(200),
             ..default()
         },
+        FontFace(font_handle),
         children![
             (
                 // Title
                 Text::new("Vertically Scrolling List"),
-                TextFont {
-                    font: font_handle.clone(),
-                    font_size: FONT_SIZE,
-                    ..default()
-                },
+                FontSize::Px(FONT_SIZE),
                 Label,
             ),
             (
@@ -238,10 +232,7 @@ fn vertically_scrolling_list(font_handle: Handle<Font>) -> impl Bundle {
                         },
                         children![(
                             Text(format!("Item {i}")),
-                            TextFont {
-                                font: font_handle.clone(),
-                                ..default()
-                            },
+                            FontSize::Px(FONT_SIZE),
                             Label,
                             AccessibilityNode(Accessible::new(Role::ListItem)),
                         )],
@@ -264,11 +255,7 @@ fn bidirectional_scrolling_list(font_handle: Handle<Font>) -> impl Bundle {
         children![
             (
                 Text::new("Bidirectionally Scrolling List"),
-                TextFont {
-                    font: font_handle.clone(),
-                    font_size: FONT_SIZE,
-                    ..default()
-                },
+                FontSize::Px(FONT_SIZE),
                 Label,
             ),
             (
@@ -287,14 +274,10 @@ fn bidirectional_scrolling_list(font_handle: Handle<Font>) -> impl Bundle {
                             ..default()
                         },
                         Children::spawn(SpawnIter((0..10).map({
-                            let value = font_handle.clone();
                             move |i| {
                                 (
                                     Text(format!("Item {}", (oi * 10) + i)),
-                                    TextFont {
-                                        font: value.clone(),
-                                        ..default()
-                                    },
+                                    FontSize::Px(FONT_SIZE),
                                     Label,
                                     AccessibilityNode(Accessible::new(Role::ListItem)),
                                 )
@@ -316,15 +299,12 @@ fn nested_scrolling_list(font_handle: Handle<Font>) -> impl Bundle {
             width: px(200),
             ..default()
         },
+        FontFace(font_handle),
         children![
             (
                 // Title
                 Text::new("Nested Scrolling Lists"),
-                TextFont {
-                    font: font_handle.clone(),
-                    font_size: FONT_SIZE,
-                    ..default()
-                },
+                FontSize::Px(FONT_SIZE),
                 Label,
             ),
             (
@@ -350,14 +330,9 @@ fn nested_scrolling_list(font_handle: Handle<Font>) -> impl Bundle {
                         },
                         BackgroundColor(Color::srgb(0.05, 0.05, 0.05)),
                         Children::spawn(SpawnIter((0..20).map({
-                            let value = font_handle.clone();
                             move |i| {
                                 (
                                     Text(format!("Item {}", (oi * 20) + i)),
-                                    TextFont {
-                                        font: value.clone(),
-                                        ..default()
-                                    },
                                     Label,
                                     AccessibilityNode(Accessible::new(Role::ListItem)),
                                 )
diff --git a/examples/ui/scrollbars.rs b/examples/ui/scrollbars.rs
index f5dedeea5069d..402f16076954c 100644
--- a/examples/ui/scrollbars.rs
+++ b/examples/ui/scrollbars.rs
@@ -161,7 +161,7 @@ fn scroll_area_demo() -> impl Bundle {
 fn text_row(caption: &str) -> impl Bundle {
     (
         Text::new(caption),
-        TextFont {
+        FontFace {
             font_size: 14.0,
             ..default()
         },
diff --git a/examples/ui/size_constraints.rs b/examples/ui/size_constraints.rs
index 585ed321912c2..e43187fd90503 100644
--- a/examples/ui/size_constraints.rs
+++ b/examples/ui/size_constraints.rs
@@ -43,11 +43,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     commands.spawn(Camera2d);
 
     let text_font = (
-        TextFont {
-            font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-            font_size: 33.0,
-            ..Default::default()
-        },
+        FontFace(asset_server.load("fonts/FiraSans-Bold.ttf")),
+        FontSize::Px(33.0),
         TextColor(Color::srgb(0.9, 0.9, 0.9)),
     );
 
@@ -139,7 +136,7 @@ fn spawn_bar(parent: &mut ChildSpawnerCommands) {
 fn spawn_button_row(
     parent: &mut ChildSpawnerCommands,
     constraint: Constraint,
-    text_style: (TextFont, TextColor),
+    text_style: (FontFace, TextColor),
 ) {
     let label = match constraint {
         Constraint::FlexBasis => "flex_basis",
@@ -208,7 +205,7 @@ fn spawn_button(
     constraint: Constraint,
     action: ButtonValue,
     label: String,
-    text_style: (TextFont, TextColor),
+    text_style: (FontFace, TextColor),
     active: bool,
 ) {
     parent
diff --git a/examples/ui/standard_widgets.rs b/examples/ui/standard_widgets.rs
index a8a0db1d05db1..9ee760635db7b 100644
--- a/examples/ui/standard_widgets.rs
+++ b/examples/ui/standard_widgets.rs
@@ -196,7 +196,7 @@ fn button(asset_server: &AssetServer) -> impl Bundle {
         BackgroundColor(NORMAL_BUTTON),
         children![(
             Text::new("Button"),
-            TextFont {
+            FontFace {
                 font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                 font_size: 33.0,
                 ..default()
@@ -505,7 +505,7 @@ fn checkbox(asset_server: &AssetServer, caption: &str) -> impl Bundle {
             )),
             Spawn((
                 Text::new(caption),
-                TextFont {
+                FontFace {
                     font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                     font_size: 20.0,
                     ..default()
@@ -718,7 +718,7 @@ fn radio(asset_server: &AssetServer, value: TrackClick, caption: &str) -> impl B
             )),
             Spawn((
                 Text::new(caption),
-                TextFont {
+                FontFace {
                     font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                     font_size: 20.0,
                     ..default()
diff --git a/examples/ui/standard_widgets_observers.rs b/examples/ui/standard_widgets_observers.rs
index 07a3bbda1fc0e..c588ccfd9ef2f 100644
--- a/examples/ui/standard_widgets_observers.rs
+++ b/examples/ui/standard_widgets_observers.rs
@@ -147,7 +147,7 @@ fn button(asset_server: &AssetServer) -> impl Bundle {
         BackgroundColor(NORMAL_BUTTON),
         children![(
             Text::new("Button"),
-            TextFont {
+            FontFace {
                 font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                 font_size: 33.0,
                 ..default()
@@ -378,7 +378,7 @@ fn checkbox(asset_server: &AssetServer, caption: &str) -> impl Bundle {
             )),
             Spawn((
                 Text::new(caption),
-                TextFont {
+                FontFace {
                     font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                     font_size: 20.0,
                     ..default()
diff --git a/examples/ui/tab_navigation.rs b/examples/ui/tab_navigation.rs
index cbc9a6babc7da..575efe179aa80 100644
--- a/examples/ui/tab_navigation.rs
+++ b/examples/ui/tab_navigation.rs
@@ -7,6 +7,7 @@ use bevy::{
         InputDispatchPlugin, InputFocus,
     },
     prelude::*,
+    text::{DefaultTextStyle, TextStyle},
 };
 
 fn main() {
@@ -68,6 +69,13 @@ fn focus_system(
 fn setup(mut commands: Commands) {
     // ui camera
     commands.spawn(Camera2d);
+
+    commands.insert_resource(DefaultTextStyle(TextStyle {
+        font_size: FontSize::Px(20.),
+        color: Color::srgb(0.9, 0.9, 0.9),
+        ..default()
+    }));
+
     commands
         .spawn(Node {
             width: percent(100),
@@ -128,12 +136,7 @@ fn setup(mut commands: Commands) {
                                     BackgroundColor(NORMAL_BUTTON),
                                     TabIndex(i),
                                     children![(
-                                        Text::new(format!("TabIndex {i}")),
-                                        TextFont {
-                                            font_size: 20.0,
-                                            ..default()
-                                        },
-                                        TextColor(Color::srgb(0.9, 0.9, 0.9)),
+                                        Text::new(format!("TabIndex {i}")),                                        
                                     )],
                                 ))
                                 .observe(
diff --git a/examples/ui/text.rs b/examples/ui/text.rs
index ec0f6185efc04..5700f13fd43fb 100644
--- a/examples/ui/text.rs
+++ b/examples/ui/text.rs
@@ -7,6 +7,7 @@ use bevy::{
     color::palettes::css::GOLD,
     diagnostic::{DiagnosticsStore, FrameTimeDiagnosticsPlugin},
     prelude::*,
+    text::FontSize,
 };
 
 fn main() {
@@ -32,12 +33,9 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     commands.spawn((
         // Accepts a `String` or any type that converts into a `String`, such as `&str`
         Text::new("hello\nbevy!"),
-        TextFont {
-            // This font is loaded and will be used instead of the default font.
-            font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-            font_size: 67.0,
-            ..default()
-        },
+        // This font is loaded and will be used instead of the default font.
+        FontFace(asset_server.load("fonts/FiraSans-Bold.ttf")),
+        FontSize::Px(67.0),
         TextShadow::default(),
         // Set the justification of the Text
         TextLayout::new_with_justify(Justify::Center),
@@ -48,45 +46,53 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
             right: px(5),
             ..default()
         },
+        TextColor::WHITE,
         AnimatedText,
     ));
 
+    commands.spawn((
+        Node {
+            position_type: PositionType::Absolute,
+            top: px(250),
+            left: px(250),
+            column_gap: px(10.),
+            ..default()
+        },
+        children![
+            (Text::new("one"), FontSize::Rem(1.)),
+            (Text::new("two"), FontSize::Rem(2.)),
+            (Text::new("three"), FontSize::Rem(3.)),
+        ],
+    ));
+
     // Text with multiple sections
     commands
         .spawn((
             // Create a Text with multiple child spans.
             Text::new("FPS: "),
-            TextFont {
-                // This font is loaded and will be used instead of the default font.
-                font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-                font_size: 42.0,
-                ..default()
-            },
+            // This font is loaded and will be used instead of the default font.
+            FontFace(asset_server.load("fonts/FiraSans-Bold.ttf")),
+            FontSize::Px(42.0),
         ))
-        .with_child((
-            TextSpan::default(),
+        .with_children(|parent| {
+            let mut entity_commands = parent.spawn((Text::new("0"), FpsText));
             if cfg!(feature = "default_font") {
-                (
-                    TextFont {
-                        font_size: 33.0,
-                        // If no font is specified, the default font (a minimal subset of FiraMono) will be used.
-                        ..default()
-                    },
+                entity_commands.insert((
+                    // If no font is specified, the default font (a minimal subset of FiraMono) will be used.
+                    FontSize::Px(33.),
                     TextColor(GOLD.into()),
-                )
+                    FpsText,
+                ));
             } else {
-                (
+                entity_commands.insert((
                     // "default_font" feature is unavailable, load a font to use instead.
-                    TextFont {
-                        font: asset_server.load("fonts/FiraMono-Medium.ttf"),
-                        font_size: 33.0,
-                        ..Default::default()
-                    },
+                    FontFace(asset_server.load("fonts/FiraMono-Medium.ttf")),
+                    FontSize::Px(33.),
                     TextColor(GOLD.into()),
-                )
-            },
-            FpsText,
-        ));
+                    FpsText,
+                ));
+            };
+        });
 
     #[cfg(feature = "default_font")]
     commands.spawn((
@@ -104,10 +110,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     #[cfg(not(feature = "default_font"))]
     commands.spawn((
         Text::new("Default font disabled"),
-        TextFont {
-            font: asset_server.load("fonts/FiraMono-Medium.ttf"),
-            ..default()
-        },
+        FontFace(asset_server.load("fonts/FiraMono-Medium.ttf")),
         Node {
             position_type: PositionType::Absolute,
             bottom: px(5),
@@ -132,7 +135,7 @@ fn text_color_system(time: Res<Time>, mut query: Query<&mut TextColor, With<Anim
 
 fn text_update_system(
     diagnostics: Res<DiagnosticsStore>,
-    mut query: Query<&mut TextSpan, With<FpsText>>,
+    mut query: Query<&mut Text, With<FpsText>>,
 ) {
     for mut span in &mut query {
         if let Some(fps) = diagnostics.get(&FrameTimeDiagnosticsPlugin::FPS)
diff --git a/examples/ui/text_background_colors.rs b/examples/ui/text_background_colors.rs
index 8f32c8d29e85b..e468723e23c5d 100644
--- a/examples/ui/text_background_colors.rs
+++ b/examples/ui/text_background_colors.rs
@@ -46,16 +46,13 @@ fn setup(mut commands: Commands) {
                         justify: Justify::Center,
                         ..Default::default()
                     },
+                    FontSize::Px(100.),
                 ))
                 .with_children(|commands| {
                     for (i, section_str) in message_text.iter().enumerate() {
                         commands.spawn((
-                            TextSpan::new(*section_str),
+                            Text::new(*section_str),
                             TextColor::BLACK,
-                            TextFont {
-                                font_size: 100.,
-                                ..default()
-                            },
                             TextBackgroundColor(PALETTE[i % PALETTE.len()]),
                         ));
                     }
diff --git a/examples/ui/text_debug.rs b/examples/ui/text_debug.rs
index 84e4db4e52b43..316bb365dcc8b 100644
--- a/examples/ui/text_debug.rs
+++ b/examples/ui/text_debug.rs
@@ -6,7 +6,6 @@ use bevy::{
     color::palettes::css::*,
     diagnostic::{DiagnosticsStore, FrameTimeDiagnosticsPlugin},
     prelude::*,
-    ui::widget::TextUiWriter,
     window::PresentMode,
 };
 
@@ -55,22 +54,16 @@ fn infotext_system(mut commands: Commands, asset_server: Res<AssetServer>) {
         }).with_children(|builder| {
         builder.spawn((
             Text::new("This is\ntext with\nline breaks\nin the top left."),
-            TextFont {
-                font: font.clone(),
-                font_size: 25.0,
-                ..default()
-            },
+            FontFace(font.clone()),
+            FontSize::Px(25.0),                
             BackgroundColor(background_color)
         ));
         builder.spawn((
             Text::new(
                 "This text is right-justified. The `Justify` component controls the horizontal alignment of the lines of multi-line text relative to each other, and does not affect the text node's position in the UI layout.",
             ),
-            TextFont {
-                font: font.clone(),
-                font_size: 25.0,
-                ..default()
-            },
+            FontFace ( font.clone()),
+            FontSize::Px(25.0),
             TextColor(YELLOW.into()),
             TextLayout::new_with_justify(Justify::Right),
             Node {
@@ -82,11 +75,8 @@ fn infotext_system(mut commands: Commands, asset_server: Res<AssetServer>) {
         builder.spawn((
             Text::new(
                 "This\ntext has\nline breaks and also a set width in the bottom left."),
-            TextFont {
-                font: font.clone(),
-                font_size: 25.0,
-                ..default()
-            },
+            FontFace(font.clone()),
+            FontSize::Px(25.0),
             Node {
                 max_width: px(300),
                 ..default()
@@ -108,11 +98,8 @@ fn infotext_system(mut commands: Commands, asset_server: Res<AssetServer>) {
         .with_children(|builder| {
             builder.spawn((
                 Text::new("This text is very long, has a limited width, is center-justified, is positioned in the top right and is also colored pink."),
-                TextFont {
-                    font: font.clone(),
-                    font_size: 33.0,
-                    ..default()
-                },
+                FontFace(font.clone()),
+                FontSize::Px(33.0),
                 TextColor(Color::srgb(0.8, 0.2, 0.7)),
                 TextLayout::new_with_justify(Justify::Center),
                 Node {
@@ -124,11 +111,8 @@ fn infotext_system(mut commands: Commands, asset_server: Res<AssetServer>) {
 
             builder.spawn((
                 Text::new("This text is left-justified and is vertically positioned to distribute the empty space equally above and below it."),
-                TextFont {
-                    font: font.clone(),
-                    font_size: 29.0,
-                    ..default()
-                },
+                FontFace(font.clone()),
+                FontSize::Px(29.0),
                 TextColor(YELLOW.into()),
                 TextLayout::new_with_justify(Justify::Left),
                 Node {
@@ -140,11 +124,8 @@ fn infotext_system(mut commands: Commands, asset_server: Res<AssetServer>) {
 
             builder.spawn((
                 Text::new("This text is fully justified and is positioned in the same way."),
-                TextFont {
-                    font: font.clone(),
-                    font_size: 29.0,
-                    ..default()
-                },
+                FontFace(font.clone()),
+                FontSize::Px(29.0),
                 TextLayout::new_with_justify(Justify::Justified),
                 TextColor(GREEN_YELLOW.into()),
                 Node {
@@ -157,84 +138,57 @@ fn infotext_system(mut commands: Commands, asset_server: Res<AssetServer>) {
             builder
                 .spawn((
                     Text::default(),
-                    TextFont {
-                        font: font.clone(),
-                        font_size: 21.0,
-                        ..default()
-                    },
+                    FontFace(font.clone()),
+                FontSize::Px(21.0),
                     TextChanges,
                     BackgroundColor(background_color),
                 ))
                 .with_children(|p| {
                     p.spawn((
-                        TextSpan::new("\nThis text changes in the bottom right"),
-                        TextFont {
-                            font: font.clone(),
-                            font_size: 21.0,
-                            ..default()
-                        },
+                        Text::new("\nThis text changes in the bottom right"),
+                        FontFace(font.clone()),
+                FontSize::Px(21.0),
                     ));
                     p.spawn((
-                        TextSpan::new(" this text has zero font size"),
-                        TextFont {
-                            font: font.clone(),
-                            font_size: 0.0,
-                            ..default()
-                        },
+                        Text::new(" this text has zero font size"),
+                        FontFace(font.clone()),
+                FontSize::Px(0.0),
                         TextColor(BLUE.into()),
                     ));
                     p.spawn((
-                        TextSpan::new("\nThis text changes in the bottom right - "),
-                        TextFont {
-                            font: font.clone(),
-                            font_size: 21.0,
-                            ..default()
-                        },
+                        Text::new("\nThis text changes in the bottom right - "),
+                        FontFace(font.clone()),
+                FontSize::Px(21.0),
                         TextColor(RED.into()),
                     ));
                     p.spawn((
-                        TextSpan::default(),
-                        TextFont {
-                            font: font.clone(),
-                            font_size: 21.0,
-                            ..default()
-                        },
+                        Text::default(),
+                        FontFace(font.clone()),
+                FontSize::Px(21.0),
                         TextColor(ORANGE_RED.into()),
                     ));
                     p.spawn((
-                        TextSpan::new(" fps, "),
-                        TextFont {
-                            font: font.clone(),
-                            font_size: 10.0,
-                            ..default()
-                        },
+                        Text::new(" fps, "),
+                        FontFace(font.clone()),
+                FontSize::Px(21.0),
                         TextColor(YELLOW.into()),
                     ));
                     p.spawn((
-                        TextSpan::default(),
-                        TextFont {
-                            font: font.clone(),
-                            font_size: 21.0,
-                            ..default()
-                        },
+                        Text::default(),
+                        FontFace(font.clone()),
+                FontSize::Px(21.0),
                         TextColor(LIME.into()),
                     ));
                     p.spawn((
-                        TextSpan::new(" ms/frame"),
-                        TextFont {
-                            font: font.clone(),
-                            font_size: 42.0,
-                            ..default()
-                        },
+                        Text::new(" ms/frame"),
+                        FontFace(font.clone()),
+                FontSize::Px(42.0),
                         TextColor(BLUE.into()),
                     ));
                     p.spawn((
-                        TextSpan::new(" this text has negative font size"),
-                        TextFont {
-                            font: font.clone(),
-                            font_size: -42.0,
-                            ..default()
-                        },
+                        Text::new(" this text has negative font size"),
+                        FontFace(font.clone()),
+                FontSize::Px(-42.0),
                         TextColor(BLUE.into()),
                     ));
                 });
@@ -250,8 +204,9 @@ fn change_text_system(
     mut time_history: Local<VecDeque<Duration>>,
     time: Res<Time>,
     diagnostics: Res<DiagnosticsStore>,
-    query: Query<Entity, With<TextChanges>>,
-    mut writer: TextUiWriter,
+    mut query: Query<Entity, With<TextChanges>>,
+    children_query: Query<&Children>,
+    mut text_query: Query<&mut Text>,
 ) {
     time_history.push_front(time.elapsed());
     time_history.truncate(120);
@@ -264,7 +219,7 @@ fn change_text_system(
     fps_history.truncate(120);
     let fps_variance = std_deviation(fps_history.make_contiguous()).unwrap_or_default();
 
-    for entity in &query {
+    for entity in &mut query {
         let mut fps = 0.0;
         if let Some(fps_diagnostic) = diagnostics.get(&FrameTimeDiagnosticsPlugin::FPS)
             && let Some(fps_smoothed) = fps_diagnostic.smoothed()
@@ -279,17 +234,17 @@ fn change_text_system(
         {
             frame_time = frame_time_smoothed;
         }
+        text_query.get_mut(entity).unwrap().0 = format!("{avg_fps:.1} avg fps, {fps_variance:.1} frametime variance",);
 
-        *writer.text(entity, 0) =
-            format!("{avg_fps:.1} avg fps, {fps_variance:.1} frametime variance",);
-
-        *writer.text(entity, 1) = format!(
-            "\nThis text changes in the bottom right - {fps:.1} fps, {frame_time:.3} ms/frame",
+        let children: Vec<Entity> = children_query.iter_descendants(entity).collect();
+         
+        text_query.get_mut(children[0]).unwrap().0 = format!(
+             "\nThis text changes in the bottom right - {fps:.1} fps, {frame_time:.3} ms/frame",
         );
 
-        *writer.text(entity, 4) = format!("{fps:.1}");
+        text_query.get_mut(children[3]).unwrap().0 = format!("{fps:.1}");
 
-        *writer.text(entity, 6) = format!("{frame_time:.3}");
+        text_query.get_mut(children[5]).unwrap().0 = format!("{frame_time:.3}");
     }
 }
 
diff --git a/examples/ui/text_wrap_debug.rs b/examples/ui/text_wrap_debug.rs
index 212a820abca75..c0c5ee3b20bb8 100644
--- a/examples/ui/text_wrap_debug.rs
+++ b/examples/ui/text_wrap_debug.rs
@@ -44,7 +44,7 @@ fn main() {
 fn spawn(mut commands: Commands, asset_server: Res<AssetServer>) {
     commands.spawn(Camera2d);
 
-    let text_font = TextFont {
+    let text_font = FontFace {
         font: asset_server.load("fonts/FiraSans-Bold.ttf"),
         font_size: 12.0,
         ..default()
diff --git a/examples/ui/transparency_ui.rs b/examples/ui/transparency_ui.rs
index d3884483f463f..976dcc8f13fbb 100644
--- a/examples/ui/transparency_ui.rs
+++ b/examples/ui/transparency_ui.rs
@@ -40,7 +40,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                 .with_children(|parent| {
                     parent.spawn((
                         Text::new("Button 1"),
-                        TextFont {
+                        FontFace {
                             font: font_handle.clone(),
                             font_size: 33.0,
                             ..default()
@@ -67,7 +67,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                 .with_children(|parent| {
                     parent.spawn((
                         Text::new("Button 2"),
-                        TextFont {
+                        FontFace {
                             font: font_handle.clone(),
                             font_size: 33.0,
                             ..default()
diff --git a/examples/ui/ui_scaling.rs b/examples/ui/ui_scaling.rs
index 5a61e41eb8eb2..2493f8d765ca2 100644
--- a/examples/ui/ui_scaling.rs
+++ b/examples/ui/ui_scaling.rs
@@ -24,10 +24,7 @@ fn main() {
 fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     commands.spawn(Camera2d);
 
-    let text_font = TextFont {
-        font_size: 13.,
-        ..default()
-    };
+    let font_size = FontSize::Px(13.);
 
     commands
         .spawn((
@@ -54,7 +51,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                     BackgroundColor(RED.into()),
                 ))
                 .with_children(|parent| {
-                    parent.spawn((Text::new("Size!"), text_font, TextColor::BLACK));
+                    parent.spawn((Text::new("Size!"), font_size, TextColor::BLACK));
                 });
             parent.spawn((
                 Node {
diff --git a/examples/ui/ui_target_camera.rs b/examples/ui/ui_target_camera.rs
index c2a374bf699a6..6323f310a6edf 100644
--- a/examples/ui/ui_target_camera.rs
+++ b/examples/ui/ui_target_camera.rs
@@ -54,7 +54,7 @@ fn setup(mut commands: Commands) {
         let label_entity = commands
             .spawn((
                 Text(format!("{i}")),
-                TextFont::from_font_size(50.),
+                FontSize::Px(50.),
                 TextColor(color.into()),
             ))
             .id();
diff --git a/examples/ui/ui_texture_atlas.rs b/examples/ui/ui_texture_atlas.rs
index 0cf00b100cb45..72e262e49d354 100644
--- a/examples/ui/ui_texture_atlas.rs
+++ b/examples/ui/ui_texture_atlas.rs
@@ -23,7 +23,7 @@ fn setup(
     // Camera
     commands.spawn(Camera2d);
 
-    let text_font = TextFont::default();
+    let text_font = FontFace::default();
 
     let texture_handle = asset_server.load("textures/rpg/chars/gabe/gabe-idle-run.png");
     let texture_atlas = TextureAtlasLayout::from_grid(UVec2::splat(24), 7, 1, None, None);
@@ -57,11 +57,11 @@ fn setup(
             parent
                 .spawn((Text::new("press "), text_font.clone()))
                 .with_child((
-                    TextSpan::new("space"),
+                    Text::new("space"),
                     TextColor(YELLOW.into()),
                     text_font.clone(),
                 ))
-                .with_child((TextSpan::new(" to advance frames"), text_font));
+                .with_child((Text::new(" to advance frames"), text_font));
         });
 }
 
diff --git a/examples/ui/ui_texture_atlas_slice.rs b/examples/ui/ui_texture_atlas_slice.rs
index b651630094ea8..cdd355d36d390 100644
--- a/examples/ui/ui_texture_atlas_slice.rs
+++ b/examples/ui/ui_texture_atlas_slice.rs
@@ -101,7 +101,7 @@ fn setup(
                     .with_children(|parent| {
                         parent.spawn((
                             Text::new("Button"),
-                            TextFont {
+                            FontFace {
                                 font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                                 font_size: 33.0,
                                 ..default()
diff --git a/examples/ui/ui_texture_slice.rs b/examples/ui/ui_texture_slice.rs
index 464bdfd41bce9..18d9ac6896bf8 100644
--- a/examples/ui/ui_texture_slice.rs
+++ b/examples/ui/ui_texture_slice.rs
@@ -83,11 +83,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                     ))
                     .with_child((
                         Text::new("Button"),
-                        TextFont {
-                            font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-                            font_size: 33.0,
-                            ..default()
-                        },
+                        FontFace(asset_server.load("fonts/FiraSans-Bold.ttf")),
+                        FontSize::Px(33.0),
                         TextColor(Color::srgb(0.9, 0.9, 0.9)),
                     ));
             }
diff --git a/examples/ui/window_fallthrough.rs b/examples/ui/window_fallthrough.rs
index 275514662717c..f218275fe5604 100644
--- a/examples/ui/window_fallthrough.rs
+++ b/examples/ui/window_fallthrough.rs
@@ -29,11 +29,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     commands.spawn((
         // Accepts a `String` or any type that converts into a `String`, such as `&str`
         Text::new("Hit 'P' then scroll/click around!"),
-        TextFont {
-            font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-            font_size: 83.0, // Nice and big so you can see it!
-            ..default()
-        },
+        FontFace(asset_server.load("fonts/FiraSans-Bold.ttf")),
+        FontSize::Px(83.0), // Nice and big so you can see it!
         // Set the style of the TextBundle itself.
         Node {
             position_type: PositionType::Absolute,
diff --git a/examples/usage/context_menu.rs b/examples/usage/context_menu.rs
index b593a2e0753ee..1353544a4b0fe 100644
--- a/examples/usage/context_menu.rs
+++ b/examples/usage/context_menu.rs
@@ -134,7 +134,7 @@ fn context_item(text: &str, col: Srgba) -> impl Bundle {
         children![(
             Pickable::IGNORE,
             Text::new(text),
-            TextFont {
+            FontFace {
                 font_size: 24.0,
                 ..default()
             },
@@ -173,7 +173,7 @@ fn background_and_button() -> impl Bundle {
                     children![(
                         Pickable::IGNORE,
                         Text::new("Context Menu"),
-                        TextFont {
+                        FontFace {
                             font_size: 28.0,
                             ..default()
                         },
diff --git a/examples/window/low_power.rs b/examples/window/low_power.rs
index c484a0ff37048..73a058e9cff0f 100644
--- a/examples/window/low_power.rs
+++ b/examples/window/low_power.rs
@@ -196,10 +196,10 @@ pub(crate) mod test_setup {
             },
             ModeText,
             children![
-                TextSpan::new("Press space bar to cycle modes\n"),
-                (TextSpan::default(), TextColor(LIME.into())),
-                (TextSpan::new("\nFrame: "), TextColor(YELLOW.into())),
-                (TextSpan::new(""), TextColor(YELLOW.into())),
+                Text::new("Press space bar to cycle modes\n"),
+                (Text::default(), TextColor(LIME.into())),
+                (Text::new("\nFrame: "), TextColor(YELLOW.into())),
+                (Text::new(""), TextColor(YELLOW.into())),
             ],
         ));
     }
diff --git a/examples/window/multi_window_text.rs b/examples/window/multi_window_text.rs
index 448b67fd12b0a..b20ef936d9e74 100644
--- a/examples/window/multi_window_text.rs
+++ b/examples/window/multi_window_text.rs
@@ -4,6 +4,7 @@ use bevy::{
     color::palettes::css::{LIGHT_CYAN, YELLOW},
     prelude::*,
     sprite::Text2dShadow,
+    text::{DefaultTextStyle, TextStyle},
     window::{WindowRef, WindowResolution},
 };
 
@@ -62,32 +63,28 @@ fn setup_scene(mut commands: Commands) {
         ..default()
     };
 
-    let text_font = TextFont::from_font_size(30.);
+    commands.insert_resource(DefaultTextStyle(TextStyle {
+        font_size: FontSize::Px(30.),
+        ..Default::default()
+    }));
 
     // UI nodes can only be rendered by one camera at a time and ignore `RenderLayers`.
     // This root UI node has no `UiTargetCamera` so `bevy_ui` will try to find a
     // camera with the `IsDefaultUiCamera` marker component. When that fails (neither
     // camera spawned here has an `IsDefaultUiCamera`), it queries for the
     // first camera targeting the primary window and uses that.
-    commands.spawn(node.clone()).with_child((
-        Text::new("UI Text Primary Window"),
-        text_font.clone(),
-        TextShadow::default(),
-    ));
+    commands
+        .spawn(node.clone())
+        .with_child((Text::new("UI Text Primary Window"), TextShadow::default()));
 
     commands
         .spawn((node, UiTargetCamera(secondary_window_camera)))
-        .with_child((
-            Text::new("UI Text Secondary Window"),
-            text_font.clone(),
-            TextShadow::default(),
-        ));
+        .with_child((Text::new("UI Text Secondary Window"), TextShadow::default()));
 
     // `Text2d` belonging to render layer `0`.
     commands.spawn((
         Text2d::new("Text2d Primary Window"),
         TextColor(YELLOW.into()),
-        text_font.clone(),
         Text2dShadow::default(),
     ));
 
@@ -95,7 +92,6 @@ fn setup_scene(mut commands: Commands) {
     commands.spawn((
         Text2d::new("Text2d Secondary Window"),
         TextColor(YELLOW.into()),
-        text_font.clone(),
         Text2dShadow::default(),
         RenderLayers::layer(1),
     ));
@@ -108,7 +104,6 @@ fn setup_scene(mut commands: Commands) {
     commands.spawn((
         Text2d::new("Text2d Both Windows"),
         TextColor(LIGHT_CYAN.into()),
-        text_font,
         Text2dShadow::default(),
         RenderLayers::from_layers(&[0, 1]),
         Transform::from_xyz(0., -50., 0.),
diff --git a/examples/window/scale_factor_override.rs b/examples/window/scale_factor_override.rs
index 8cbd4bfd9cc7d..93557478188b3 100644
--- a/examples/window/scale_factor_override.rs
+++ b/examples/window/scale_factor_override.rs
@@ -45,10 +45,7 @@ fn setup(mut commands: Commands) {
             children![(
                 CustomText,
                 Text::new("Example text"),
-                TextFont {
-                    font_size: 25.0,
-                    ..default()
-                },
+                FontSize::Px(25.0),
                 Node {
                     align_self: AlignSelf::FlexEnd,
                     ..default()
diff --git a/examples/window/window_drag_move.rs b/examples/window/window_drag_move.rs
index f0550aa795c5b..40326a94d4299 100644
--- a/examples/window/window_drag_move.rs
+++ b/examples/window/window_drag_move.rs
@@ -71,16 +71,14 @@ fn setup(mut commands: Commands) {
         children![(
             Text::default(),
             children![
-                TextSpan::new(
-                    "Demonstrate drag move and drag resize without window decorations.\n\n",
-                ),
-                TextSpan::new("Controls:\n"),
-                TextSpan::new("A - change left click action ["),
-                TextSpan::new("Move"),
-                TextSpan::new("]\n"),
-                TextSpan::new("S / D - change resize direction ["),
-                TextSpan::new("NorthWest"),
-                TextSpan::new("]\n"),
+                Text::new("Demonstrate drag move and drag resize without window decorations.\n\n",),
+                Text::new("Controls:\n"),
+                Text::new("A - change left click action ["),
+                Text::new("Move"),
+                Text::new("]\n"),
+                Text::new("S / D - change resize direction ["),
+                Text::new("NorthWest"),
+                Text::new("]\n"),
             ]
         )],
     ));
diff --git a/examples/window/window_resizing.rs b/examples/window/window_resizing.rs
index 11883599d4764..09ac532c7971d 100644
--- a/examples/window/window_resizing.rs
+++ b/examples/window/window_resizing.rs
@@ -40,14 +40,7 @@ fn setup_ui(mut commands: Commands) {
             ..default()
         })
         // Text where we display current resolution
-        .with_child((
-            Text::new("Resolution"),
-            TextFont {
-                font_size: 42.0,
-                ..default()
-            },
-            ResolutionText,
-        ));
+        .with_child((Text::new("Resolution"), FontSize::Px(42.0), ResolutionText));
 }
 
 /// This system shows how to request the window to a new resolution
diff --git a/tests/window/desktop_request_redraw.rs b/tests/window/desktop_request_redraw.rs
index ccaafd86579db..a2ea9ab364520 100644
--- a/tests/window/desktop_request_redraw.rs
+++ b/tests/window/desktop_request_redraw.rs
@@ -18,7 +18,7 @@ fn main() {
         // Left and Right clicking the cube should roggle rotation on/off.
         .add_plugins(FpsOverlayPlugin {
             config: FpsOverlayConfig {
-                text_config: TextFont {
+                text_config: FontFace {
                     font_size: 12.0,
                     ..default()
                 },