diff --git a/app/javascript/application.js b/app/javascript/application.js
index 6ff4b401..af363801 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -36,6 +36,7 @@ import IndeterminateCheckbox from './elements/indeterminate_checkbox'
 import AppTour from './elements/app_tour'
 import DashboardDropzone from './elements/dashboard_dropzone'
 import RequiredCheckboxGroup from './elements/required_checkbox_group'
+import PageContainer from './elements/page_container'
 
 import * as TurboInstantClick from './lib/turbo_instant_click'
 
@@ -107,6 +108,7 @@ safeRegisterElement('app-tour', AppTour)
 safeRegisterElement('dashboard-dropzone', DashboardDropzone)
 safeRegisterElement('check-on-click', CheckOnClick)
 safeRegisterElement('required-checkbox-group', RequiredCheckboxGroup)
+safeRegisterElement('page-container', PageContainer)
 
 safeRegisterElement('template-builder', class extends HTMLElement {
   connectedCallback () {
diff --git a/app/javascript/application.scss b/app/javascript/application.scss
index 61d3f645..1ab92498 100644
--- a/app/javascript/application.scss
+++ b/app/javascript/application.scss
@@ -147,3 +147,11 @@ button[disabled] .enabled {
   outline-offset: 3px;
   outline-color: hsl(var(--bc) / 0.2);
 }
+
+.font-times {
+  font-family: "Times New Roman", Times, ui-serif, serif, Cambria, Georgia;
+}
+
+.font-courier {
+  font-family: "Courier New", Consolas, "Liberation Mono", monospace, ui-monospace, SFMono-Regular, Menlo, Monaco;
+}
diff --git a/app/javascript/elements/page_container.js b/app/javascript/elements/page_container.js
new file mode 100644
index 00000000..d909ae7f
--- /dev/null
+++ b/app/javascript/elements/page_container.js
@@ -0,0 +1,14 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.image.addEventListener('load', (e) => {
+      this.image.setAttribute('width', e.target.naturalWidth)
+      this.image.setAttribute('height', e.target.naturalHeight)
+
+      this.style.aspectRatio = `${e.target.naturalWidth} / ${e.target.naturalHeight}`
+    })
+  }
+
+  get image () {
+    return this.querySelector('img')
+  }
+}
diff --git a/app/javascript/form.js b/app/javascript/form.js
index 45b3b3d2..ac49174d 100644
--- a/app/javascript/form.js
+++ b/app/javascript/form.js
@@ -5,6 +5,7 @@ import DownloadButton from './elements/download_button'
 import ToggleSubmit from './elements/toggle_submit'
 import FetchForm from './elements/fetch_form'
 import ScrollButtons from './elements/scroll_buttons'
+import PageContainer from './elements/page_container'
 
 const safeRegisterElement = (name, element, options = {}) => !window.customElements.get(name) && window.customElements.define(name, element, options)
 
@@ -12,6 +13,7 @@ safeRegisterElement('download-button', DownloadButton)
 safeRegisterElement('toggle-submit', ToggleSubmit)
 safeRegisterElement('fetch-form', FetchForm)
 safeRegisterElement('scroll-buttons', ScrollButtons)
+safeRegisterElement('page-container', PageContainer)
 safeRegisterElement('submission-form', class extends HTMLElement {
   connectedCallback () {
     this.appElem = document.createElement('div')
diff --git a/app/javascript/form.scss b/app/javascript/form.scss
index fb651155..f0d26baf 100644
--- a/app/javascript/form.scss
+++ b/app/javascript/form.scss
@@ -70,3 +70,11 @@ button[disabled] .enabled {
 .base-radio {
   @apply radio bg-white radio-sm;
 }
+
+.font-times {
+  font-family: "Times New Roman", Times, ui-serif, serif, Cambria, Georgia;
+}
+
+.font-courier {
+  font-family: "Courier New", Consolas, "Liberation Mono", monospace, ui-monospace, SFMono-Regular, Menlo, Monaco;
+}
diff --git a/app/javascript/submission_form/area.vue b/app/javascript/submission_form/area.vue
index 5aed2a7a..bc5c255b 100644
--- a/app/javascript/submission_form/area.vue
+++ b/app/javascript/submission_form/area.vue
@@ -2,8 +2,8 @@
   <div
     class="flex absolute lg:text-base -outline-offset-1 field-area"
     dir="auto"
-    :style="computedStyle"
-    :class="{ 'text-[1.6vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars, 'cursor-default': !submittable, 'border border-red-100 bg-red-100 cursor-pointer': submittable, 'border border-red-100': !isActive && submittable, 'bg-opacity-80': !isActive && !isValueSet && submittable, 'outline-red-500 outline-dashed outline-2 z-10 field-area-active': isActive && submittable, 'bg-opacity-40': (isActive || isValueSet) && submittable }"
+    :style="[computedStyle, fontStyle]"
+    :class="{ 'cursor-default': !submittable, 'border border-red-100 bg-red-100 cursor-pointer': submittable, 'border border-red-100': !isActive && submittable, 'bg-opacity-80': !isActive && !isValueSet && submittable, 'outline-red-500 outline-dashed outline-2 z-10 field-area-active': isActive && submittable, 'bg-opacity-40': (isActive || isValueSet) && submittable }"
   >
     <div
       v-if="(!withFieldPlaceholder || !field.name || field.type === 'cells') && !isActive && !isValueSet && field.type !== 'checkbox' && submittable && !area.option_uuid"
@@ -236,6 +236,11 @@ export default {
       type: Object,
       required: true
     },
+    isInlineSize: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     submitter: {
       type: Object,
       required: false,
@@ -348,8 +353,8 @@ export default {
       }
 
       return {
-        'font-mono': this.field.preferences.font === 'Courier',
-        'font-serif': this.field.preferences.font === 'Times',
+        'font-courier': this.field.preferences.font === 'Courier',
+        'font-times': this.field.preferences.font === 'Times',
         'font-bold': ['bold_italic', 'bold'].includes(this.field.preferences.font_type),
         italic: ['bold_italic', 'italic'].includes(this.field.preferences.font_type)
       }
@@ -427,6 +432,37 @@ export default {
         return []
       }
     },
+    fontStyle () {
+      let fontSize = ''
+
+      if (this.isInlineSize) {
+        if (this.textOverflowChars) {
+          fontSize = `${this.fontSizePx / 1.5 / 10}cqmin`
+        } else {
+          fontSize = `${this.fontSizePx / 10}cqmin`
+        }
+      } else {
+        if (this.textOverflowChars) {
+          fontSize = `clamp(1pt, ${this.fontSizePx / 1.5 / 10}vw, ${this.fontSizePx / 1.5}px)`
+        } else {
+          fontSize = `clamp(1pt, ${this.fontSizePx / 10}vw, ${this.fontSizePx}px)`
+        }
+      }
+
+      return { fontSize, lineHeight: `calc(${fontSize} * ${this.lineHeight})` }
+    },
+    fontSizePx () {
+      return parseInt(this.field?.preferences?.font_size || 11) * this.fontScale
+    },
+    lineHeight () {
+      return 1.3
+    },
+    fontScale () {
+      return 1000 / 612.0
+    },
+    ladscapeScale () {
+      return 8.5 / 11.0
+    },
     computedStyle () {
       const { x, y, w, h } = this.area
 
@@ -437,11 +473,6 @@ export default {
         height: h * 100 + '%'
       }
 
-      if (this.field.preferences?.font_size) {
-        style.fontSize = `clamp(4pt, 1.6vw, ${parseInt(this.field.preferences.font_size) * 1.23}pt)`
-        style.lineHeight = `clamp(6pt, 2.0vw, ${parseInt(this.field.preferences.font_size) * 1.23 + 3}pt)`
-      }
-
       if (this.field.preferences?.color) {
         style.color = this.field.preferences.color
       }
@@ -456,7 +487,7 @@ export default {
     modelValue () {
       this.$nextTick(() => {
         if (['date', 'text', 'number'].includes(this.field.type) && this.$refs.textContainer && (this.textOverflowChars === 0 || (this.textOverflowChars - 4) > `${this.modelValue}`.length)) {
-          this.textOverflowChars = this.$refs.textContainer.scrollHeight > this.$refs.textContainer.clientHeight ? `${this.modelValue || (this.withFieldPlaceholder ? this.field.name : '')}`.length : 0
+          this.textOverflowChars = this.$refs.textContainer.scrollHeight > (this.$refs.textContainer.clientHeight + 1) ? `${this.modelValue || (this.withFieldPlaceholder ? this.field.name : '')}`.length : 0
         }
       })
     }
@@ -464,7 +495,7 @@ export default {
   mounted () {
     this.$nextTick(() => {
       if (['date', 'text', 'number'].includes(this.field.type) && this.$refs.textContainer) {
-        this.textOverflowChars = this.$refs.textContainer.scrollHeight > this.$refs.textContainer.clientHeight ? `${this.modelValue || (this.withFieldPlaceholder ? this.field.name : '')}`.length : 0
+        this.textOverflowChars = this.$refs.textContainer.scrollHeight > (this.$refs.textContainer.clientHeight + 1) ? `${this.modelValue || (this.withFieldPlaceholder ? this.field.name : '')}`.length : 0
       }
     })
   },
diff --git a/app/javascript/submission_form/areas.vue b/app/javascript/submission_form/areas.vue
index 67ac0bdd..e14087ec 100644
--- a/app/javascript/submission_form/areas.vue
+++ b/app/javascript/submission_form/areas.vue
@@ -23,6 +23,7 @@
             :area="area"
             :submittable="submittable"
             :field-index="fieldIndex"
+            :is-inline-size="isInlineSize"
             :scroll-padding="scrollPadding"
             :submitter="submitter"
             :with-field-placeholder="withFieldPlaceholder"
@@ -110,6 +111,9 @@ export default {
     }
   },
   computed: {
+    isInlineSize () {
+      return CSS.supports('container-type: size')
+    },
     isMobileContainer () {
       const root = this.$root.$el.parentNode.getRootNode()
       const container = root.body || root.querySelector('div')
diff --git a/app/javascript/submission_form/form.vue b/app/javascript/submission_form/form.vue
index 358c0396..d9d9e176 100644
--- a/app/javascript/submission_form/form.vue
+++ b/app/javascript/submission_form/form.vue
@@ -67,7 +67,7 @@
   <button
     v-if="!isFormVisible"
     id="expand_form_button"
-    class="btn btn-neutral flex text-white absolute bottom-0 w-full mb-3 expand-form-button"
+    class="btn btn-neutral flex text-white absolute bottom-0 w-full mb-3 expand-form-button text-base"
     style="width: 96%; margin-left: 2%"
     @click.prevent="[isFormVisible = true, scrollIntoField(currentField)]"
   >
diff --git a/app/javascript/submission_form/formula_areas.vue b/app/javascript/submission_form/formula_areas.vue
index 02030e77..062e2f67 100644
--- a/app/javascript/submission_form/formula_areas.vue
+++ b/app/javascript/submission_form/formula_areas.vue
@@ -14,6 +14,7 @@
         <FieldArea
           v-if="isMathLoaded"
           :model-value="calculateFormula(field)"
+          :is-inline-size="isInlineSize"
           :field="field"
           :area="area"
           :submittable="false"
@@ -54,6 +55,11 @@ export default {
       isMathLoaded: false
     }
   },
+  computed: {
+    isInlineSize () {
+      return CSS.supports('container-type: size')
+    }
+  },
   async mounted () {
     const {
       create,
diff --git a/app/javascript/template_builder/area.vue b/app/javascript/template_builder/area.vue
index e0a5937e..9bf5970c 100644
--- a/app/javascript/template_builder/area.vue
+++ b/app/javascript/template_builder/area.vue
@@ -172,7 +172,8 @@
       >
         <div
           v-if="isDefaultValuePresent || isValueInput || (withFieldPlaceholder && field.areas && field.type !== 'checkbox')"
-          :class="{ 'w-full h-full': ['cells', 'checkbox'].includes(field.type), 'text-[1.6vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars }"
+          :class="{ 'w-full h-full': ['cells', 'checkbox'].includes(field.type) }"
+          :style="fontStyle"
         >
           <div
             ref="textContainer"
@@ -315,7 +316,7 @@ export default {
     FieldSubmitter,
     IconX
   },
-  inject: ['template', 'selectedAreaRef', 'save', 't'],
+  inject: ['template', 'selectedAreaRef', 'save', 't', 'isInlineSize'],
   props: {
     area: {
       type: Object,
@@ -385,6 +386,37 @@ export default {
     fieldNames: FieldType.computed.fieldNames,
     fieldLabels: FieldType.computed.fieldLabels,
     fieldIcons: FieldType.computed.fieldIcons,
+    fontStyle () {
+      let fontSize = ''
+
+      if (this.isInlineSize) {
+        if (this.textOverflowChars) {
+          fontSize = `${this.fontSizePx / 1.5 / 10}cqmin`
+        } else {
+          fontSize = `${this.fontSizePx / 10}cqmin`
+        }
+      } else {
+        if (this.textOverflowChars) {
+          fontSize = `clamp(1pt, ${this.fontSizePx / 1.5 / 10}vw, ${this.fontSizePx / 1.5}px)`
+        } else {
+          fontSize = `clamp(1pt, ${this.fontSizePx / 10}vw, ${this.fontSizePx}px)`
+        }
+      }
+
+      return { fontSize, lineHeight: `calc(${fontSize} * ${this.lineHeight})` }
+    },
+    fontSizePx () {
+      return parseInt(this.field?.preferences?.font_size || 11) * this.fontScale
+    },
+    lineHeight () {
+      return 1.3
+    },
+    fontScale () {
+      return 1040 / 612.0
+    },
+    ladscapeScale () {
+      return 8.5 / 11.0
+    },
     isDefaultValuePresent () {
       if (this.field?.type === 'radio' && this.field?.areas?.length > 1) {
         return false
@@ -413,8 +445,8 @@ export default {
         'justify-center': this.field.preferences.align === 'center',
         'justify-start': this.field.preferences.align === 'left',
         'justify-end': this.field.preferences.align === 'right',
-        'font-mono': this.field.preferences.font === 'Courier',
-        'font-serif': this.field.preferences.font === 'Times',
+        'font-courier': this.field.preferences.font === 'Courier',
+        'font-times': this.field.preferences.font === 'Times',
         'font-bold': ['bold_italic', 'bold'].includes(this.field.preferences.font_type),
         italic: ['bold_italic', 'italic'].includes(this.field.preferences.font_type)
       }
@@ -491,7 +523,7 @@ export default {
     'field.default_value' () {
       this.$nextTick(() => {
         if (['date', 'text', 'number'].includes(this.field.type) && this.field.default_value && this.$refs.textContainer && (this.textOverflowChars === 0 || (this.textOverflowChars - 4) > `${this.field.default_value}`.length)) {
-          this.textOverflowChars = this.$el.clientHeight < this.$refs.textContainer.clientHeight ? `${this.field.default_value}`.length : 0
+          this.textOverflowChars = (this.$el.clientHeight + 1) < this.$refs.textContainer.clientHeight ? `${this.field.default_value}`.length : 0
         }
       })
     }
@@ -499,7 +531,7 @@ export default {
   mounted () {
     this.$nextTick(() => {
       if (['date', 'text', 'number'].includes(this.field.type) && this.field.default_value && this.$refs.textContainer && (this.textOverflowChars === 0 || (this.textOverflowChars - 4) > `${this.field.default_value}`.length)) {
-        this.textOverflowChars = this.$el.clientHeight < this.$refs.textContainer.clientHeight ? `${this.field.default_value}`.length : 0
+        this.textOverflowChars = (this.$el.clientHeight + 1) < this.$refs.textContainer.clientHeight ? `${this.field.default_value}`.length : 0
       }
     })
   },
diff --git a/app/javascript/template_builder/builder.vue b/app/javascript/template_builder/builder.vue
index 5df396d8..2dca776a 100644
--- a/app/javascript/template_builder/builder.vue
+++ b/app/javascript/template_builder/builder.vue
@@ -542,6 +542,7 @@ export default {
       isPaymentConnected: this.isPaymentConnected,
       withFormula: this.withFormula,
       withConditions: this.withConditions,
+      isInlineSize: this.isInlineSize,
       defaultDrawFieldType: this.defaultDrawFieldType,
       selectedAreaRef: computed(() => this.selectedAreaRef),
       fieldsDragFieldRef: computed(() => this.fieldsDragFieldRef)
@@ -793,6 +794,9 @@ export default {
     language () {
       return this.locale.split('-')[0].toLowerCase()
     },
+    isInlineSize () {
+      return CSS.supports('container-type: size')
+    },
     isMobile () {
       const isMobileSafariIos = 'ontouchstart' in window && navigator.maxTouchPoints > 0 && /AppleWebKit/i.test(navigator.userAgent)
 
diff --git a/app/javascript/template_builder/document.vue b/app/javascript/template_builder/document.vue
index 7bba06c7..0ca06084 100644
--- a/app/javascript/template_builder/document.vue
+++ b/app/javascript/template_builder/document.vue
@@ -29,6 +29,7 @@
 </template>
 <script>
 import Page from './page'
+import { reactive } from 'vue'
 
 export default {
   name: 'TemplateDocument',
@@ -123,14 +124,14 @@ export default {
       return this.document.metadata?.pdf?.number_of_pages || this.document.preview_images.length
     },
     sortedPreviewImages () {
-      const lazyloadMetadata = this.document.preview_images[this.document.preview_images.length - 1].metadata
+      const lazyloadMetadata = this.document.preview_images[this.document.preview_images.length - 1]?.metadata || { width: 1400, height: 1812 }
 
       return [...Array(this.numberOfPages).keys()].map((i) => {
-        return this.previewImagesIndex[i] || {
-          metadata: lazyloadMetadata,
+        return this.previewImagesIndex[i] || reactive({
+          metadata: { ...lazyloadMetadata },
           id: Math.random().toString(),
           url: this.basePreviewUrl + `/preview/${this.document.signed_uuid || this.document.uuid}/${i}.jpg`
-        }
+        })
       })
     },
     previewImagesIndex () {
diff --git a/app/javascript/template_builder/font_modal.vue b/app/javascript/template_builder/font_modal.vue
index dffe4f4b..86ee657a 100644
--- a/app/javascript/template_builder/font_modal.vue
+++ b/app/javascript/template_builder/font_modal.vue
@@ -222,8 +222,8 @@ export default {
     fonts () {
       return [
         { value: null, label: 'Default' },
-        { value: 'Times', label: 'Times', class: 'font-serif' },
-        { value: 'Courier', label: 'Courier', class: 'font-mono' }
+        { value: 'Times', label: 'Times', class: 'font-times' },
+        { value: 'Courier', label: 'Courier', class: 'font-courier' }
       ]
     },
     types () {
@@ -258,8 +258,8 @@ export default {
     },
     textClasses () {
       return {
-        'font-mono': this.preferences.font === 'Courier',
-        'font-serif': this.preferences.font === 'Times',
+        'font-courier': this.preferences.font === 'Courier',
+        'font-times': this.preferences.font === 'Times',
         'justify-center': this.preferences.align === 'center',
         'justify-start': this.preferences.align === 'left',
         'justify-end': this.preferences.align === 'right',
diff --git a/app/javascript/template_builder/page.vue b/app/javascript/template_builder/page.vue
index 3934f24b..93ae0296 100644
--- a/app/javascript/template_builder/page.vue
+++ b/app/javascript/template_builder/page.vue
@@ -1,8 +1,9 @@
 <template>
   <div
-    class="relative select-none"
-    :class="{ 'cursor-crosshair': allowDraw }"
-    :style="drawField ? 'touch-action: none' : ''"
+    class="relative select-none mb-4 before:border before:rounded before:top-0 before:bottom-0 before:left-0 before:right-0 before:absolute"
+    :class="{ 'cursor-crosshair': allowDraw, 'touch-none': !!drawField }"
+    style="container-type: size"
+    :style="{ aspectRatio: `${width} / ${height}`}"
   >
     <img
       ref="image"
@@ -10,7 +11,7 @@
       :src="image.url"
       :width="width"
       :height="height"
-      class="border rounded mb-4"
+      class="rounded"
       @load="onImageLoad"
     >
     <div
@@ -191,8 +192,8 @@ export default {
   },
   methods: {
     onImageLoad (e) {
-      e.target.setAttribute('width', e.target.naturalWidth)
-      e.target.setAttribute('height', e.target.naturalHeight)
+      this.image.metadata.width = e.target.naturalWidth
+      this.image.metadata.height = e.target.naturalHeight
     },
     setAreaRefs (el) {
       if (el) {
diff --git a/app/views/scripts/_autosize_field.html.erb b/app/views/scripts/_autosize_field.html.erb
index 1447e552..096a7f1c 100644
--- a/app/views/scripts/_autosize_field.html.erb
+++ b/app/views/scripts/_autosize_field.html.erb
@@ -2,16 +2,15 @@
   if (!window.customElements.get('autosize-field')) {
     window.customElements.define('autosize-field', class extends HTMLElement {
       connectedCallback() {
-        if (this.field.scrollHeight > this.field.clientHeight) {
-          this.field.classList.remove('text-[1.6vw]', 'lg:text-base');
-          this.field.classList.add('text-[1.0vw]', 'lg:text-[0.70rem]');
+        const originalFontValue = this.field.style.fontSize
 
-          if (this.field.scrollHeight > this.field.clientHeight) {
-            this.field.classList.add('text-[0.8vw]', 'lg:text-[0.50rem]');
-          }
+        if (this.field.scrollHeight > this.field.clientHeight) {
+          this.field.style.fontSize = `calc(${originalFontValue} / 1.5)`;
+          this.field.style.lineHeight = `calc(${this.field.style.fontSize} * 1.3)`;
 
           if (this.field.scrollHeight > this.field.clientHeight) {
-            this.field.classList.add('text-[0.7vw]', 'lg:text-[0.45rem]');
+            this.field.style.fontSize = `calc(${originalFontValue} / 2.0)`;
+            this.field.style.lineHeight = `calc(${this.field.style.fontSize} * 1.3)`;
           }
         }
       }
diff --git a/app/views/submissions/_value.html.erb b/app/views/submissions/_value.html.erb
index 38ae36ea..24c712b2 100644
--- a/app/views/submissions/_value.html.erb
+++ b/app/views/submissions/_value.html.erb
@@ -3,7 +3,8 @@
 <% color = field.dig('preferences', 'color') %>
 <% font = field.dig('preferences', 'font') %>
 <% font_type = field.dig('preferences', 'font_type') %>
-<field-value dir="auto" class="flex absolute text-[1.6vw] lg:text-base <%= 'font-mono' if font == 'Courier' %> <%= 'font-serif' if font == 'Times' %> <%= 'font-bold' if font_type == 'bold' || font_type == 'bold_italic' %> <%= 'italic' if font_type == 'italic' || font_type == 'bold_italic' %> <%= align == 'right' ? 'text-right' : (align == 'center' ? 'text-center' : '') %>" style="<%= "color: #{color}; " if color.present? %>width: <%= area['w'] * 100 %>%; height: <%= area['h'] * 100 %>%; left: <%= area['x'] * 100 %>%; top: <%= area['y'] * 100 %>%; <%= "font-size: clamp(4pt, 1.6vw, #{field['preferences']['font_size'].to_i * 1.23}pt); line-height: `clamp(6pt, 2.0vw, #{(field['preferences']['font_size'].to_i * 1.23) + 3}pt)`" if field.dig('preferences', 'font_size') %>">
+<% font_size_px = (field.dig('preferences', 'font_size').presence || Submissions::GenerateResultAttachments::FONT_SIZE).to_i * local_assigns.fetch(:font_scale) { 1000.0 / PdfUtils::US_LETTER_W } %>
+<field-value dir="auto" class="flex absolute <%= 'font-courier' if font == 'Courier' %> <%= 'font-times' if font == 'Times' %> <%= 'font-bold' if font_type == 'bold' || font_type == 'bold_italic' %> <%= 'italic' if font_type == 'italic' || font_type == 'bold_italic' %> <%= align == 'right' ? 'text-right' : (align == 'center' ? 'text-center' : '') %>" style="<%= "color: #{color}; " if color.present? %>width: <%= area['w'] * 100 %>%; height: <%= area['h'] * 100 %>%; left: <%= area['x'] * 100 %>%; top: <%= area['y'] * 100 %>%; font-size: <%= fs = "clamp(1pt, #{font_size_px / 10}vw, #{font_size_px}px)" %>; line-height: calc(<%= fs %> * 1.3); font-size: <%= fs = "#{font_size_px / 10}cqmin" %>; line-height: calc(<%= fs %> * 1.3)">
   <% if field['type'] == 'signature' %>
     <% is_narrow = area['h']&.positive? && (area['w'].to_f / area['h']) > 6 %>
     <div class="flex justify-between w-full h-full gap-1 <%= is_narrow && (local_assigns[:with_signature_id] || field.dig('preferences', 'reason_field_uuid').present?) ? 'flex-row' : 'flex-col' %>">
diff --git a/app/views/submissions/show.html.erb b/app/views/submissions/show.html.erb
index edadd1a7..53ab3dcc 100644
--- a/app/views/submissions/show.html.erb
+++ b/app/views/submissions/show.html.erb
@@ -1,6 +1,7 @@
 <% if params[:controller] == 'submissions_preview' %>
   <%= render 'submissions/preview_tags' %>
 <% end %>
+<% font_scale = 1040.0 / PdfUtils::US_LETTER_W %>
 <% with_signature_id, is_combined_enabled = AccountConfig.where(account_id: @submission.account_id, key: [AccountConfig::COMBINE_PDF_RESULT_KEY, AccountConfig::WITH_SIGNATURE_ID], value: true).then { |configs| [configs.any? { |e| e.key == AccountConfig::WITH_SIGNATURE_ID }, configs.any? { |e| e.key == AccountConfig::COMBINE_PDF_RESULT_KEY }] } %>
 <div style="max-width: 1600px" class="mx-auto pl-4">
   <div class="flex justify-between py-1.5 items-center pr-4 sticky top-0 md:relative z-10 bg-base-100">
@@ -94,11 +95,11 @@
           <% document = @submission.schema_documents.find { |e| e.uuid == item['attachment_uuid'] } %>
           <% document_annots_index = document.metadata.dig('pdf', 'annotations')&.group_by { |e| e['page'] } || {} %>
           <% preview_images_index = document.preview_images.loaded? ? document.preview_images.index_by { |e| e.filename.base.to_i } : {} %>
-          <% lazyload_metadata = document.preview_images.first&.metadata || {} %>
+          <% lazyload_metadata = document.preview_images.first&.metadata || Templates::ProcessDocument::US_LETTER_SIZE %>
           <% (document.metadata.dig('pdf', 'number_of_pages') || (document.preview_images.loaded? ? preview_images_index.size : document.preview_images.size)).times do |index| %>
             <% page = preview_images_index[index] || page_blob_struct.new(metadata: lazyload_metadata, url: preview_document_page_path(document.signed_uuid, "#{index}.jpg")) %>
-            <div id="<%= "page-#{document.uuid}-#{index}" %>" class="relative">
-              <img loading="lazy" src="<%= Docuseal::URL_CACHE.fetch([document.id, document.uuid, index].join(':'), expires_in: 10.minutes) { page.url } %>" width="<%= page.metadata['width'] %>" class="border rounded mb-4" height="<%= page.metadata['height'] %>">
+            <page-container id="<%= "page-#{document.uuid}-#{index}" %>" class="block before:border before:absolute before:top-0 before:bottom-0 before:left-0 before:right-0 before:rounded relative mb-4" style="container-type: size; aspect-ratio: <%= width = page.metadata['width'] %> / <%= height = page.metadata['height'] %>">
+              <img loading="lazy" src="<%= Docuseal::URL_CACHE.fetch([document.id, document.uuid, index].join(':'), expires_in: 10.minutes) { page.url } %>" width="<%= width %>" class="rounded" height="<%= height %>">
               <div class="top-0 bottom-0 left-0 right-0 absolute">
                 <% document_annots_index[index]&.each do |annot| %>
                   <%= render 'submissions/annotation', annot: %>
@@ -110,18 +111,18 @@
                   <% if (mask = field.dig('preferences', 'mask').presence) && signed_in? && can?(:read, @submission) %>
                     <span class="group">
                       <span class="hidden group-hover:inline">
-                        <%= render 'submissions/value', area:, field:, attachments_index:, value:, locale: @submission.account.locale, timezone: @submission.account.timezone, submitter: submitters_index[field['submitter_uuid']], with_signature_id: %>
+                        <%= render 'submissions/value', font_scale:, area:, field:, attachments_index:, value:, locale: @submission.account.locale, timezone: @submission.account.timezone, submitter: submitters_index[field['submitter_uuid']], with_signature_id: %>
                       </span>
                       <span class="group-hover:hidden">
-                        <%= render 'submissions/value', area:, field:, attachments_index:, value: Array.wrap(value).map { |e| TextUtils.mask_value(e, mask) }.join(', '), locale: @submission.account.locale, timezone: @submission.account.timezone, submitter: submitters_index[field['submitter_uuid']], with_signature_id: %>
+                        <%= render 'submissions/value', font_scale:, area:, field:, attachments_index:, value: Array.wrap(value).map { |e| TextUtils.mask_value(e, mask) }.join(', '), locale: @submission.account.locale, timezone: @submission.account.timezone, submitter: submitters_index[field['submitter_uuid']], with_signature_id: %>
                       </span>
                     </span>
                   <% else %>
-                    <%= render 'submissions/value', area:, field:, attachments_index:, value: mask.present? ? Array.wrap(value).map { |e| TextUtils.mask_value(e, mask) }.join(', ') : value, locale: @submission.account.locale, timezone: @submission.account.timezone, submitter: submitters_index[field['submitter_uuid']], with_signature_id: %>
+                    <%= render 'submissions/value', font_scale:, area:, field:, attachments_index:, value: mask.present? ? Array.wrap(value).map { |e| TextUtils.mask_value(e, mask) }.join(', ') : value, locale: @submission.account.locale, timezone: @submission.account.timezone, submitter: submitters_index[field['submitter_uuid']], with_signature_id: %>
                   <% end %>
                 <% end %>
               </div>
-            </div>
+            </page-container>
           <% end %>
         <% end %>
       </div>
diff --git a/app/views/submit_form/show.html.erb b/app/views/submit_form/show.html.erb
index 5eb06d9a..2ef9d197 100644
--- a/app/views/submit_form/show.html.erb
+++ b/app/views/submit_form/show.html.erb
@@ -7,6 +7,7 @@
 <% submitters_index = @submitter.submission.submitters.index_by(&:uuid) %>
 <% page_blob_struct = Struct.new(:url, :metadata, keyword_init: true) %>
 <% schema = Submissions.filtered_conditions_schema(@submitter.submission, values:, include_submitter_uuid: @submitter.uuid) %>
+<% font_scale = 1000.0 / PdfUtils::US_LETTER_W %>
 <div style="max-height: -webkit-fill-available;">
   <div id="scrollbox">
     <div class="mx-auto block pb-72" style="max-width: 1000px">
@@ -66,11 +67,11 @@
         <div id="document-<%= document.uuid %>">
           <% document_annots_index = document.metadata.dig('pdf', 'annotations')&.group_by { |e| e['page'] } || {} %>
           <% preview_images_index = document.preview_images.loaded? ? document.preview_images.index_by { |e| e.filename.base.to_i } : {} %>
-          <% lazyload_metadata = document.preview_images.last&.metadata || {} %>
+          <% lazyload_metadata = document.preview_images.last&.metadata || Templates::ProcessDocument::US_LETTER_SIZE %>
           <% (document.metadata.dig('pdf', 'number_of_pages') || (document.preview_images.loaded? ? preview_images_index.size : document.preview_images.size)).times do |index| %>
             <% page = preview_images_index[index] || page_blob_struct.new(metadata: lazyload_metadata, url: preview_document_page_path(document.signed_uuid, "#{index}.jpg")) %>
-            <div class="relative my-4 shadow-md">
-              <img loading="lazy" src="<%= page.url %>" width="<%= page.metadata['width'] %>" height="<%= page.metadata['height'] %>">
+            <page-container class="block relative my-4 shadow-md" style="container-type: size; aspect-ratio: <%= width = page.metadata['width'] %> / <%= height = page.metadata['height'] %>">
+              <img loading="lazy" src="<%= page.url %>" width="<%= width %>" height="<%= height %>">
               <div id="page-<%= [document.uuid, index].join('-') %>" class="top-0 bottom-0 left-0 right-0 absolute">
                 <% if annots = document_annots_index[index] %>
                   <%= render 'submit_form/annotations', annots: %>
@@ -83,10 +84,10 @@
                   <% next if field['conditions'].present? && values[field['uuid']].blank? && field['submitter_uuid'] != @submitter.uuid %>
                   <% next if field['conditions'].present? && field['submitter_uuid'] == @submitter.uuid %>
                   <% next if field.dig('preferences', 'formula').present? && field['submitter_uuid'] == @submitter.uuid %>
-                  <%= render 'submissions/value', area:, field:, attachments_index: @attachments_index, value: field.dig('preferences', 'mask').present? ? TextUtils.mask_value(value, field.dig('preferences', 'mask')) : value, locale: @submitter.account.locale, timezone: @submitter.account.timezone, submitter: submitters_index[field['submitter_uuid']], with_signature_id: @form_configs[:with_signature_id] %>
+                  <%= render 'submissions/value', font_scale:, area:, field:, attachments_index: @attachments_index, value: field.dig('preferences', 'mask').present? ? TextUtils.mask_value(value, field.dig('preferences', 'mask')) : value, locale: @submitter.account.locale, timezone: @submitter.account.timezone, submitter: submitters_index[field['submitter_uuid']], with_signature_id: @form_configs[:with_signature_id] %>
                 <% end %>
               </div>
-            </div>
+            </page-container>
           <% end %>
         </div>
       <% end %>
diff --git a/lib/pdf_utils.rb b/lib/pdf_utils.rb
index 9dff1828..083ec47d 100644
--- a/lib/pdf_utils.rb
+++ b/lib/pdf_utils.rb
@@ -1,6 +1,9 @@
 # frozen_string_literal: true
 
 module PdfUtils
+  DEFAULT_DPI = 72
+  US_LETTER_W = DEFAULT_DPI * 8.5
+
   module_function
 
   def encrypted?(data, password: nil)
diff --git a/lib/submissions/generate_result_attachments.rb b/lib/submissions/generate_result_attachments.rb
index 999145f2..3eeb2265 100644
--- a/lib/submissions/generate_result_attachments.rb
+++ b/lib/submissions/generate_result_attachments.rb
@@ -50,8 +50,8 @@ module Submissions
     TESTING_FOOTER = 'Testing Document - NOT LEGALLY BINDING'
     DEFAULT_FONTS = %w[Times Helvetica Courier].freeze
     FONTS_LINE_HEIGHT = {
-      'Times' => 1.4,
-      'Helvetica' => 1.4,
+      'Times' => 1.5,
+      'Helvetica' => 1.5,
       'Courier' => 1.6
     }.freeze
 
diff --git a/lib/templates/process_document.rb b/lib/templates/process_document.rb
index 9d6b78db..a9192b22 100644
--- a/lib/templates/process_document.rb
+++ b/lib/templates/process_document.rb
@@ -15,6 +15,7 @@ module Templates
     MAX_NUMBER_OF_PAGES_PROCESSED = 15
     MAX_FLATTEN_FILE_SIZE = 20.megabytes
     GENERATE_PREVIEW_SIZE_LIMIT = 50.megabytes
+    US_LETTER_SIZE = { 'width' => MAX_WIDTH, 'height' => 1812 }.freeze
 
     module_function