Using WordPress as our framework, we custom build websites to make your brand stand out from the noise. They’ve arrived at a reasonably standard line-height for the body type at approximately 1.6, which gives enough whitespace to not feel cluttered without having significant gaps between lines. The all-cap heading uses a light line-height to add tension and impact, and for the body type, they’ve added just a touch of letter spacing (0.55px) to add whitespace and improve legibility. I love that this website uses two very popular and arguably overused fonts (Oswald and Inter,) but does so in a way that feels completely unique. The heading is approximately seven times larger than the body copy, drawing your eye immediately into its most crucial message before it naturally falls to the long-form content below. The Economic Club of Chicago expertly leverages clean typography and bold typographic contrast. For over 90 years the Club has maintained that legacy and today we remain committed to connecting Chicago’s top business and civic leaders to the people and ideas impacting our city, the nation and the world. The founders of The Economic Club recognized that in 1927 when they established the nonpartisan organization to encourage dialogue among leaders dedicated to advancing society and the institutions that shape it. There is transformative power in a shared vision. This is a great example of how beautiful typography doesn’t need to be complicated, simply having ample contrast, thoughtful type selection, and variation in type treatment can be enough. The contrast between the large and thin heading, to the small, all-caps sub-heading creates beautiful interplay and dynamic contrast. The metaprop website leverages SpaceGrotesk, a beautiful and geometric typeface to communicate the brand’s forward-thinking and technology-focused culture. Meta PropĬommitted to socially and enviornmentally responsible investing. The tight line height (44px for a 51px font) creates close interaction between the ascenders and descenders of the type. The proximity of the two different typefaces and the tension between the moderate letter-spacing and the negative letter-spacing creates a wonderful typography composition. The smaller headlines above it are all caps with moderate letter-spacing (2pixels) and are either gill sans or Verdana, both clean san-serif fonts. Not using a solid black creates an exquisite look and feel. You may be surprised that the serif font used is… *gasp* times new roman! Using a sizeable bold version with negative letter-spacing (-2px) the nuances of the font really create some unique whitespace and relationship with each other. Coudal Partnersįont-family: times, Times New Roman, times-roman, georgia, serif In this article, we’ll cover 10 examples of beautiful typography and what CSS was used. In particular, understanding the design patterns and capabilities of CSS in typography. However, you need to know how best to present type. There is more to great web typography than picking the right type. With an abundance of free web fonts and affordable premium fonts from well-known type foundries, web designers have plenty of options for selecting a compelling typeface. When I first wrote this article, designers were limited to a dozen system fonts, embedding type as images or using third-party libraries to render different non-system fonts dynamically. Web typography has evolved significantly over the last 10 years.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |