Typography


  • Paragraphs
  • Headings
  • Font size
  • Font size and breakpoints
  • Font weight
  • Text transform
  • Text decoration
  • Letter spacing
  • Text alignment
  • Code & Small tags — <code> & <small>


    • Paragraphs

    Ueyen styles the <p> tags by default. If you wanted to assign the paragraph style to any other elment, you can use the following selector:


    un-pa

    Stuling the element as paragraph



    headings

    Ueyen styles the headings, <h1> <h2> <h3> <h4> <h5> <h6> tags by default.

    The following SASS vriables can be modified in the Control Panel to override the headings Font size values:


    
$global-heading-Font size-h2
$global-heading-Font size-h3
$global-heading-Font size-h4
$global-heading-Font size-h5
$global-heading-Font size-h6



    The heading variables above are being controlled by the Custom Property Multiplier system, overriding them will return a static value. You can instead modify the multiplier values int he Ccontrol Panel to adjust the overall multiplier sizing effect.




    Font size

    The following selectors can be applied to an ellement for controlling the Font size:


    un-fs-s

    Font size Small

    un-fs-m

    Font size Medium

    un-fs-l

    Font size Large

    un-fs-h

    Font size Huge




    The font size values are subject to change automatically on each breakpoint through the Custom Property Multiplier system. The changes are not extreme, yet it helps to maintain a nice flow between different screen sizes, without having to use breakpoint selectors.


    Example of text transform:
    Markup
    

    Uppercase
    

    Capitalize
    

    Lowercase

    Uppercase

    Capitalize

    Lowercase



    Font size and breakpoint

    All the normal font size selectors can be followed by :s to :h (small to huge) to apply the alignment changes in different breakpoints.


    Small font size
    un-fs-s:s

    Font size Small on larger than Breakpoint Small

    un-fs-s:m

    Font size Small on larger than Breakpoint Large

    un-fs-s:l

    Font size Small on larger than Breakpoint large

    un-fs-s:h

    Font size Small on larger than Breakpoint Huge


    Medium font size
    un-fs-m:s

    Font size Medium on larger than Breakpoint Small

    un-fs-m:m

    Font size Medium on larger than Breakpoint Large

    un-fs-m:l

    Font size Medium on larger than Breakpoint large

    un-fs-m:h

    Font size Medium on larger than Breakpoint Huge


    Large font size
    un-fs-l:m

    Font size Large on larger than Breakpoint Large

    un-fs-l:s

    Font size Large on larger than Breakpoint Small

    un-fs-l:h

    Font size Large on larger than Breakpoint Huge

    un-fs-l:l

    Font size Large on larger than Breakpoint large


    Huge font size
    un-fs-h:s

    Font size Huge on larger than Breakpoint Small

    un-fs-h:m

    Font size Huge on larger than Breakpoint Large

    un-fs-h:l

    Font size Huge on larger than Breakpoint large

    un-fs-h:h

    Font size Huge on larger than Breakpoint Huge




    The font size values are subject to change automatically on each breakpoint through the Custom Property Multiplier system. The changes are not extreme, yet it helps to maintain a nice flow between different screen sizes, without having to use breakpoint selectors.


    Example of font size and breakpoints:

    The element has the class selectors of un-fs-s un-fs-m:s un-fs-h:l.



    The result will be:

    un-fs-s Small font size on screens smaller than the breakpoint small.

    un-fs-m:s Medium font size on screens larger than the breakpoint small.

    un-fs-l:l Large font size on screens larger than the breakpoint large.

    Markup
    

    Brekpoint-ready font size

    Brekpoint-ready font size



    Font weight

    The following selectors can be applied to an ellement for controlling the font-weight:


    un-fw-l

    Font weight Light

    un-fw-d

    Font weight Default

    un-fw-sb

    Font weight Semibold

    un-fw-b

    Font weight Bold



    Text transform

    The following selectors can be applied to an ellement for controlling the text transform behavior:


    un-tt-uc

    Uppercase

    un-tt-ca

    Capitalize

    un-tt-lc

    Lowercase


    Example of text transform:
    Markup
    

    Uppercase
    

    Capitalize
    

    Lowercase

    Uppercase

    Capitalize

    Lowercase



    Text decoration

    The following selectors can be applied to an ellement for controlling the text decoration behavior:


    un-td-ul

    Underline

    un-td-lt

    Line through

    un-td-ol

    Overline

    un-td-no

    None


    Example of text decoration:
    Markup
    

    Underline
    

    Line through
    

    Overline
    

    None

    Underline

    Line through

    Overline

    None



    Letter spacing

    The following selectors can be applied to an ellement for controlling the letter-spacing:


    un-ls

    Letter spacing default (same as small)

    un-ls-s

    Letter spacing Small

    un-ls-m

    Letter spacing Medium

    un-ls-s

    Letter spacing Large

    un-ls-h

    Letter spacing Huge



    Text alignment

    The following selectors can be applied to an ellement for controlling the letter-spacing:


    un-ta-l

    Text align Left

    un-ta-r

    Text align Right

    un-ta-c

    Text align Center



    Code & Small tags — <code> & <small>

    Both <code> & <small> will be styled through Ueyen.


    Example of code and small tags:
    Markup
    
This is a code tag
This is a small tag

    This is a code tag

    This is a small tag