diff --git a/components/styles/__tests__/__snapshots__/theme-provider.test.tsx.snap b/components/styles/__tests__/__snapshots__/theme-provider.test.tsx.snap
index 13d93b9..44a80ed 100644
--- a/components/styles/__tests__/__snapshots__/theme-provider.test.tsx.snap
+++ b/components/styles/__tests__/__snapshots__/theme-provider.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`ThemeProvider should merge themes with custom function 1`] = `
 initialize {
   "0": Object {
     "attribs": Object {
-      "class": "",
+      "class": " ",
     },
     "children": Array [
       Object {
@@ -25,6 +25,10 @@ initialize {
         p {
           color: #ccc;
         }
+        
+        .custom-size {
+          font-size: inherit;
+        }
       ",
           "next": null,
           "parent": [Circular],
@@ -70,6 +74,10 @@ initialize {
         p {
           color: #ccc;
         }
+        
+        .custom-size {
+          font-size: inherit;
+        }
       ",
               "next": null,
               "parent": [Circular],
@@ -113,6 +121,10 @@ initialize {
         p {
           color: #ccc;
         }
+        
+        .custom-size {
+          font-size: inherit;
+        }
       ",
         "next": null,
         "parent": [Circular],
@@ -126,7 +138,7 @@ initialize {
     "parent": null,
     "prev": Object {
       "attribs": Object {
-        "class": "",
+        "class": " ",
       },
       "children": Array [
         Object {
@@ -170,7 +182,7 @@ initialize {
       "children": Array [
         Object {
           "attribs": Object {
-            "class": "",
+            "class": " ",
           },
           "children": Array [
             Object {
diff --git a/components/text/__tests__/__snapshots__/index.test.tsx.snap b/components/text/__tests__/__snapshots__/index.test.tsx.snap
index 82f9922..9d4a0cc 100644
--- a/components/text/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/text/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,109 +1,221 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Text should render P element in the default 1`] = `
-"<p class=\\"\\">test-value</p><style>
+exports[`Text should be able to specify the size of text 1`] = `
+"<p class=\\"custom-size \\">test-value</p><style>
         p {
           color: inherit;
         }
+        
+        .custom-size {
+          font-size: 14px;
+        }
+      </style>"
+`;
+
+exports[`Text should be able to specify the size of text 2`] = `
+"<p class=\\"custom-size \\">test-value</p><style>
+        p {
+          color: inherit;
+        }
+        
+        .custom-size {
+          font-size: 12rem;
+        }
+      </style>"
+`;
+
+exports[`Text should render P element in the default 1`] = `
+"<p class=\\" \\">test-value</p><style>
+        p {
+          color: inherit;
+        }
+        
+        .custom-size {
+          font-size: inherit;
+        }
       </style>"
 `;
 
 exports[`Text should render default color when type missing 1`] = `
-"<p class=\\"\\">test-value</p><style>
+"<p class=\\" \\">test-value</p><style>
         p {
           color: inherit;
         }
+        
+        .custom-size {
+          font-size: inherit;
+        }
       </style>"
 `;
 
 exports[`Text should work with different styles 1`] = `
-"<div><p class=\\"\\">test-value</p><style>
+"<div><p class=\\" \\">test-value</p><style>
         p {
           color: #666;
         }
-      </style><p class=\\"\\">test-value</p><style>
+        
+        .custom-size {
+          font-size: inherit;
+        }
+      </style><p class=\\" \\">test-value</p><style>
         p {
           color: #0070f3;
         }
-      </style><p class=\\"\\">test-value</p><style>
+        
+        .custom-size {
+          font-size: inherit;
+        }
+      </style><p class=\\" \\">test-value</p><style>
         p {
           color: #f5a623;
         }
-      </style><p class=\\"\\">test-value</p><style>
+        
+        .custom-size {
+          font-size: inherit;
+        }
+      </style><p class=\\" \\">test-value</p><style>
         p {
           color: #ff0000;
         }
+        
+        .custom-size {
+          font-size: inherit;
+        }
       </style></div>"
 `;
 
 exports[`Text the combined style should be rendered 1`] = `
-"<p class=\\"\\"><b class=\\"\\"><del class=\\"\\">test-value</del><style>
+"<p class=\\" \\"><b class=\\" \\"><del class=\\" \\">test-value</del><style>
         del {
           color: inherit;
         }
+        
+        .custom-size {
+          font-size: inherit;
+        }
       </style></b><style>
         b {
           color: inherit;
         }
+        
+        .custom-size {
+          font-size: inherit;
+        }
       </style></p><style>
         p {
           color: inherit;
         }
+        
+        .custom-size {
+          font-size: inherit;
+        }
       </style>"
 `;
 
 exports[`Text the specified element should be rendered 1`] = `
-"<div><h1 class=\\"\\">test-value</h1><style>
+"<div><h1 class=\\" \\">test-value</h1><style>
         h1 {
           color: inherit;
         }
