Type Scale
Preview the types on all available sizes. To preview the typography style-guide, visit this page Type guide
CSS
/* CSS classes */ .text_9xl { font-size: 8rem; /* 128px */ line-height: 1; /* 128px */ } /* TailwindCSS classes */ text-9xl Type design
CSS
/* CSS classes */ .text_9xl { font-size: 8rem; /* 128px */line-height: 1; /* 128px */ } /* TailwindCSS classes */ text-9xl Type design
CSS
/* CSS classes */ .text_8xl { font-size: 6rem; /* 96px */ line-height: 1; /* 96px */ } /* TailwindCSS classes */ text-8xl For all your web projects
CSS
/* CSS classes */ .text_8xl { font-size: 6rem; /* 96px */line-height: 1; /* 96px */ } /* TailwindCSS classes */ text-8xl For all your web projects
CSS
/* CSS classes */ .text_7xl { font-size: 4.5rem; /* 72px */line-height: 1; /* 72px */ } /* TailwindCSS classes */ text-7xl Typography is an art and a science.
CSS
/* CSS classes */ .text_7xl { font-size: 4.5rem; /* 72px */line-height: 1; /* 72px */ } /* TailwindCSS classes */ text-7xl Typography is an art and a science.
CSS
/* CSS classes */ .text_6xl { font-size: 3.75rem; /* 60px */line-height: 1; /* 60px */ } /* TailwindCSS classes */ text-6xl A headline's purpose is to quickly and briefly draw attention to the story.
CSS
/* CSS classes */ .text_6xl { font-size: 3.75rem; /* 60px */line-height: 1; /* 60px */ } /* TailwindCSS classes */ text-6xl A headline's purpose is to quickly and briefly draw attention to the story.
CSS
/* CSS classes */ .text_5xl { font-size: 3rem; /* 48px */line-height: 1; /* 48px */ } /* TailwindCSS classes */ text-5xl Typography plays a crucial role in enhancing the readability, visual hierarchy, and overall aesthetics of written content.
CSS
/* CSS classes */ .text_5xl { font-size: 3rem; /* 48px */line-height: 1; /* 48px */ } /* TailwindCSS classes */ text-5xl Typography plays a crucial role in enhancing the readability, visual hierarchy, and overall aesthetics of written content.
CSS
/* CSS classes */ .text_4xl { font-size: 2.25rem; /* 36px */line-height: 2.5rem; /* 40px */ } /* TailwindCSS classes */ text-4xl Good typography takes into account factors such as font choice, letter spacing, line length, alignment, and hierarchy to create a harmonious and effective visual composition.
CSS
/* CSS classes */ .text_4xl { font-size: 2.25rem; /* 36px */line-height: 2.5rem; /* 40px */ } /* TailwindCSS classes */ text-4xl Good typography takes into account factors such as font choice, letter spacing, line length, alignment, and hierarchy to create a harmonious and effective visual composition.
CSS
/* CSS classes */ .text_3xl { font-size: 1.875rem; /* 30px */line-height: 2.25rem; /* 36px */ } /* TailwindCSS classes */ text-3xl Typography can be applied to various mediums, including printed materials like books, posters, and magazines, as well as digital platforms such as websites, mobile applications, and user interfaces.
CSS
/* CSS classes */ .text_3xl { font-size: 1.875rem; /* 30px */line-height: 2.25rem; /* 36px */ } /* TailwindCSS classes */ text-3xl Typography can be applied to various mediums, including printed materials like books, posters, and magazines, as well as digital platforms such as websites, mobile applications, and user interfaces.
CSS
/* CSS classes */ .text_2xl { font-size: 1.5rem; /* 24px */line-height: 2rem; /* 32px */ } /* TailwindCSS classes */ text-2xl It significantly influences how readers perceive and interpret written information and can evoke different emotions or moods depending on the choices made by the designer.
CSS
/* CSS classes */ .text_2xl { font-size: 1.5rem; /* 24px */line-height: 2rem; /* 32px */ } /* TailwindCSS classes */ text-2xl It significantly influences how readers perceive and interpret written information and can evoke different emotions or moods depending on the choices made by the designer.
CSS
/* CSS classes */ .text_xl { font-size: 1.25rem; /* 20px */line-height: 1.75rem; /* 28px */ } /* TailwindCSS classes */ text-xl For most practical applications, maintaining an appropriate balance between font size, line length, and number of lines is crucial for effective typography. By ensuring that the typography is not overwhelmed by an excessive amount of text, designers can create visually pleasing and readable compositions that effectively communicate their intended message.
CSS
/* CSS classes */ .text_xl { font-size: 1.25rem; /* 20px */line-height: 1.75rem; /* 28px */ } /* TailwindCSS classes */ text-xl For most practical applications, maintaining an appropriate balance between font size, line length, and number of lines is crucial for effective typography. By ensuring that the typography is not overwhelmed by an excessive amount of text, designers can create visually pleasing and readable compositions that effectively communicate their intended message.
CSS
/* CSS classes */ .text_lg { font-size: 1.125rem; /* 18px */line-height: 1.5rem; /* 24px */ } /* TailwindCSS classes */ text-lg For most practical applications, maintaining an appropriate balance between font size, line length, and number of lines is crucial for effective typography. By ensuring that the typography is not overwhelmed by an excessive amount of text, designers can create visually pleasing and readable compositions that effectively communicate their intended message.
CSS
/* CSS classes */ .text_lg { font-size: 1.125rem; /* 18px */line-height: 1.5rem; /* 24px */ } /* TailwindCSS classes */ text-lg For most practical applications, maintaining an appropriate balance between font size, line length, and number of lines is crucial for effective typography. By ensuring that the typography is not overwhelmed by an excessive amount of text, designers can create visually pleasing and readable compositions that effectively communicate their intended message.
CSS
/* CSS classes */ .text_base { font-size: 1rem; /* 16px */line-height: 1.5rem; /* 24px */ } /* TailwindCSS classes */ text-base Typography is the art and technique of arranging and designing typefaces or fonts in a visually appealing and readable manner. It involves selecting and combining different typefaces, sizes, spacing, and other typographic elements to create written communication that is not only legible but also conveys a particular tone, style, or message.
CSS
/* CSS classes */ .text_base { font-size: 1rem; /* 16px */line-height: 1.5rem; /* 24px */ } /* TailwindCSS classes */ text-base Typography is the art and technique of arranging and designing typefaces or fonts in a visually appealing and readable manner. It involves selecting and combining different typefaces, sizes, spacing, and other typographic elements to create written communication that is not only legible but also conveys a particular tone, style, or message.
CSS
/* CSS classes */ .text_sm { font-size: 0.875rem; /* 14px */line-height: 1.25rem; /* 20px */ } /* TailwindCSS classes */ text-sm Typefaces are classified into different categories based on their design characteristics. The two primary classifications are serif and sans-serif. Serif typefaces have small decorative lines (serifs) at the ends of characters, while sans-serif typefaces lack these embellishments. Other classifications include script, display, slab serif, and monospaced typefaces, each with its own distinctive style and usage. The selection and combination of typefaces significantly impact the overall aesthetics and effectiveness of a typographic composition. Pairing typefaces involves choosing fonts that complement each other and create visual harmony. It's important to consider factors like contrast, style, and overall compatibility when combining typefaces to ensure readability and a cohesive visual identity.
CSS
/* CSS classes */ .text_sm { font-size: 0.875rem; /* 14px */line-height: 1.25rem; /* 20px */ } /* TailwindCSS classes */ text-sm Typefaces are classified into different categories based on their design characteristics. The two primary classifications are serif and sans-serif. Serif typefaces have small decorative lines (serifs) at the ends of characters, while sans-serif typefaces lack these embellishments. Other classifications include script, display, slab serif, and monospaced typefaces, each with its own distinctive style and usage. The selection and combination of typefaces significantly impact the overall aesthetics and effectiveness of a typographic composition. Pairing typefaces involves choosing fonts that complement each other and create visual harmony. It's important to consider factors like contrast, style, and overall compatibility when combining typefaces to ensure readability and a cohesive visual identity.
CSS
/* CSS classes */ .text_xs { font-size: 0.75rem; /* 12px */line-height: 1rem; /* 16px */ } /* TailwindCSS classes */ text-xs Typefaces are typically organized into font families, which consist of different variations within a typeface design. A font family may include variations such as regular, bold, italic, and condensed, providing a range of options for designers to choose from to create visual hierarchy and emphasis within a composition. Establishing a clear typographic hierarchy ensures that the most important information stands out and is easily understood. This is achieved through various typographic techniques such as using larger font sizes for headings, bolder weights for emphasis, and different font styles for different levels of information.
CSS
/* CSS classes */ .text_xs { font-size: 0.75rem; /* 12px */line-height: 1rem; /* 16px */ } /* TailwindCSS classes */ text-xs