diff --git a/package.json b/package.json
index 9a4532f..056c01f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@openstax/assessment-components",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "license": "MIT",
   "source": "./src/index.ts",
   "types": "./dist/src/index.d.ts",
diff --git a/src/components/Answer.tsx b/src/components/Answer.tsx
index d90dadd..912ede1 100644
--- a/src/components/Answer.tsx
+++ b/src/components/Answer.tsx
@@ -10,7 +10,7 @@ import { colors } from '../theme';
 const StyledAnswerIndicator = styled.div<{ state: boolean }>`
   color: ${props => props.state ? colors.answer.correct : colors.answer.incorrect};
   text-transform: uppercase;
-  font-size: 1.1rem;
+  font-size: calc(1.1rem * var(--content-text-scale));
   font-weight: bold;
 `;
 
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 6143a0b..5fff851 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -145,7 +145,7 @@ StepCardHeader.displayName = 'StepCardHeader';
 const StepCardQuestion = styled.div<{ unpadded?: boolean }>`
   .step-card-body {
     ${mixins.stepCardPadding()}
-
+    overflow: auto;
     background: ${colors.card.body.background};
 
     &.exercise-stimulus {
diff --git a/src/components/CompletionStatus.tsx b/src/components/CompletionStatus.tsx
index 774fe84..8e9cb50 100644
--- a/src/components/CompletionStatus.tsx
+++ b/src/components/CompletionStatus.tsx
@@ -1,17 +1,24 @@
-import styled from "styled-components";
+import styled, { createGlobalStyle } from "styled-components";
 import { InnerStepCard } from "./Card";
 import Button from "./Button";
 
+const GlobalStyle = createGlobalStyle`
+  :root {
+    --content-text-scale: 1;
+  }
+`;
+
 export interface CompletionStatusProps {
   numberOfQuestions: number;
   numberCompleted: number;
   handleClick: () => void;
+  className?: string;
 }
 
 const CompletionStatusCard = styled(InnerStepCard)`
   padding: 88px 72px;
-  font-size: 1.8rem;
-  line-height: 3rem;
+  font-size: calc(1.8rem * var(--content-text-scale));
+  line-height: calc(3rem * var(--content-text-scale));
   display: block;
 
   button {
@@ -25,27 +32,28 @@ const CompletionStatusCard = styled(InnerStepCard)`
 `;
 
 const CompletionHeader = styled.h2`
-  font-size: 2.4rem;
+  font-size: calc(2.4rem * var(--content-text-scale));
   margin: 0;
 `;
 
-export const CompletionStatus = ({
-  numberOfQuestions, numberCompleted, handleClick
+export const CompletionStatus = styled(({
+  numberOfQuestions, numberCompleted, handleClick, className
 }: CompletionStatusProps) => {
-  
+
   const allCompleted = numberOfQuestions === numberCompleted;
   const someCompleted = numberCompleted > 0;
   const buttonText = allCompleted ? 'Next' : (
       someCompleted ? 'Continue' : 'Start'
   );
 
-  return (
-    <CompletionStatusCard>
+  return <>
+    <GlobalStyle />
+    <CompletionStatusCard className={className}>
       <CompletionHeader>{allCompleted ? 'You are done.' : (someCompleted ? 'Quiz is partially complete.' : 'No questions have been answered.')}</CompletionHeader>
       <p>{allCompleted ? 'Great job answering all the questions.' : (someCompleted ? `You've completed ${numberCompleted} of ${numberOfQuestions} questions.` : 'Begin working on the quiz.')}</p>
-      <Button data-test-id={`${buttonText.split(' ')[0].toLowerCase()}-btn`} onClick={()=> handleClick()}>
+      <Button data-test-id={`${buttonText.split(' ')[0].toLowerCase()}-btn`} onClick={() => handleClick()}>
         {buttonText}
       </Button>
     </CompletionStatusCard>
-  )
-};
+  </>
+})``;
diff --git a/src/components/Exercise.stories.tsx b/src/components/Exercise.stories.tsx
index 29be734..d1aeb86 100644
--- a/src/components/Exercise.stories.tsx
+++ b/src/components/Exercise.stories.tsx
@@ -1,6 +1,7 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { Exercise, ExerciseWithStepDataProps, ExerciseWithQuestionStatesProps } from './Exercise';
 import { Answer } from '../types';
+import styled from 'styled-components';
 
 const exerciseWithStepDataProps: ExerciseWithStepDataProps = {
   exercise: {
@@ -131,6 +132,38 @@ const exerciseWithQuestionStatesProps = (): ExerciseWithQuestionStatesProps => {
   },
 }};
 
+type TextResizerValue = -2 | -1 | 0 | 1 | 2 | 3;
+const textResizerScales = [0.75, 0.9, 1, 1.25, 1.5, 2];
+const textResizerValues: TextResizerValue[] = [-2, -1, 0, 1, 2, 3];
+const textResizerValueMap = new Map(textResizerValues.map((v, i) => [v, textResizerScales[i]]));
+
+const ExerciseWrapper = styled.div<{ textSize: TextResizerValue }>`
+   ${(props: { textSize: TextResizerValue }) => `
+    --content-text-scale: ${textResizerValueMap.get(props.textSize)};
+  `}
+`;
+
+const TextResizerProvider = ({ children }: { children: React.ReactNode }) => {
+  const [index, setIndex] = useState(2);
+
+  const increase = () => setIndex(Math.min(index + 1, textResizerValues.length - 1));
+  const decrease = () => setIndex(Math.max(index - 1, 0));
+
+  return (
+    <ExerciseWrapper textSize={textResizerValues[index]}>
+      <div style={{ marginBottom: '2rem', alignItems: 'center', placeContent: 'center', display: 'flex', gap: '1rem' }}>
+        <h3>Text Size</h3>
+        <button onClick={decrease}>- Decrease</button>
+        <span style={{ display: 'inline-block', width: '3rem', textAlign: 'center' }}>
+          <b>{textResizerScales[index]}</b>
+        </span>
+        <button onClick={increase}>+ Increase</button>
+      </div>
+      {children}
+    </ExerciseWrapper>
+  );
+};
+
 export const Default = () => {
   const [selectedAnswerId, setSelectedAnswerId] = useState<number>(0);
   const [apiIsPending, setApiIsPending] = useState(false)
@@ -144,7 +177,8 @@ export const Default = () => {
         setSelectedAnswerId(a.id)
       }}
       onAnswerSave={() => setApiIsPending(true)}
-    />)
+    />
+  )
 };
 
 export const DeprecatedStepData = () => <Exercise {...exerciseWithStepDataProps} />;
