diff --git a/packages/ui/src/components/va-avatar/VaAvatar.vue b/packages/ui/src/components/va-avatar/VaAvatar.vue
index f354c11957..6bb171bc82 100644
--- a/packages/ui/src/components/va-avatar/VaAvatar.vue
+++ b/packages/ui/src/components/va-avatar/VaAvatar.vue
@@ -138,7 +138,7 @@ defineExpose({
   width: var(--va-avatar-size);
   min-width: var(--va-avatar-size);  // We only define width because common use case would be flex row, for column we expect user to set appropriate styling externally.
   height: var(--va-avatar-size);
-  font-size: var(--va-avatar-font-size);
+  font-size: var(--va-avatar-font-size, var(--va-font-size));
 
   &--small {
     --va-avatar-size: 32px;
diff --git a/packages/ui/src/components/va-avatar/_variables.scss b/packages/ui/src/components/va-avatar/_variables.scss
index 3479f24c02..0425ded2c3 100644
--- a/packages/ui/src/components/va-avatar/_variables.scss
+++ b/packages/ui/src/components/va-avatar/_variables.scss
@@ -9,6 +9,7 @@
   --va-avatar-position: relative;
   --va-avatar-line-height: normal;
   --va-avatar-border-radius: 50%;
+  --va-avatar-font-size: unset;
 
   /* Medium */
   --va-avatar-size: 48px;
diff --git a/packages/ui/src/composables/useComponentVariables.ts b/packages/ui/src/composables/useComponentVariables.ts
index 988ca49d6c..494bb47236 100644
--- a/packages/ui/src/composables/useComponentVariables.ts
+++ b/packages/ui/src/composables/useComponentVariables.ts
@@ -1,5 +1,4 @@
 import { cssVariableName } from '../utils/css-variables'
-import { ReadonlyOrPlainArray } from '../utils/types/array'
 import { computed, CSSProperties, getCurrentInstance } from 'vue'
 import { isCSSSizeValue, isCSSVariable } from '../utils/css'
 import isNil from 'lodash/isNil'
@@ -16,7 +15,7 @@ export const useComponentVariables = <Variables extends string>(props: SizeProps
     throw new Error('Component name must be provided!')
   }
 
-  const computedClass = useBem(componentName, () => {
+  const sizeModifierComputed = computed(() => {
     const size = props.size
 
     if (size && !(typeof size === 'string' && (isCSSVariable(size) || isCSSSizeValue(size)))) {
@@ -28,6 +27,11 @@ export const useComponentVariables = <Variables extends string>(props: SizeProps
     return {}
   })
 
+  const componentClass = useBem(componentName, sizeModifierComputed)
+  const fontClass = useBem('va-font-size', sizeModifierComputed)
+
+  const computedClass = computed(() => ({ ...fontClass.asObject.value, ...componentClass.asObject.value }))
+
   const computedStyle = computed(() => {
     const size = props.size
 
@@ -55,7 +59,7 @@ export const useComponentVariables = <Variables extends string>(props: SizeProps
   })
 
   return computed(() => ({
-    class: computedClass,
+    class: computedClass.value,
     style: computedStyle.value,
   }))
 }
diff --git a/packages/ui/src/styles/typography/typography.scss b/packages/ui/src/styles/typography/typography.scss
index 18a522c69e..839d74ad08 100644
--- a/packages/ui/src/styles/typography/typography.scss
+++ b/packages/ui/src/styles/typography/typography.scss
@@ -8,6 +8,14 @@
   font-family: var(--va-font-family);
 }
 
+.va-font-size--small {
+  --va-font-size: var(--va-small-font-size);
+}
+
+.va-font-size--large {
+  --va-font-size: var(--va-large-font-size);
+}
+
 .va-typography-block {
   font-family: var(--va-font-family);