Responsive Typography Sample

A React component demonstrating responsive typography with different implementation approaches. This component showcases how text can adapt to different screen sizes using various techniques like media queries, viewport calculations, and fluid calculations.

Demo

Features

• Multiple Responsive Modes: Choose between different responsive typography implementations
• Media Query Support: Responsive text using CSS media queries
• Viewport Calculations: Dynamic text sizing based on viewport dimensions
• Fluid Calculations: Smooth text scaling using fluid calculations
• Non-Responsive Mode: Standard fixed-size text for comparison

Component Structure

The Responsive Typography Sample component is built using the following structure:

import React from 'react';
import { Select, Typography } from 'antd';
import { DemoManager } from './sample-layout/DemoManager';
import { Info } from './sample-layout/Info';
import { LibraryTags as Lib, LibraryTagsContainer } from './sample-layout/LibraryTags';
import { Usage } from './sample-layout/Usage';
import './ResponsiveTypographySample.scss';

function ResponsiveTypographySample(props) {
  const [mode, setMode] = React.useState('non-responsive');
  
  const handleModeChange = value => {
    setMode(value);
  };

  const renderInfo = () => {
    return (
      <>
        <Info forceOpen>
          <Typography.Paragraph>
            Here you will find a quick demonstration. This is a sample <b>Responsive Typography</b> application.
          </Typography.Paragraph>
          <Typography.Paragraph>
            Responsive Typography is the design of writing on any website. It allows the adaptation of the website
            content to the size of any tablet, laptop, desktop, and mobile device. In this way, the writing can always
            be completely readable. One of the <b>Media Query, Viewport Calculation, and Fluid Calc</b> options can be
            used to apply Responsive Typography, or a non-responsive setting may be preferred.
          </Typography.Paragraph>
        </Info>

        <Typography.Title level={4}>Controls</Typography.Title>
        <Select
          style={{ width: 300 }}
          value={mode}
          onChange={handleModeChange}
          options={[
            { value: 'non-responsive', label: 'Non-Responsive' },
            { value: 'media-query', label: 'Responsive With Media Query' },
            { value: 'viewport_sized', label: 'Responsive With Viewport Calculation' },
            { value: 'viewport_fluid', label: 'Responsive With Fluid Calc' }
          ]}
        />

        <Usage path={props.path} title={props.title} />
        <LibraryTagsContainer>
          <Lib.ReactLib /> <Lib.SassLib />
        </LibraryTagsContainer>
      </>
    );
  };

  const renderDemo = () => {
    return (
      <div className={`typography-sample-container ${mode}`}>
        <h1>Lorem Ipsum</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <p>Sample text content...</p>
      </div>
    );
  };

  return <DemoManager {...props} demoComponent={renderDemo()} infoComponent={renderInfo()} />;
}

export default ResponsiveTypographySample;

Implementation Modes

1. Non-Responsive Mode

   • Fixed font sizes using CSS variables
   • No adaptation to screen size

2. Media Query Mode

   • Font sizes change at specific breakpoints
   • Breakpoints: 320px, 400px, 641px, 1200px, 1600px, 2000px

3. Viewport Calculation Mode

   • Font sizes calculated using viewport units (vw, vh, vmin)
   • Dynamic scaling based on viewport dimensions

4. Fluid Calculation Mode

   • Font sizes use clamp() function for smooth scaling
   • Minimum and maximum size constraints

SCSS Implementation

.typography-sample-container {
  margin: 5px;
  overflow-y: auto;
  width: 100%;
  height: 100%;

  &.non-responsive {
    h1 { font-size: calc(var(--typog-nr) * 20); }
    h2 { font-size: calc(var(--typog-nr) * 15); }
    h3 { font-size: calc(var(--typog-nr) * 11.7); }
    h4 { font-size: calc(var(--typog-nr) * 10.7); }
    p { font-size: calc(var(--typog-nr) * 10); }
  }

  &.media-query {
    h1 { font-size: calc(var(--typog-mq) * 20); }
    h2 { font-size: calc(var(--typog-mq) * 15); }
    h3 { font-size: calc(var(--typog-mq) * 11.7); }
    h4 { font-size: calc(var(--typog-mq) * 10.7); }
    p { font-size: calc(var(--typog-mq) * 10); }
  }

  &.viewport_sized {
    h1 { font-size: 5.9vw; }
    h2 { font-size: 3vh; }
    h3 { font-size: 2.5vw; }
    h4 { font-size: 2.2vw; }
    p { font-size: 2vmin; }
  }

  &.viewport_fluid {
    h1 { font-size: clamp(1.8rem, 2.5vw, 2.8rem); }
    h2 { font-size: clamp(1.6rem, 2.2vw, 2.4rem); }
    h3 { font-size: clamp(1.4rem, 2vw, 2.2rem); }
    h4 { font-size: clamp(1.2rem, 1.8vw, 2rem); }
    p { font-size: max(1.2rem, 1.2vw); }
  }
}

Technologies Used

• React: Component-based UI development
• Ant Design: UI components including Select and Typography
• SCSS: Styling for responsive typography
• CSS Variables: For dynamic font sizing
• CSS Clamp: For fluid typography calculations

Project Structure

src/
├── export-sample/
│   ├── ResponsiveTypographySample.jsx
│   ├── ResponsiveTypographySample.scss
│   ├── sample-layout/
│   │   ├── DemoManager.jsx
│   │   ├── Info.jsx
│   │   ├── LibraryTags.jsx
│   │   ├── Usage.jsx
│   │   └── ...
│   └── utils/
│       ├── color-util.js
│       └── random-util.js
└── main.jsx

Development

1. Install dependencies:

npm install

2. Start the development server:

npm run dev

3. Build for production:

npm run build