@@ -173,7 +207,7 @@ export const CompleteWithFeedback = () => {
     }
   };
 
-  return <Exercise {...props} />;
+  return <TextResizerProvider><Exercise {...props} /></TextResizerProvider>;
 };
 
 export const IncorrectWithFeedbackAndSolution = () => {
@@ -197,7 +231,7 @@ export const IncorrectWithFeedbackAndSolution = () => {
       apiIsPending: false
     }
   };
-  return <Exercise {...props} />;
+  return <TextResizerProvider><Exercise {...props} /></TextResizerProvider>;
 };
 
 export const IncorrectWithFeedbackAndSolutionWrappingText = () => {
@@ -223,7 +257,7 @@ export const IncorrectWithFeedbackAndSolutionWrappingText = () => {
   };
   props.exercise.questions[0].answers[0].content_html = 'A very long correct answer to observe line wrapping at mobile sizes';
   props.exercise.questions[0].answers[1].content_html = 'A very long incorrect answer to observe line wrapping at mobile sizes';
-  return <Exercise {...props} />;
+  return <TextResizerProvider><Exercise {...props} /></TextResizerProvider>;
 };
 
 export const MultiPartHalfComplete = () => {
@@ -325,7 +359,7 @@ export const MultiPartHalfComplete = () => {
     }
   };
 
-  return <Exercise {...props} />;
+  return <TextResizerProvider><Exercise {...props} /></TextResizerProvider>;
 };
 
 export const Icons = () => {
@@ -341,20 +375,20 @@ export const Icons = () => {
   };
 
   return <Exercise
-    {...exerciseWithQuestionStatesProps()}
-    exerciseIcons={{
-      topic: {
-        url: 'https://openstax.org',
-        location
-      },
-      errata: {
-        url: 'https://openstax.org',
-        location
-      },
-      info: {
-        location
-      },
-    }}
+      {...exerciseWithQuestionStatesProps()}
+      exerciseIcons={{
+        topic: {
+          url: 'https://openstax.org',
+          location
+        },
+        errata: {
+          url: 'https://openstax.org',
+          location
+        },
+        info: {
+          location
+        },
+      }}
   />;
 };
 
@@ -506,7 +540,7 @@ bitterness. The discriminant <span data-math="b^2 - 4ac"></span> could perhaps a
   };
 
   return (
-    <>
+    <TextResizerProvider>
       <Exercise {...props1}
         onAnswerChange={(a: Omit<Answer, 'id'> & { id: number, question_id: number }) => {
           setSelectedAnswerId(a.id)
@@ -516,6 +550,6 @@ bitterness. The discriminant <span data-math="b^2 - 4ac"></span> could perhaps a
         }}
       />
       <Exercise {...props2} />
-    </>
+    </TextResizerProvider>
   );
 };
diff --git a/src/components/Exercise.tsx b/src/components/Exercise.tsx
index 0c4030e..2df0332 100644
--- a/src/components/Exercise.tsx
+++ b/src/components/Exercise.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import scrollToElement from 'scroll-to-element';
-import styled, { css } from 'styled-components';
+import styled, { createGlobalStyle, css } from 'styled-components';
 import { Answer, ExerciseData, ID, QuestionState, StepBase, StepWithData } from '../../src/types';
 import { InnerStepCard, OuterStepCard, TaskStepCard, TaskStepCardProps } from './Card';
 import { Content } from './Content';