-      </style><h2 class=\\"\\">test-value</h2><style>
+        
+        .custom-size {
+          font-size: inherit;
+        }
+      </style><h2 class=\\" \\">test-value</h2><style>
         h2 {
           color: inherit;
         }
-      </style><h3 class=\\"\\">test-value</h3><style>
+        
+        .custom-size {
+          font-size: inherit;
+        }
+      </style><h3 class=\\" \\">test-value</h3><style>
         h3 {
           color: inherit;
         }
-      </style><h4 class=\\"\\">test-value</h4><style>
+        
+        .custom-size {
+          font-size: inherit;
+        }
+      </style><h4 class=\\" \\">test-value</h4><style>
         h4 {
           color: inherit;
         }
-      </style><h5 class=\\"\\">test-value</h5><style>
+        
+        .custom-size {
+          font-size: inherit;
+        }
+      </style><h5 class=\\" \\">test-value</h5><style>
         h5 {
           color: inherit;
         }
-      </style><h6 class=\\"\\">test-value</h6><style>
+        
+        .custom-size {
+          font-size: inherit;
+        }
+      </style><h6 class=\\" \\">test-value</h6><style>
         h6 {
           color: inherit;
         }
-      </style><p class=\\"\\">test-value</p><style>
+        
+        .custom-size {
+          font-size: inherit;
+        }
+      </style><p class=\\" \\">test-value</p><style>
         p {
           color: inherit;
         }
-      </style><small class=\\"\\">test-value</small><style>
+        
+        .custom-size {
+          font-size: inherit;
+        }
+      </style><small class=\\" \\">test-value</small><style>
         small {
           color: inherit;
         }
-      </style><span class=\\"\\">test-value</span><style>
+        
+        .custom-size {
+          font-size: inherit;
+        }
+      </style><span class=\\" \\">test-value</span><style>
         span {
           color: inherit;
         }
-      </style><del class=\\"\\">test-value</del><style>
+        
+        .custom-size {
+          font-size: inherit;
+        }
+      </style><del class=\\" \\">test-value</del><style>
         del {
           color: inherit;
         }
-      </style><i class=\\"\\">test-value</i><style>
+        
+        .custom-size {
+          font-size: inherit;
+        }
+      </style><i class=\\" \\">test-value</i><style>
         i {
           color: inherit;
         }
-      </style><em class=\\"\\">test-value</em><style>
+        
+        .custom-size {
+          font-size: inherit;
+        }
+      </style><em class=\\" \\">test-value</em><style>
         em {
           color: inherit;
         }
-      </style><b class=\\"\\">test-value</b><style>
+        
+        .custom-size {
+          font-size: inherit;
+        }
+      </style><b class=\\" \\">test-value</b><style>
         b {
           color: inherit;
         }
+        
+        .custom-size {
+          font-size: inherit;
+        }
       </style></div>"
 `;
diff --git a/components/text/__tests__/index.test.tsx b/components/text/__tests__/index.test.tsx
index 5da7bed..2bc3078 100644
--- a/components/text/__tests__/index.test.tsx
+++ b/components/text/__tests__/index.test.tsx
@@ -54,4 +54,13 @@ describe('Text', () => {
     expect(wrapper.html()).toMatchSnapshot()
     expect(() => wrapper.unmount()).not.toThrow()
   })
+  
+  it('should be able to specify the size of text', () => {
+    let wrapper = mount(<Text size={14}>test-value</Text>)
+    expect(wrapper.html()).toMatchSnapshot()
+  
+    wrapper = mount(<Text size="12rem">test-value</Text>)
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
 })
diff --git a/components/text/child.tsx b/components/text/child.tsx
index ddcc30e..1cfc413 100644
--- a/components/text/child.tsx
+++ b/components/text/child.tsx
@@ -7,6 +7,7 @@ import { ZeitUIThemesPalette } from '../styles/themes'
 export interface Props {
   tag: keyof JSX.IntrinsicElements
   type?: NormalTypes
+  size?: string | number
   className?: ''
 }
 
@@ -31,7 +32,7 @@ type NativeAttrs = Omit<React.DetailsHTMLAttributes<any>, keyof Props>
 export type TextChildProps = Props & typeof defaultProps & NativeAttrs
 
 const TextChild: React.FC<React.PropsWithChildren<TextChildProps>> = React.memo(({
-  children, tag, className, type, ...props
+  children, tag, className, type, size, ...props
 }) => {
   const theme = useTheme()
   const Component = tag
@@ -39,13 +40,26 @@ const TextChild: React.FC<React.PropsWithChildren<TextChildProps>> = React.memo(
     () => getTypeColor(type, theme.palette),
     [type, theme.palette],
   )
+  const fontSize = useMemo<string>(() => {
+    if (!size) return 'inherit'
+    if (typeof size === 'number') return `${size}px`
+    return size
+  }, [size])
+  
   return (
     <>
-      <Component className={className} {...props}>{children}</Component>
+      <Component className={`${size ? 'custom-size' : ''} ${className}`}
+        {...props}>
+        {children}
+      </Component>
       <style jsx>{`
         ${tag} {
           color: ${color};
         }
