Most of Topcoder websites use the same styleguide for the design. In particular, all typography is supposed to use the following set of styles. For all these styles we have global mixins, which should be used whenever possible (but never modified without explicit approval).
20/25px — Extra Large Label — @mixin tc-label-xl;
15/20px — Large Label — @mixin tc-label-lg;
13/20px — Medium Label — @mixin tc-label-md;
12/15px — Small Label — @mixin tc-label-sm;
11/15px — Extra Small Label — @mixin tc-label-xs;
20/25px — Large body text — @mixin tc-body-lg;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id nunc nec risus ullamcorper tristique sed vel dolor. Vestibulum justo ligula, finibus eget felis ut, tempor viverra risus. Fusce elementum turpis in ex dictum, et rhoncus metus dapibus. Nullam libero magna, tincidunt non porttitor in, condimentum eget massa. Nullam ut tincidunt urna, et commodo massa. Etiam dignissim nunc eget pharetra molestie. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi molestie, neque pretium sagittis lobortis, orci felis eleifend purus, ac accumsan augue nulla laoreet erat. Sed accumsan turpis consectetur tortor suscipit, sit amet bibendum dolor consequat. Quisque vel sodales massa. Donec luctus augue ut facilisis sagittis.
15/25px — Main body text — @mixin tc-body-md;
Quisque sodales ipsum ut mauris auctor, in placerat purus pellentesque. Etiam ultrices lacus luctus imperdiet luctus. Mauris ante dui, hendrerit at erat id, posuere dapibus lorem. Aenean rhoncus urna orci, porttitor consequat lectus iaculis id. Suspendisse vestibulum dictum risus, non cursus metus maximus ut. Integer convallis eros eget ultricies posuere. Duis lorem augue, fermentum a quam in, venenatis pulvinar felis. Proin at tristique lacus. Quisque tempor gravida turpis.
13/25px — Small body text — @mixin tc-body-sm;
In quis vestibulum ipsum, in ultrices velit. Integer suscipit mi non est rutrum pharetra ut quis tellus. Morbi imperdiet rutrum eros a varius. Donec placerat nibh ut justo interdum rutrum. Nam luctus fermentum elit, quis viverra urna vulputate nec. Pellentesque finibus, nisl eget consequat pretium, massa urna ullamcorper arcu, ut tincidunt neque est vitae metus. Morbi pretium tincidunt diam, at fringilla leo elementum at. Suspendisse suscipit malesuada urna et viverra. Nullam quis accumsan urna, eu viverra augue. Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
11/20px — Extra small body text — @mixin tc-body-xs;
In tempor vitae risus nec sodales. Sed tempus diam mi, quis fermentum enim fringilla ut. Sed vitae neque accumsan, fermentum justo non, pellentesque eros. Pellentesque euismod velit erat, sit amet posuere ante eleifend varius. Vestibulum iaculis scelerisque ex, sed laoreet dui semper at. Cras id enim leo. In sagittis magna id justo egestas, a cursus tortor semper. Maecenas tincidunt orci at velit bibendum suscipit. Etiam in pharetra lacus. Aenean tortor enim, gravida accumsan metus in, cursus fringilla sapien. Quisque suscipit ante vel sollicitudin condimentum. Nulla enim nunc, dictum mollis pulvinar non, consequat id ipsum. Nam sodales elit eget mi malesuada, sit amet molestie tortor finibus.
@mixin tc-heading-xl;@mixin tc-heading-lg;@mixin tc-heading-md;@mixin tc-heading-sm;@mixin tc-heading-xs;@mixin tc-title;