@@ -12,8 +12,14 @@ import { ExerciseHeaderIcons } from './ExerciseHeaderIcons';
 import { TypesetMathContext } from '../hooks/useTypesetMath';
 
 const StyledTaskStepCard = styled(TaskStepCard)`
-  font-size: 1.8rem;
-  line-height: 2.8rem;
+  font-size: calc(1.8rem * var(--content-text-scale));
+  line-height: calc(2.8rem * var(--content-text-scale));
+`;
+
+const GlobalStyle = createGlobalStyle`
+  :root {
+    --content-text-scale: 1;
+  }
 `;
 
 const ToolbarWrapper = styled.div<{
@@ -151,9 +157,9 @@ export interface ExerciseWithQuestionStatesProps extends ExerciseBaseProps {
   onAnswerChange: (answer: Omit<Answer, 'id'> & { id: number, question_id: number }) => void;
 }
 
-export const Exercise = ({
+export const Exercise = styled(({
   numberOfQuestions, questionNumber, step, exercise, show_all_feedback, scrollToQuestion, exerciseIcons, ...props
-}: ExerciseWithStepDataProps | ExerciseWithQuestionStatesProps) => {
+}: { className?: string } & (ExerciseWithStepDataProps | ExerciseWithQuestionStatesProps)) => {
   const legacyStepRender = 'feedback_html' in step;
   const questionsRef = React.useRef<Array<HTMLDivElement>>([]);
   const container = React.useRef<HTMLDivElement>(null);
@@ -175,6 +181,7 @@ export const Exercise = ({
   const mobileToolbarEnabled = Object.values(exerciseIcons || {}).some(({ location }) => location?.toolbar?.mobile);
 
   return <TypesetMathContext.Provider value={typesetExercise}>
+    <GlobalStyle />
     <TaskStepCardWithToolbar
       step={step}
       questionNumber={questionNumber}
@@ -184,6 +191,7 @@ export const Exercise = ({
       desktopToolbarEnabled={desktopToolbarEnabled}
       mobileToolbarEnabled={mobileToolbarEnabled}
       {...(exerciseIcons ? { exerciseIcons: exerciseIcons } : null)}
+      className={props.className}
     >
       <div ref={container}>
         <Preamble exercise={exercise} />
@@ -217,4 +225,5 @@ export const Exercise = ({
       </div>
     </TaskStepCardWithToolbar>
   </TypesetMathContext.Provider>;
-};
+})`
+`;
diff --git a/src/components/Question.tsx b/src/components/Question.tsx
index 9042ea6..64109bf 100644
--- a/src/components/Question.tsx
+++ b/src/components/Question.tsx
@@ -13,7 +13,7 @@ const StyledQuestion = styled.div`
 
 &.openstax-question {
   border-top: 1px solid ${colors.palette.pale};
-  font-size: 1.8rem;
+  font-size: calc(1.8rem * var(--content-text-scale));
 
   .detailed-solution {
     margin-bottom: 1rem;
@@ -42,8 +42,8 @@ const StyledQuestion = styled.div`
 
   .answers-table {
     margin-bottom: 20px;
-    font-size: 1.6rem;
-    line-height: 2rem;
+    font-size: calc(1.6rem * var(--content-text-scale));
+    line-height: calc(2rem * var(--content-text-scale));
   }
 
   .instructions {
diff --git a/src/components/StepCardFooter.tsx b/src/components/StepCardFooter.tsx
index a5a127d..886eb94 100644
--- a/src/components/StepCardFooter.tsx
+++ b/src/components/StepCardFooter.tsx
@@ -6,9 +6,10 @@ export const StepCardFooter = styled.div`
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
-    font-size: 1.4rem;
-    line-height: 2rem;
+    font-size: calc(1.4rem * var(--content-text-scale));
+    line-height: calc(2rem * var(--content-text-scale));
     background: ${colors.card.body.background};
+    overflow: auto;
 
     > * {
         flex-grow: 1;
diff --git a/src/components/__snapshots__/Answer.spec.tsx.snap b/src/components/__snapshots__/Answer.spec.tsx.snap
index 0bec985..4a4de30 100644
--- a/src/components/__snapshots__/Answer.spec.tsx.snap
+++ b/src/components/__snapshots__/Answer.spec.tsx.snap
@@ -141,7 +141,7 @@ exports[`Answer renders a correct answer 1`] = `
         className="answer-answer"
       >
         <div
-          className="sc-bczRLJ bwhOfi"
+          className="sc-bczRLJ jEysTE"
         >
           Correct
            Answer
@@ -194,7 +194,7 @@ exports[`Answer renders an incorrect answer 1`] = `
         className="answer-answer"
       >
         <div
-          className="sc-bczRLJ gojKWV"
+          className="sc-bczRLJ dfvfuH"
         >
           Incorrect
            Answer
@@ -320,7 +320,7 @@ exports[`Answer renders teacher preview 1`] = `
         className="answer-answer"
       >
         <div
-          className="sc-bczRLJ bwhOfi"
+          className="sc-bczRLJ jEysTE"
         >
           Correct
            Answer
diff --git a/src/components/__snapshots__/AnswersTable.spec.tsx.snap b/src/components/__snapshots__/AnswersTable.spec.tsx.snap
index 8e7aa02..bb9b0d2 100644
--- a/src/components/__snapshots__/AnswersTable.spec.tsx.snap
+++ b/src/components/__snapshots__/AnswersTable.spec.tsx.snap
@@ -141,7 +141,7 @@ exports[`AnswersTable renders all feedback 1`] = `
           className="answer-answer"
         >
           <div
-            className="sc-bczRLJ gojKWV"
+            className="sc-bczRLJ dfvfuH"
           >
             Incorrect
              Answer
@@ -212,7 +212,7 @@ exports[`AnswersTable renders all feedback 1`] = `
           className="answer-answer"
         >
           <div
-            className="sc-bczRLJ bwhOfi"
+            className="sc-bczRLJ jEysTE"
           >
             Correct
              Answer
@@ -281,7 +281,7 @@ exports[`AnswersTable renders correct answer feedback 1`] = `
           className="answer-answer"
         >
           <div
-            className="sc-bczRLJ bwhOfi"
+            className="sc-bczRLJ jEysTE"
           >
             Correct
              Answer
@@ -397,7 +397,7 @@ exports[`AnswersTable renders incorrect answer feedback 1`] = `
           className="answer-answer"
         >
           <div
-            className="sc-bczRLJ gojKWV"
+            className="sc-bczRLJ dfvfuH"
           >
             Incorrect
              Answer
@@ -468,7 +468,7 @@ exports[`AnswersTable renders incorrect answer feedback 1`] = `
           className="answer-answer"
         >
           <div
-            className="sc-bczRLJ bwhOfi"
+            className="sc-bczRLJ jEysTE"
           >
             Correct
              Answer
diff --git a/src/components/__snapshots__/Card.spec.tsx.snap b/src/components/__snapshots__/Card.spec.tsx.snap
index 78a8933..6f9a8b9 100644
--- a/src/components/__snapshots__/Card.spec.tsx.snap
+++ b/src/components/__snapshots__/Card.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`StepCard matches snapshot 1`] = `
       </div>
     </div>
     <div
-      className="sc-hKMtZM EWshI"
+      className="sc-hKMtZM bwRTaS"
     >
       Question content
     </div>
@@ -92,7 +92,7 @@ exports[`StepCard matches snapshot with more than one question 1`] = `
       </div>
     </div>
     <div
-      className="sc-hKMtZM EWshI"
+      className="sc-hKMtZM bwRTaS"
     >
       Question content
     </div>
@@ -133,7 +133,7 @@ exports[`TaskStepCard can optionally provide task 1`] = `
       </div>
     </div>
     <div
-      className="sc-hKMtZM EWshI"
+      className="sc-hKMtZM bwRTaS"
     />
   </div>
 </div>
@@ -172,7 +172,7 @@ exports[`TaskStepCard can optionally provide type 1`] = `
       </div>
     </div>
     <div
-      className="sc-hKMtZM EWshI"
+      className="sc-hKMtZM bwRTaS"
     />
   </div>
 </div>
@@ -211,7 +211,7 @@ exports[`TaskStepCard matches snapshot 1`] = `
       </div>
     </div>
     <div
-      className="sc-hKMtZM EWshI"
+      className="sc-hKMtZM bwRTaS"
     />
   </div>
 </div>
diff --git a/src/components/__snapshots__/CompletionStatus.spec.tsx.snap b/src/components/__snapshots__/CompletionStatus.spec.tsx.snap
index ba4906a..00c3d30 100644
--- a/src/components/__snapshots__/CompletionStatus.spec.tsx.snap
+++ b/src/components/__snapshots__/CompletionStatus.spec.tsx.snap
@@ -2,10 +2,10 @@
 
 exports[`CompletionStatus matches snapshot 1`] = `
 <div
-  className="sc-bczRLJ sc-jSMfEi eAXREJ kikmgW"
+  className="sc-bczRLJ sc-jSMfEi eAXREJ ixqeJm sc-iBkjds"
 >
   <h2
-    className="sc-gKXOVf bebcLz"
+    className="sc-gKXOVf jeuREl"
   >
     No questions have been answered.
   </h2>
@@ -24,10 +24,10 @@ exports[`CompletionStatus matches snapshot 1`] = `
 
 exports[`CompletionStatus matches snapshot with all questions completed 1`] = `
 <div
-  className="sc-bczRLJ sc-jSMfEi eAXREJ kikmgW"
+  className="sc-bczRLJ sc-jSMfEi eAXREJ ixqeJm sc-iBkjds"
 >
   <h2
-    className="sc-gKXOVf bebcLz"
+    className="sc-gKXOVf jeuREl"
   >
     You are done.
   </h2>
@@ -46,10 +46,10 @@ exports[`CompletionStatus matches snapshot with all questions completed 1`] = `
 
 exports[`CompletionStatus matches snapshot with some questions completed 1`] = `
 <div
-  className="sc-bczRLJ sc-jSMfEi eAXREJ kikmgW"
+  className="sc-bczRLJ sc-jSMfEi eAXREJ ixqeJm sc-iBkjds"
 >
   <h2
-    className="sc-gKXOVf bebcLz"
+    className="sc-gKXOVf jeuREl"
   >
     Quiz is partially complete.
   </h2>
diff --git a/src/components/__snapshots__/Exercise.spec.tsx.snap b/src/components/__snapshots__/Exercise.spec.tsx.snap
index 5efa557..d05a3e6 100644
--- a/src/components/__snapshots__/Exercise.spec.tsx.snap
+++ b/src/components/__snapshots__/Exercise.spec.tsx.snap
@@ -9,7 +9,7 @@ exports[`Exercise using step data matches snapshot 1`] = `
     data-task-step-id={1}
   >
     <div
-      className="sc-bczRLJ eAXREJ exercise-step sc-evZas fQHbKU"
+      className="sc-bczRLJ eAXREJ exercise-step sc-evZas dPJYxI sc-ksZaOG kmSAkY"
     >
       <div
         className="sc-dkzDqf hbFgnH"
@@ -42,7 +42,7 @@ exports[`Exercise using step data matches snapshot 1`] = `
         </div>
       </div>
       <div
-        className="sc-hKMtZM EWshI"
+        className="sc-hKMtZM bwRTaS"
       >
         <div>
           <div
@@ -65,7 +65,7 @@ exports[`Exercise using step data matches snapshot 1`] = `
             data-test-id="student-exercise-question"
           >
             <div
-              className="sc-gKXOVf kJgboL openstax-question step-card-body"
+              className="sc-gKXOVf kUGNPP openstax-question step-card-body"
               data-question-number={1}
               data-test-id="question"
             >
@@ -169,7 +169,7 @@ exports[`Exercise using step data matches snapshot 1`] = `
               </div>
             </div>
             <div
-              className="sc-iBkjds feSBuo step-card-footer"
+              className="sc-iBkjds kbdJYE step-card-footer"
             >
               <div
                 className="step-card-footer-inner"
@@ -211,7 +211,7 @@ exports[`Exercise with question state data matches snapshot 1`] = `
     data-task-step-id={1}
   >
     <div
-      className="sc-bczRLJ eAXREJ exercise-step sc-evZas fQHbKU"
+      className="sc-bczRLJ eAXREJ exercise-step sc-evZas dPJYxI sc-ksZaOG kmSAkY"
     >
       <div
         className="sc-dkzDqf hbFgnH"
@@ -238,7 +238,7 @@ exports[`Exercise with question state data matches snapshot 1`] = `
         </div>
       </div>
       <div
-        className="sc-hKMtZM EWshI"
+        className="sc-hKMtZM bwRTaS"
       >
         <div>
           <div
@@ -261,7 +261,7 @@ exports[`Exercise with question state data matches snapshot 1`] = `
             data-test-id="student-exercise-question"
           >
             <div
-              className="sc-gKXOVf kJgboL openstax-question step-card-body"
+              className="sc-gKXOVf kUGNPP openstax-question step-card-body"
               data-question-number={1}
               data-test-id="question"
             >
@@ -365,7 +365,7 @@ exports[`Exercise with question state data matches snapshot 1`] = `
               </div>
             </div>
             <div
-              className="sc-iBkjds feSBuo step-card-footer"
+              className="sc-iBkjds kbdJYE step-card-footer"
             >
               <div
                 className="step-card-footer-inner"
@@ -461,7 +461,7 @@ exports[`Exercise with question state data renders header icons with multiple ch
     data-task-step-id={1}
   >
     <div
-      className="sc-bczRLJ eAXREJ exercise-step sc-evZas fQHbKU"
+      className="sc-bczRLJ eAXREJ exercise-step sc-evZas dPJYxI sc-ksZaOG kmSAkY"
     >
       <div
         className="sc-dkzDqf hbFgnH"
@@ -517,7 +517,7 @@ exports[`Exercise with question state data renders header icons with multiple ch
                   />
                 </svg>
                 <div
-                  className="sc-kDDrLX kncUAM popover right"
+                  className="sc-kDDrLX fBhBLm popover right"
                 >
                   <div
                     className="arrow"
@@ -557,7 +557,7 @@ exports[`Exercise with question state data renders header icons with multiple ch
                   />
                 </svg>
                 <div
-                  className="sc-kDDrLX kncUAM popover right"
+                  className="sc-kDDrLX fBhBLm popover right"
                 >
                   <div
                     className="arrow"
@@ -574,7 +574,7 @@ exports[`Exercise with question state data renders header icons with multiple ch
         </div>
       </div>
       <div
-        className="sc-hKMtZM EWshI"
+        className="sc-hKMtZM bwRTaS"
       >
         <div>
           <div
@@ -597,7 +597,7 @@ exports[`Exercise with question state data renders header icons with multiple ch
             data-test-id="student-exercise-question"
           >
             <div
-              className="sc-gKXOVf kJgboL openstax-question step-card-body"
+              className="sc-gKXOVf kUGNPP openstax-question step-card-body"
               data-question-number={1}
               data-test-id="question"
             >
@@ -701,7 +701,7 @@ exports[`Exercise with question state data renders header icons with multiple ch
               </div>
             </div>
             <div
-              className="sc-iBkjds feSBuo step-card-footer"
+              className="sc-iBkjds kbdJYE step-card-footer"
             >
               <div
                 className="step-card-footer-inner"
@@ -797,7 +797,7 @@ exports[`Exercise with question state data renders header icons with two-step ex
     data-task-step-id={1}
   >
     <div
-      className="sc-bczRLJ eAXREJ exercise-step sc-evZas fQHbKU"
+      className="sc-bczRLJ eAXREJ exercise-step sc-evZas dPJYxI sc-ksZaOG kmSAkY"
     >
       <div
         className="sc-dkzDqf hbFgnH"
@@ -853,7 +853,7 @@ exports[`Exercise with question state data renders header icons with two-step ex
                   />
                 </svg>
                 <div
-                  className="sc-kDDrLX kncUAM popover right"
+                  className="sc-kDDrLX fBhBLm popover right"
                 >
                   <div
                     className="arrow"
@@ -893,7 +893,7 @@ exports[`Exercise with question state data renders header icons with two-step ex
                   />
                 </svg>
                 <div
-                  className="sc-kDDrLX kncUAM popover right"
+                  className="sc-kDDrLX fBhBLm popover right"
                 >
                   <div
                     className="arrow"
@@ -933,7 +933,7 @@ exports[`Exercise with question state data renders header icons with two-step ex
                   />
                 </svg>
                 <div
-                  className="sc-kDDrLX kncUAM popover right"
+                  className="sc-kDDrLX fBhBLm popover right"
                 >
                   <div
                     className="arrow"
@@ -950,7 +950,7 @@ exports[`Exercise with question state data renders header icons with two-step ex
         </div>
       </div>
       <div
-        className="sc-hKMtZM EWshI"
+        className="sc-hKMtZM bwRTaS"
       >
         <div>
           <div
@@ -973,7 +973,7 @@ exports[`Exercise with question state data renders header icons with two-step ex
             data-test-id="student-exercise-question"
           >
             <div
-              className="sc-gKXOVf kJgboL openstax-question step-card-body"
+              className="sc-gKXOVf kUGNPP openstax-question step-card-body"
               data-question-number={1}
               data-test-id="question"
             >
@@ -1077,7 +1077,7 @@ exports[`Exercise with question state data renders header icons with two-step ex
               </div>
             </div>
             <div
-              className="sc-iBkjds feSBuo step-card-footer"
+              className="sc-iBkjds kbdJYE step-card-footer"
             >
               <div
                 className="step-card-footer-inner"
@@ -1119,7 +1119,7 @@ exports[`Exercise with question state data shows a detailed solution 1`] = `
     data-task-step-id={1}
   >
     <div
-      className="sc-bczRLJ eAXREJ exercise-step sc-evZas fQHbKU"
+      className="sc-bczRLJ eAXREJ exercise-step sc-evZas dPJYxI sc-ksZaOG kmSAkY"
     >
       <div
         className="sc-dkzDqf hbFgnH"
@@ -1146,7 +1146,7 @@ exports[`Exercise with question state data shows a detailed solution 1`] = `
         </div>
       </div>
       <div
-        className="sc-hKMtZM EWshI"
+        className="sc-hKMtZM bwRTaS"
       >
         <div>
           <div
@@ -1169,7 +1169,7 @@ exports[`Exercise with question state data shows a detailed solution 1`] = `
             data-test-id="student-exercise-question"
           >
             <div
-              className="sc-gKXOVf kJgboL openstax-question step-card-body"
+              className="sc-gKXOVf kUGNPP openstax-question step-card-body"
               data-question-number={1}
               data-test-id="question"
             >
@@ -1273,7 +1273,7 @@ exports[`Exercise with question state data shows a detailed solution 1`] = `
               </div>
             </div>
             <div
-              className="sc-iBkjds feSBuo step-card-footer"
+              className="sc-iBkjds kbdJYE step-card-footer"
             >
               <div
                 className="step-card-footer-inner"
diff --git a/src/components/__snapshots__/ExerciseHeaderIcons.spec.tsx.snap b/src/components/__snapshots__/ExerciseHeaderIcons.spec.tsx.snap
index 8bf0ef3..fb6c522 100644
--- a/src/components/__snapshots__/ExerciseHeaderIcons.spec.tsx.snap
+++ b/src/components/__snapshots__/ExerciseHeaderIcons.spec.tsx.snap
@@ -31,7 +31,7 @@ exports[`ExerciseIcons matches snapshot 1`] = `
         />
       </svg>
       <div
-        className="sc-dkzDqf crCAWf popover right"
+        className="sc-dkzDqf dhyzaB popover right"
       >
         <div
           className="arrow"
@@ -71,7 +71,7 @@ exports[`ExerciseIcons matches snapshot 1`] = `
         />
       </svg>
       <div
-        className="sc-dkzDqf crCAWf popover right"
+        className="sc-dkzDqf dhyzaB popover right"
       >
         <div
           className="arrow"
@@ -111,7 +111,7 @@ exports[`ExerciseIcons matches snapshot 1`] = `
         />
       </svg>
       <div
-        className="sc-dkzDqf crCAWf popover right"
+        className="sc-dkzDqf dhyzaB popover right"
       >
         <div
           className="arrow"
diff --git a/src/components/__snapshots__/ExerciseQuestion.spec.tsx.snap b/src/components/__snapshots__/ExerciseQuestion.spec.tsx.snap
index 958280b..f6e9d31 100644
--- a/src/components/__snapshots__/ExerciseQuestion.spec.tsx.snap
+++ b/src/components/__snapshots__/ExerciseQuestion.spec.tsx.snap
@@ -5,7 +5,7 @@ exports[`ExerciseQuestion matches snapshot 1`] = `
   data-test-id="student-exercise-question"
 >
   <div
-    className="sc-dkzDqf dlKIde openstax-question step-card-body"
+    className="sc-dkzDqf cYzaBK openstax-question step-card-body"
     data-question-number={1}
     data-test-id="question"
   >
@@ -118,7 +118,7 @@ exports[`ExerciseQuestion matches snapshot 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM bDKgiE step-card-footer"
+    className="sc-hKMtZM eTQwo step-card-footer"
   >
     <div
       className="step-card-footer-inner"
@@ -156,7 +156,7 @@ exports[`ExerciseQuestion renders Re-submit button 1`] = `
   data-test-id="student-exercise-question"
 >
   <div
-    className="sc-dkzDqf dlKIde openstax-question step-card-body has-incorrect-answer"
+    className="sc-dkzDqf cYzaBK openstax-question step-card-body has-incorrect-answer"
     data-question-number={1}
     data-test-id="question"
   >
@@ -255,7 +255,7 @@ exports[`ExerciseQuestion renders Re-submit button 1`] = `
               className="answer-answer"
             >
               <div
-                className="sc-gsnTZi dzfxZX"
+                className="sc-gsnTZi jsjSLp"
               >
                 Incorrect
                  Answer
@@ -275,7 +275,7 @@ exports[`ExerciseQuestion renders Re-submit button 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM bDKgiE step-card-footer"
+    className="sc-hKMtZM eTQwo step-card-footer"
   >
     <div
       className="step-card-footer-inner"
@@ -314,7 +314,7 @@ exports[`ExerciseQuestion renders Save button 1`] = `
   data-test-id="student-exercise-question"
 >
   <div
-    className="sc-dkzDqf dlKIde openstax-question step-card-body has-incorrect-answer"
+    className="sc-dkzDqf cYzaBK openstax-question step-card-body has-incorrect-answer"
     data-question-number={1}
     data-test-id="question"
   >
@@ -413,7 +413,7 @@ exports[`ExerciseQuestion renders Save button 1`] = `
               className="answer-answer"
             >
               <div
-                className="sc-gsnTZi dzfxZX"
+                className="sc-gsnTZi jsjSLp"
               >
                 Incorrect
                  Answer
@@ -433,7 +433,7 @@ exports[`ExerciseQuestion renders Save button 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM bDKgiE step-card-footer"
+    className="sc-hKMtZM eTQwo step-card-footer"
   >
     <div
       className="step-card-footer-inner"
@@ -472,7 +472,7 @@ exports[`ExerciseQuestion renders all attempts remaining 1`] = `
   data-test-id="student-exercise-question"
 >
   <div
-    className="sc-dkzDqf dlKIde openstax-question step-card-body"
+    className="sc-dkzDqf cYzaBK openstax-question step-card-body"
     data-question-number={1}
     data-test-id="question"
   >
@@ -585,7 +585,7 @@ exports[`ExerciseQuestion renders all attempts remaining 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM bDKgiE step-card-footer"
+    className="sc-hKMtZM eTQwo step-card-footer"
   >
     <div
       className="step-card-footer-inner"
@@ -630,7 +630,7 @@ exports[`ExerciseQuestion renders continue button (unused?) 1`] = `
   data-test-id="student-exercise-question"
 >
   <div
-    className="sc-dkzDqf dlKIde openstax-question step-card-body has-incorrect-answer"
+    className="sc-dkzDqf cYzaBK openstax-question step-card-body has-incorrect-answer"
     data-question-number={1}
     data-test-id="question"
   >
@@ -729,7 +729,7 @@ exports[`ExerciseQuestion renders continue button (unused?) 1`] = `
               className="answer-answer"
             >
               <div
-                className="sc-gsnTZi dzfxZX"
+                className="sc-gsnTZi jsjSLp"
               >
                 Incorrect
                  Answer
@@ -749,7 +749,7 @@ exports[`ExerciseQuestion renders continue button (unused?) 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM bDKgiE step-card-footer"
+    className="sc-hKMtZM eTQwo step-card-footer"
   >
     <div
       className="step-card-footer-inner"
@@ -787,7 +787,7 @@ exports[`ExerciseQuestion renders detailed solution and published comments 1`] =
   data-test-id="student-exercise-question"
 >
   <div
-    className="sc-dkzDqf dlKIde openstax-question step-card-body has-correct-answer has-incorrect-answer"
+    className="sc-dkzDqf cYzaBK openstax-question step-card-body has-correct-answer has-incorrect-answer"
     data-question-number={1}
     data-test-id="question"
   >
@@ -830,7 +830,7 @@ exports[`ExerciseQuestion renders detailed solution and published comments 1`] =
               className="answer-answer"
             >
               <div
-                className="sc-gsnTZi eVqIjQ"
+                className="sc-gsnTZi evWjfC"
               >
                 Correct
                  Answer
@@ -874,7 +874,7 @@ exports[`ExerciseQuestion renders detailed solution and published comments 1`] =
               className="answer-answer"
             >
               <div
-                className="sc-gsnTZi dzfxZX"
+                className="sc-gsnTZi jsjSLp"
               >
                 Incorrect
                  Answer
@@ -894,7 +894,7 @@ exports[`ExerciseQuestion renders detailed solution and published comments 1`] =
     </div>
   </div>
   <div
-    className="sc-hKMtZM bDKgiE step-card-footer"
+    className="sc-hKMtZM eTQwo step-card-footer"
   >
     <div
       className="step-card-footer-inner"
@@ -951,7 +951,7 @@ exports[`ExerciseQuestion renders free response 1`] = `
   data-test-id="student-exercise-question"
 >
   <div
-    className="sc-dkzDqf dlKIde openstax-question step-card-body"
+    className="sc-dkzDqf cYzaBK openstax-question step-card-body"
     data-question-number={1}
     data-test-id="question"
   >
@@ -1069,7 +1069,7 @@ exports[`ExerciseQuestion renders free response 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM bDKgiE step-card-footer"
+    className="sc-hKMtZM eTQwo step-card-footer"
   >
     <div
       className="step-card-footer-inner"
@@ -1107,7 +1107,7 @@ exports[`ExerciseQuestion renders no attempts remaining 1`] = `
   data-test-id="student-exercise-question"
 >
   <div
-    className="sc-dkzDqf dlKIde openstax-question step-card-body has-incorrect-answer"
+    className="sc-dkzDqf cYzaBK openstax-question step-card-body has-incorrect-answer"
     data-question-number={1}
     data-test-id="question"
   >
@@ -1206,7 +1206,7 @@ exports[`ExerciseQuestion renders no attempts remaining 1`] = `
               className="answer-answer"
             >
               <div
-                className="sc-gsnTZi dzfxZX"
+                className="sc-gsnTZi jsjSLp"
               >
                 Incorrect
                  Answer
@@ -1226,7 +1226,7 @@ exports[`ExerciseQuestion renders no attempts remaining 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM bDKgiE step-card-footer"
+    className="sc-hKMtZM eTQwo step-card-footer"
   >
     <div
       className="step-card-footer-inner"
@@ -1264,7 +1264,7 @@ exports[`ExerciseQuestion renders some attempts remaining 1`] = `
   data-test-id="student-exercise-question"
 >
   <div
-    className="sc-dkzDqf dlKIde openstax-question step-card-body has-incorrect-answer"
+    className="sc-dkzDqf cYzaBK openstax-question step-card-body has-incorrect-answer"
     data-question-number={1}
     data-test-id="question"
   >
@@ -1363,7 +1363,7 @@ exports[`ExerciseQuestion renders some attempts remaining 1`] = `
               className="answer-answer"
             >
               <div
-                className="sc-gsnTZi dzfxZX"
+                className="sc-gsnTZi jsjSLp"
               >
                 Incorrect
                  Answer
@@ -1383,7 +1383,7 @@ exports[`ExerciseQuestion renders some attempts remaining 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM bDKgiE step-card-footer"
+    className="sc-hKMtZM eTQwo step-card-footer"
   >
     <div
       className="step-card-footer-inner"
diff --git a/src/components/__snapshots__/FreeResponseInput.spec.tsx.snap b/src/components/__snapshots__/FreeResponseInput.spec.tsx.snap
index 118b9a2..1c735c5 100644
--- a/src/components/__snapshots__/FreeResponseInput.spec.tsx.snap
+++ b/src/components/__snapshots__/FreeResponseInput.spec.tsx.snap
@@ -42,7 +42,7 @@ exports[`Free Response Input matches snapshot 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM bDKgiE"
+    className="sc-hKMtZM eTQwo"
   >
     <div
       className="points"
@@ -124,7 +124,7 @@ exports[`Free Response Input renders leftInfoComponent component 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM bDKgiE"
+    className="sc-hKMtZM eTQwo"
   >
     <div
       className="points"
@@ -206,7 +206,7 @@ exports[`Free Response Input renders word limit error 1`] = `
     </div>
   </div>
   <div
-    className="sc-hKMtZM bDKgiE"
+    className="sc-hKMtZM eTQwo"
   >
     <div
       className="points"
diff --git a/src/components/__snapshots__/Question.spec.tsx.snap b/src/components/__snapshots__/Question.spec.tsx.snap
index 7185197..70439d8 100644
--- a/src/components/__snapshots__/Question.spec.tsx.snap
+++ b/src/components/__snapshots__/Question.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Question defaults QuestionHtml html 1`] = `
 <div
-  className="sc-gsnTZi fXpFRV openstax-question"
+  className="sc-gsnTZi bfsWKR openstax-question"
   data-question-number={1}
   data-test-id="question"
 >
@@ -118,7 +118,7 @@ exports[`Question defaults QuestionHtml html 1`] = `
 
 exports[`Question defaults collaborator_solutions 1`] = `
 <div
-  className="sc-gsnTZi fXpFRV openstax-question"
+  className="sc-gsnTZi bfsWKR openstax-question"
   data-question-number={1}
   data-test-id="question"
 >
@@ -234,7 +234,7 @@ exports[`Question defaults collaborator_solutions 1`] = `
 
 exports[`Question defaults formats 1`] = `
 <div
-  className="sc-gsnTZi fXpFRV openstax-question"
+  className="sc-gsnTZi bfsWKR openstax-question"
   data-question-number={1}
   data-test-id="question"
 >
@@ -359,7 +359,7 @@ exports[`Question defaults formats 1`] = `
 
 exports[`Question matches snapshot 1`] = `
 <div
-  className="sc-gsnTZi fXpFRV openstax-question"
+  className="sc-gsnTZi bfsWKR openstax-question"
   data-question-number={1}
   data-test-id="question"
 >
@@ -475,7 +475,7 @@ exports[`Question matches snapshot 1`] = `
 
 exports[`Question renders exercise uid 1`] = `
 <div
-  className="sc-gsnTZi fXpFRV openstax-question"
+  className="sc-gsnTZi bfsWKR openstax-question"
   data-question-number={1}
   data-test-id="question"
 >
@@ -596,7 +596,7 @@ exports[`Question renders exercise uid 1`] = `
 
 exports[`Question renders formats 1`] = `
 <div
-  className="sc-gsnTZi fXpFRV openstax-question"
+  className="sc-gsnTZi bfsWKR openstax-question"
   data-question-number={1}
   data-test-id="question"
 >
@@ -724,7 +724,7 @@ exports[`Question renders formats 1`] = `
 
 exports[`Question renders solutions 1`] = `
 <div
-  className="sc-gsnTZi fXpFRV openstax-question"
+  className="sc-gsnTZi bfsWKR openstax-question"
   data-question-number={1}
   data-test-id="question"
 >
diff --git a/src/theme.ts b/src/theme.ts
index c3b3899..dd33048 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -208,7 +208,7 @@ export const mixins = {
     margin: calc(${layouts.popover.arrow.height} - 14px) 0 ${layouts.answer.horizontalSpacing} 8px;
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
     color: ${colors.palette.neutralThin};
-    font-size: 1.4rem;
+    font-size: calc(1.4rem * var(--content-text-scale));
 
     .arrow {
       position: absolute;