+        
+        .custom-size {
+          font-size: ${fontSize};
+        }
       `}</style>
     </>
   )
diff --git a/components/text/text.tsx b/components/text/text.tsx
index c2cb9c0..610f68f 100644
--- a/components/text/text.tsx
+++ b/components/text/text.tsx
@@ -19,6 +19,7 @@ interface Props {
   em?: boolean
   blockquote?: boolean
   className?: string
+  size?: string | number
   type?: NormalTypes
 }
 
@@ -48,19 +49,23 @@ export type TextProps = Props & typeof defaultProps & NativeAttrs
 
 type TextRenderableElements = Array<keyof JSX.IntrinsicElements>
 
-const getModifierChild = (tags: TextRenderableElements, children: ReactNode) => {
+const getModifierChild = (
+  tags: TextRenderableElements,
+  children: ReactNode,
+  size?: string | number
+) => {
   if (!tags.length) return children
   const nextTag = tags.slice(1, tags.length)
   return (
-    <TextChild tag={tags[0]}>
-      {getModifierChild(nextTag, children)}
+    <TextChild tag={tags[0]} size={size}>
+      {getModifierChild(nextTag, children, size)}
     </TextChild>
   )
 }
 
 const Text: React.FC<React.PropsWithChildren<TextProps>> = React.memo(({
   h1, h2, h3, h4, h5, h6, p, b, small, i, span, del, em, blockquote,
-  children, className, ...props
+  size, children, className, ...props
 }) => {
   const elements: ElementMap = { h1, h2, h3, h4, h5, h6, p, blockquote }
   const inlineElements: ElementMap = { span, small, b, em, i, del }
@@ -90,11 +95,11 @@ const Text: React.FC<React.PropsWithChildren<TextProps>> = React.memo(({
 
   const modifers = useMemo(() => {
     if (!renderableChildElements.length) return children
-    return getModifierChild(renderableChildElements, children)
-  }, [renderableChildElements, children])
+    return getModifierChild(renderableChildElements, children, size)
+  }, [renderableChildElements, children, size])
 
   return (
-    <TextChild className={className} tag={tag} {...props}>{modifers}</TextChild>
+    <TextChild className={className} tag={tag} size={size} {...props}>{modifers}</TextChild>
   )
 })
 
diff --git a/pages/en-us/components/text.mdx b/pages/en-us/components/text.mdx
index 1ec87e3..90f93ae 100644
--- a/pages/en-us/components/text.mdx
+++ b/pages/en-us/components/text.mdx
@@ -93,6 +93,19 @@ Display text using well-defined typographic styles.
 </>
 `} />
 
+<Playground
+  title="Sizes"
+  scope={{ Text }}
+  code={`
+<>
+  <Text size={12}>Font Size: 12px;</Text>
+  <Text size={14}>Font Size: 14px;</Text>
+  <Text size="100%">Font Size: 100%;</Text>
+  <Text size="1.25rem">Font Size: 1.25rem;</Text>
+  <Text size="2em">Font Size: 2em;</Text>
+</>
+`} />
+
 <Playground
   title="Compose"
   desc="Effect of multiple `Text` stacks"
@@ -124,6 +137,7 @@ Display text using well-defined typographic styles.
 | **em** | component name | `boolean` | - | `false` |
 | **b** | component name | `boolean` | - | `false` |
 | **blockquote** | component name | `boolean` | - | `false` |
+| **size** | size of text | `string` / `number` | - | follow elements |
 | **type** | text type | `NormalTypes` | [TextTypes](#texttypes) | `default` |
 | ... | native props | `HTMLAttributes` | `'id', 'className', ...` | - |
 
diff --git a/pages/zh-cn/components/text.mdx b/pages/zh-cn/components/text.mdx
index f41ba30..a8cd1d8 100644
--- a/pages/zh-cn/components/text.mdx
+++ b/pages/zh-cn/components/text.mdx
@@ -118,6 +118,19 @@ export const meta = {
 </>
 `} />
 
+<Playground
+  title="字体大小"
+  scope={{ Text }}
+  code={`
+<>
+  <Text size={12}>Font Size: 12px;</Text>
+  <Text size={14}>Font Size: 14px;</Text>
+  <Text size="100%">Font Size: 100%;</Text>
+  <Text size="1.25rem">Font Size: 1.25rem;</Text>
+  <Text size="2em">Font Size: 2em;</Text>
+</>
+`} />
+
 <Attributes edit="/pages/zh-cn/components/text.mdx">
 <Attributes.Title>Text.Props</Attributes.Title>
 
@@ -132,6 +145,7 @@ export const meta = {
 | **em** | 渲染的组件名 | `boolean` | - | `false` |
 | **b** | 渲染的组件名 | `boolean` | - | `false` |
 | **blockquote** | 渲染的组件名 | `boolean` | - | `false` |
+| **size** | 手动设置文字大小 | `string` / `number` | - | 跟随元素变化 |
 | **type** | 文字类型 | `NormalTypes` | [TextTypes](#texttypes) | `default` |
 | ... | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | - |