Почему размер шрифта устанавливаешь через пиксели а не через rem?

Использование px vs rem для размеров шрифта

Выбор между пикселями и rem имеет огромное значение для масштабируемости и доступности приложения. Каждый подход имеет свои преимущества и недостатки.

Проблемы с пикселями (px)

const badStyle = {
  fontSize: '14px',
  lineHeight: '20px',
  marginBottom: '16px',
  padding: '10px 15px'
};

// Проблемы:
// 1. Не уважает настройки масштаба браузера пользователя
// 2. Недоступно для людей с нарушениями зрения
// 3. При изменении базового размера нужно менять все значения
// 4. Сложнее поддерживать единую типографику

function PoorAccessibilityComponent() {
  return (
    <div style={{ fontSize: '12px' }}>
      Маленький текст - невозможно увеличить через настройки браузера
    </div>
  );
}

Преимущества rem (относительные единицы)

const goodStyle = {
  fontSize: '1rem',
  lineHeight: '1.5rem',
  marginBottom: '1rem',
  padding: '0.625rem 0.9375rem'
};

// Преимущества:
// 1. Масштабируется с настройками браузера
// 2. Доступно для людей с нарушениями зрения
// 3. Единая точка контроля - базовый размер в html
// 4. Легче поддерживать и расширять

function GoodAccessibilityComponent() {
  return (
    <div style={{ fontSize: '1rem' }}>
      Размер текста можно увеличить через настройки браузера
    </div>
  );
}

Система типографики на основе rem

export const typography = {
  h1: {
    fontSize: '2.5rem',
    fontWeight: '700',
    lineHeight: '1.2',
    marginBottom: '1rem'
  },
  h2: {
    fontSize: '2rem',
    fontWeight: '600',
    lineHeight: '1.3',
    marginBottom: '0.875rem'
  },
  h3: {
    fontSize: '1.5rem',
    fontWeight: '600',
    lineHeight: '1.4',
    marginBottom: '0.75rem'
  },
  body: {
    fontSize: '1rem',
    lineHeight: '1.6',
    marginBottom: '1rem'
  },
  small: {
    fontSize: '0.875rem',
    lineHeight: '1.5'
  },
  tiny: {
    fontSize: '0.75rem',
    lineHeight: '1.4'
  }
};

function Typography() {
  return (
    <div>
      <h1 style={typography.h1}>Заголовок 1</h1>
      <h2 style={typography.h2}>Заголовок 2</h2>
      <p style={typography.body}>Основной текст</p>
      <small style={typography.small}>Дополнительный текст</small>
    </div>
  );
}

Tailwind CSS с rem

function TailwindTypography() {
  return (
    <div>
      <p className="text-sm">Маленький текст</p>
      <p className="text-base">Основной размер</p>
      <p className="text-lg">Большой текст</p>
      <p className="text-2xl">Очень большой текст</p>
      <p className="text-[1.25rem]">1.25rem = 20px</p>
    </div>
  );
}

Когда использовать px

const border = {
  borderWidth: '1px',
  borderBottomWidth: '2px'
};

const absoluteStyle = {
  position: 'absolute',
  top: '10px',
  left: '15px'
};

const imageStyle = {
  width: '200px',
  height: '150px'
};

Адаптивные размеры шрифтов

export const responsiveCSS = `
  html {
    font-size: 16px;
  }
  
  @media (max-width: 768px) {
    html {
      font-size: 14px;
    }
  }
  
  @media (max-width: 480px) {
    html {
      font-size: 12px;
    }
  }
`;

// Весь текст масштабируется автоматически при изменении html font-size