diff --git a/hui-examples/examples/mom_downloader.rs b/hui-examples/examples/mom_downloader.rs
index a16745a..fa490f2 100644
--- a/hui-examples/examples/mom_downloader.rs
+++ b/hui-examples/examples/mom_downloader.rs
@@ -49,13 +49,13 @@ fn main() {
 
         hui.add(Container {
           align: (Alignment::Center, Alignment::Center),
-          size: (UiSize::Percentage(1.), UiSize::Percentage(1.)),
+          size: (UiSize::Fraction(1.), UiSize::Fraction(1.)),
           background: Some(vec4(0.1, 0.1, 0.1, 1.)),
           elements: vec![Box::new(Container {
             gap: 5.,
             padding: Sides::all(10.),
             align: (Alignment::Begin, Alignment::Begin),
-            size: (UiSize::Pixels(450.), UiSize::Auto),
+            size: (UiSize::Static(450.), UiSize::Auto),
             background: Some(vec4(0.2, 0.2, 0.5, 1.)),
             elements: elements(|el| {
               if instant.elapsed().as_secs_f32() < 5. {
diff --git a/hui-examples/examples/stress.rs b/hui-examples/examples/stress.rs
index 1498a96..7ff53d3 100644
--- a/hui-examples/examples/stress.rs
+++ b/hui-examples/examples/stress.rs
@@ -65,7 +65,7 @@ fn main() {
                 for i in 0..cnt {
                   elements.push(Box::new(ProgressBar {
                     value: (instant.elapsed().as_secs_f32() + (i as f32 / 10.)).sin().powi(2),
-                    size: (UiSize::Auto, UiSize::Pixels(5.)),
+                    size: (UiSize::Auto, UiSize::Static(5.)),
                     ..Default::default()
                   }));
                 }
diff --git a/hui-examples/examples/test.rs b/hui-examples/examples/test.rs
index 609a506..b139cd8 100644
--- a/hui-examples/examples/test.rs
+++ b/hui-examples/examples/test.rs
@@ -48,7 +48,7 @@ fn main() {
           gap: 5.,
           padding: Sides::all(5.),
           align: (Alignment::Begin, Alignment::Center),
-          size: (UiSize::Percentage(1.), UiSize::Percentage(1.)),
+          size: (UiSize::Fraction(1.), UiSize::Fraction(1.)),
           elements: vec![
             Box::new(ProgressBar {
               value: 0.5,
@@ -62,31 +62,31 @@ fn main() {
           gap: 5.,
           padding: Sides::all(5.),
           align: (Alignment::End, Alignment::Center),
-          size: (UiSize::Percentage(1.), UiSize::Percentage(1.)),
+          size: (UiSize::Fraction(1.), UiSize::Fraction(1.)),
           elements: vec![
             Box::new(ProgressBar {
               value: z,
               ..Default::default()
             }),
             Box::new(Container {
-              size: (UiSize::Percentage(1.), UiSize::Auto),
+              size: (UiSize::Fraction(1.), UiSize::Auto),
               align: (Alignment::Center, Alignment::End),
               padding: Sides::all(5.),
               gap: 10.,
               elements: vec![
                 Box::new(Rect {
-                  size: (UiSize::Percentage(0.5), UiSize::Pixels(30.)),
+                  size: (UiSize::Fraction(0.5), UiSize::Static(30.)),
                   color: Some(vec4(0.75, 0., 0., 1.))
                 }),
                 Box::new(Rect {
-                  size: (UiSize::Percentage(z / 2. + 0.5), UiSize::Pixels(30.)),
+                  size: (UiSize::Fraction(z / 2. + 0.5), UiSize::Static(30.)),
                   color: Some(vec4(0., 0.75, 0., 1.))
                 }),
               ],
               ..Default::default()
             }),
             Box::new(Rect {
-              size: (UiSize::Percentage(z / 2. + 0.5), UiSize::Pixels(30.)),
+              size: (UiSize::Fraction(z / 2. + 0.5), UiSize::Static(30.)),
               color: Some(vec4(0., 0.75, 0., 1.))
             }),
             Box::new(Container {
@@ -98,7 +98,7 @@ fn main() {
                 let mut x: Vec<Box<dyn UiElement>> = vec![];
                 for i in 0..10 {
                   x.push(Box::new(Rect {
-                    size: (UiSize::Pixels(50.), UiSize::Pixels(50.)),
+                    size: (UiSize::Static(50.), UiSize::Static(50.)),
                     color: if i == 1 {
                       Some(vec4(0.75, 0.75, 0.75, 0.75))
                     } else {
@@ -120,7 +120,7 @@ fn main() {
               },
               elements: vec![
                 Box::new(Rect {
-                  size: (UiSize::Pixels(50.), UiSize::Pixels(50.)),
+                  size: (UiSize::Static(50.), UiSize::Static(50.)),
                   color: Some(vec4(1., 1., 1., 0.75))
                 }.into_interactable().on_click(|| {
                   println!("clicked");
diff --git a/hui-examples/examples/test2.rs b/hui-examples/examples/test2.rs
index 14d7216..da9b2e2 100644
--- a/hui-examples/examples/test2.rs
+++ b/hui-examples/examples/test2.rs
@@ -39,7 +39,7 @@ fn main() {
           gap: 5.,
           padding: Sides::all(5.),
           align: (Alignment::Center, Alignment::Center),
-          size: (UiSize::Percentage(1.), UiSize::Percentage(1.)),
+          size: (UiSize::Fraction(1.), UiSize::Fraction(1.)),
           elements: vec![
             Box::new(Text {
               text: "Hello, world!\nGoodbye, world!\nowo\nuwu".into(),
diff --git a/hui-examples/examples/text_weird.rs b/hui-examples/examples/text_weird.rs
index c20b83b..b02b890 100644
--- a/hui-examples/examples/text_weird.rs
+++ b/hui-examples/examples/text_weird.rs
@@ -44,7 +44,7 @@ fn main() {
         hui.begin();
 
         hui.add(Container {
-          size: (UiSize::Percentage(1.), UiSize::Percentage(1.)),
+          size: (UiSize::Fraction(1.), UiSize::Fraction(1.)),
           background: Some(vec4(0.1, 0.1, 0.1, 1.)),
           elements: elements(|elem| {
             elem.add(Text {
@@ -68,11 +68,11 @@ fn main() {
               });
             }
             elem.add(Rect {
-              size: (UiSize::Percentage(1.), UiSize::Pixels(10.)),
+              size: (UiSize::Fraction(1.), UiSize::Static(10.)),
               color: Some(vec4(0., 0., 1., 1.)),
             });
             elem.add(Rect {
-              size: (UiSize::Percentage(1.), UiSize::Pixels(10.)),
+              size: (UiSize::Fraction(1.), UiSize::Static(10.)),
               color: Some(vec4(1., 1., 0., 1.)),
             });
             elem.add(Text {
@@ -83,11 +83,11 @@ fn main() {
             });
             if instant.elapsed().as_secs() & 1 != 0 {
               elem.add(Rect {
-                size: (UiSize::Percentage(1.), UiSize::Pixels(10.)),
+                size: (UiSize::Fraction(1.), UiSize::Static(10.)),
                 color: Some(vec4(1., 0., 0., 1.)),
               });
               elem.add(Rect {
-                size: (UiSize::Percentage(1.), UiSize::Pixels(10.)),
+                size: (UiSize::Fraction(1.), UiSize::Static(10.)),
                 color: Some(vec4(0., 0., 0., 1.)),
               });
               elem.add(Spacer(100.));
diff --git a/hui/src/element/builtin/container.rs b/hui/src/element/builtin/container.rs
index a3ccb89..e1f4ae8 100644
--- a/hui/src/element/builtin/container.rs
+++ b/hui/src/element/builtin/container.rs
@@ -87,13 +87,13 @@ impl Container {
   pub fn measure_max_inner_size(&self, layout: &LayoutInfo) -> Vec2 {
     let outer_size_x = match self.size.0 {
       UiSize::Auto => layout.max_size.x,
-      UiSize::Percentage(p) => layout.max_size.x * p,
-      UiSize::Pixels(p) => p,
+      UiSize::Fraction(p) => layout.max_size.x * p,
+      UiSize::Static(p) => p,
     };
     let outer_size_y = match self.size.1 {
       UiSize::Auto => layout.max_size.y,
-      UiSize::Percentage(p) => layout.max_size.y * p,
-      UiSize::Pixels(p) => p,
+      UiSize::Fraction(p) => layout.max_size.y * p,
+      UiSize::Static(p) => p,
     };
     vec2(
       outer_size_x - (self.padding.left + self.padding.right),
@@ -141,13 +141,13 @@ impl UiElement for Container {
 
     match self.size.0 {
       UiSize::Auto => (),
-      UiSize::Percentage(percentage) => size.x = ctx.layout.max_size.x * percentage,
-      UiSize::Pixels(pixels) => size.x = pixels,
+      UiSize::Fraction(percentage) => size.x = ctx.layout.max_size.x * percentage,
+      UiSize::Static(pixels) => size.x = pixels,
     }
     match self.size.1 {
       UiSize::Auto => (),
-      UiSize::Percentage(percentage) => size.y = ctx.layout.max_size.y * percentage,
-      UiSize::Pixels(pixels) => size.y = pixels,
+      UiSize::Fraction(percentage) => size.y = ctx.layout.max_size.y * percentage,
+      UiSize::Static(pixels) => size.y = pixels,
     }
 
     Response {
diff --git a/hui/src/element/builtin/progress_bar.rs b/hui/src/element/builtin/progress_bar.rs
index 074e3c1..720dc7c 100644
--- a/hui/src/element/builtin/progress_bar.rs
+++ b/hui/src/element/builtin/progress_bar.rs
@@ -35,13 +35,13 @@ impl UiElement for ProgressBar {
       size: vec2(
         match self.size.0 {
           UiSize::Auto => ctx.layout.max_size.x.max(300.),
-          UiSize::Percentage(p) => ctx.layout.max_size.x * p,
-          UiSize::Pixels(p) => p,
+          UiSize::Fraction(p) => ctx.layout.max_size.x * p,
+          UiSize::Static(p) => p,
         },
         match self.size.1 {
           UiSize::Auto => BAR_HEIGHT,
-          UiSize::Percentage(p) => ctx.layout.max_size.y * p,
-          UiSize::Pixels(p) => p,
+          UiSize::Fraction(p) => ctx.layout.max_size.y * p,
+          UiSize::Static(p) => p,
         }
       ),
       hints: Default::default(),
diff --git a/hui/src/element/builtin/rect.rs b/hui/src/element/builtin/rect.rs
index efa118a..554f90d 100644
--- a/hui/src/element/builtin/rect.rs
+++ b/hui/src/element/builtin/rect.rs
@@ -14,7 +14,7 @@ pub struct Rect {
 impl Default for Rect {
   fn default() -> Self {
     Self {
-      size: (UiSize::Pixels(10.), UiSize::Pixels(10.)),
+      size: (UiSize::Static(10.), UiSize::Static(10.)),
       color: Some(Vec4::new(0., 0., 0., 0.5)),
     }
   }
@@ -26,13 +26,13 @@ impl UiElement for Rect {
       size: vec2(
         match self.size.0 {
           UiSize::Auto => ctx.layout.max_size.x,
-          UiSize::Percentage(percentage) => ctx.layout.max_size.x * percentage,
-          UiSize::Pixels(pixels) => pixels,
+          UiSize::Fraction(percentage) => ctx.layout.max_size.x * percentage,
+          UiSize::Static(pixels) => pixels,
         },
         match self.size.1 {
           UiSize::Auto => ctx.layout.max_size.y,
-          UiSize::Percentage(percentage) => ctx.layout.max_size.y * percentage,
-          UiSize::Pixels(pixels) => pixels,
+          UiSize::Fraction(percentage) => ctx.layout.max_size.y * percentage,
+          UiSize::Static(pixels) => pixels,
         },
       ),
       hints: Default::default(),
diff --git a/hui/src/element/builtin/text.rs b/hui/src/element/builtin/text.rs
index 8a251fb..0993567 100644
--- a/hui/src/element/builtin/text.rs
+++ b/hui/src/element/builtin/text.rs
@@ -8,6 +8,12 @@ use crate::{
   UiSize
 };
 
+pub enum TextSize {
+  FitToWidthRatio(f32),
+  FitToHeightRatio(f32),
+  Constant(u8),
+}
+
 pub struct Text {
   pub text: Cow<'static, str>,
   pub size: (UiSize, UiSize),
@@ -40,13 +46,13 @@ impl UiElement for Text {
       size: vec2(
         match self.size.0 {
           UiSize::Auto => size.0,
-          UiSize::Percentage(percentage) => ctx.layout.max_size.x * percentage,
-          UiSize::Pixels(pixels) => pixels,
+          UiSize::Fraction(percentage) => ctx.layout.max_size.x * percentage,
+          UiSize::Static(pixels) => pixels,
         },
         match self.size.1 {
           UiSize::Auto => size.1,
-          UiSize::Percentage(percentage) => ctx.layout.max_size.y * percentage,
-          UiSize::Pixels(pixels) => pixels,
+          UiSize::Fraction(percentage) => ctx.layout.max_size.y * percentage,
+          UiSize::Static(pixels) => pixels,
         },
       ),
       hints: Default::default(),
diff --git a/hui/src/lib.rs b/hui/src/lib.rs
index f1d1a32..3e7e366 100644
--- a/hui/src/lib.rs
+++ b/hui/src/lib.rs
@@ -113,8 +113,8 @@ impl Default for UiInstance {
 pub enum UiSize {
   #[default]
   Auto,
-  Percentage(f32),
-  Pixels(f32),
+  Fraction(f32),
+  Static(f32),
 }
 
 #[derive(Default, Clone, Copy, Debug, PartialEq, Eq, PartialOrd, Ord)]