Typography

Type utilities are designed to work in combination with line-height utilities so as to result in more sensible numbers wherever possible. These also exist as variables that you can use in components or custom CSS.

Let's look at how these variations will look at your screen.

Font Families

The fonts used in Ingredients are all free Google Fonts:

Martel
Maven Pro
Nunito Sans
Work Sans

            
                font-family: 'Martel', serif;
                font-family: 'Maven Pro', sans-serif;
                font-family: 'Nunito Sans', sans-serif;
                font-family: 'Work Sans', sans-serif;

Text sizes in Ingredients

We have different classes for different sizes of headings.

xxlg Welcome to Ingredients

xlg Welcome to Ingredients

lg Welcome to Ingredients

md Welcome to Ingredients

sm Welcome to Ingredients

            
            xxlg Welcome to Ingredients
            xlg Welcome to Ingredients
            lg Welcome to Ingredients
            md Welcome to Ingredients
            sm Welcome to Ingredients

Small Text

Small texts are used in badges and/or places where some real estate is not available.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto quo iure nihil laboriosam rerum voluptatem nemo veniam ipsa quia soluta. Architecto animi, et eaque ipsa soluta vero quidem? Iure, esse! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores suscipit ipsa velit ipsum aut atque nulla nisi inventore, laudantium iste vero alias, quibusdam nesciunt cum facere esse dolorem tenetur reprehenderit laborum quas. Quibusdam maxime rem commodi accusamus molestias harum ipsa veritatis omnis dignissimos, mollitia explicabo pariatur facere iste dolorem? Ratione officiis amet ab. Atque, veritatis? Laborum eaque quas tempore id nisi, sapiente aliquid repellendus minima sint magni illo, quasi laudantium consectetur modi sit voluptatum natus temporibus earum excepturi recusandae aspernatur. Cum reiciendis pariatur maxime sequi incidunt, exercitationem velit magni eligendi aut explicabo dolore quas aliquam unde minima, veniam odio, cumque iusto ea iste nam similique animi labore! Officiis sint consectetur recusandae quisquam voluptates laudantium quae tenetur cumque deleniti est rem enim nisi nostrum natus quam, consequatur magnam repudiandae ipsa itaque modi perspiciatis voluptas quaerat quibusdam inventore? Aut soluta quod, ullam dolor dolores perferendis in autem, officia consequuntur aspernatur eos, doloribus minima magnam? Repudiandae est, illum, hic reiciendis quod obcaecati cumque ab laborum recusandae pariatur minus nostrum nemo minima eos eveniet nihil eaque molestias quas dolorem nisi? Accusamus laudantium aspernatur ea similique, aliquid beatae maxime quas? A nisi doloremque accusamus eligendi aliquam alias atque quidem voluptatum ut. Dolorum architecto assumenda corporis?

             
                Your content
                Your content

Gray Text

Text can be grayed out using a simple class text-gray

Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe molestiae et suscipit quos itaque, aliquam, beatae, vero officia illo aspernatur qui? Soluta, error, labore optio quae hic tempore eius velit beatae ut ea nemo in ipsum similique accusantium non quam! Ullam modi deleniti odio beatae impedit, unde esse ea minima ex ratione voluptas ipsum, sapiente, saepe eius. Aspernatur, voluptate unde alias similique accusantium reiciendis corrupti, inventore a omnis, esse quis accusamus dicta. Tempore, blanditiis. Veritatis repudiandae reprehenderit vero. Vel inventore est maiores doloremque neque ducimus dolorem, ea veniam suscipit. Recusandae nulla molestias nisi voluptatem, quae animi doloribus praesentium aliquam quis placeat reiciendis ratione fugiat fugit cum dolor tenetur facere, asperiores ipsa assumenda aspernatur commodi cupiditate minus, culpa nam. Modi alias similique dolores sequi dolore dicta quod molestias consequatur delectus quibusdam, eaque ad veritatis est perferendis et praesentium incidunt ab fugiat voluptatibus velit harum laboriosam ea quisquam quam! Ipsa omnis debitis amet est rem! Esse atque ut, voluptas soluta eum, quam in odio itaque delectus, distinctio eveniet officia voluptatibus aliquid dolores tenetur obcaecati harum cum quis? Tempora similique neque quia vero, in sapiente consequatur, sunt deleniti non iure recusandae, consequuntur vitae laboriosam odit. Recusandae laborum obcaecati deserunt iusto nisi, esse doloremque.

            
                This is a gray text

Text Alignment

Text aligments are done in the following way.

Alignment Center

Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate voluptatem architecto itaque! Possimus quasi, magni recusandae quidem odio neque perspiciatis sed qui maiores asperiores impedit, ipsa ab sequi, reprehenderit commodi minus a aliquam quae ea! Doloribus magnam ipsum quia odit iste sunt minus quod officia voluptate eius placeat aliquam, assumenda sit. Similique voluptates quasi consequatur error ipsum ea, totam debitis obcaecati inventore perferendis. Sed, amet! Consequatur asperiores rem itaque alias incidunt laboriosam, nam sunt officiis magni ipsum quasi adipisci iure consectetur ducimus dolore error quod temporibus maiores iusto velit. Rem vel perspiciatis voluptatum qui dolore at eaque ab veniam sunt.

Alignment Left

Alignment Right

            
               Your Content
               Your Content
               Your Content