Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fluid typography: add font size constraints #44993

Merged

Commits on Oct 17, 2022

  1. Initial commit:

    - Adds default minimum font size limits so that text does not become smaller than 14px/0.875rem/0.875em. The consequence will be that all fluid font sizes will be no smaller than 14px/0.875rem/0.875em in any viewport width.
    - Users may define font-sizes that are smaller than 14px/0.875rem/0.875em. In this case the user-defined font size becomes the minimum. For example if a user defines 9px for a block, then the minimum font size for that block will be 9px.
    
    - Min font size should not be greater than max font size.
    - Round to 3 decimal places (JS)
    
    - Rounding computed min and max values
    ramonjd committed Oct 17, 2022
    Configuration menu
    Copy the full SHA
    db8dd97 View commit details
    Browse the repository at this point in the history
  2. Configuration menu
    Copy the full SHA
    7027925 View commit details
    Browse the repository at this point in the history
  3. Configuration menu
    Copy the full SHA
    7e29b5f View commit details
    Browse the repository at this point in the history
  4. Removing type coercion

    ramonjd committed Oct 17, 2022
    Configuration menu
    Copy the full SHA
    08b8903 View commit details
    Browse the repository at this point in the history
  5. Updating failing test

    ramonjd committed Oct 17, 2022
    Configuration menu
    Copy the full SHA
    087f78a View commit details
    Browse the repository at this point in the history
  6. Configuration menu
    Copy the full SHA
    c8d80b4 View commit details
    Browse the repository at this point in the history
  7. Ensure that rem units are used when calculating min and max boundarie…

    …s in em
    
    This is to keep it consistent with the original formula and ensure the fluid argument in clamp is working off a size relative to :root
    
    Fixing formatting and grammar
    Rolling back renaming $preset to $font_size in preference to a follow up.
    
    Do  not clamp value if there is no min size and the font size is less than 14px
    ramonjd committed Oct 17, 2022
    Configuration menu
    Copy the full SHA
    f45b4a5 View commit details
    Browse the repository at this point in the history
  8. Configuration menu
    Copy the full SHA
    9222dce View commit details
    Browse the repository at this point in the history

Commits on Oct 18, 2022

  1. For font sizes of < 14px that have no defined minimum sizes, use the …

    …font size to set the floor of the clamp() value.
    ramonjd committed Oct 18, 2022
    Configuration menu
    Copy the full SHA
    df6c71b View commit details
    Browse the repository at this point in the history
  2. Removing max < min check. It wasn't there before. It can be a follow …

    …up if required as it requires extra logic.
    ramonjd committed Oct 18, 2022
    Configuration menu
    Copy the full SHA
    aa2ddf7 View commit details
    Browse the repository at this point in the history
  3. Configuration menu
    Copy the full SHA
    b65a8b6 View commit details
    Browse the repository at this point in the history
  4. Configuration menu
    Copy the full SHA
    b7a01f8 View commit details
    Browse the repository at this point in the history