Mobile data use sets the bar high for those programming websites or digital user interfaces. For mobile apps in particular, success hinges partly on quick and intuitive usability as well as short loading times for internet content. These requirements have caused web design to take on an increasingly sleek and minimalist style; what’s known as ‘flat design’. Following the motto ‘less is more’, this style avoids depicting user controls with images based on actual prototypes (e.g. a pen represents a word processing program or a speaker represents the control settings for the sound).
Many designers are instead opting for pictograms. These two-dimensional icons only feature the basic characteristics of the programs or items they represent. Another trait of pictograms is that they are incorporated into the source text and user interfaces in the form of web fonts. With this bold move, flat design is essentially turning its back on skeuomorphism—a design style whereby symbol objects are depicted as realistically as possible in order to ease users’ interactions with controls. A well-known example of such a loyal approach to flat design is the touchscreen-optimized user interface on Windows 8.
The magnifying glass next to the search box, the shopping cart on your favorite online store, or the envelope next to the e-mail address—icons are found on virtually every website. Without using any words, they offer users help while navigating sites and make it clear which functions are carried out by which controls. Increasingly fewer designers are making use of bitmap icons or CSS sprites. Instead, a growing number of web designers are gravitating towards icon fonts. Icon fonts are a type of web font that contain vector-based pictograms instead of letters. In contrast to depictions that are composed of pixels within a bitmap, vector icons can easily be scaled up without loss of resolution quality or changes in file size.
Icon fonts can also be developed through CSS (cascading style sheets) if desired. Due to their ability to be freely scaled without resolution loss, vector-based icons can be used for HD displays; although unlike bit map graphics, this is only possible in monochromatic form (CCS3 also supports different color gradients). Additionally, an entire icon font always needs to be added, even if only one pictogram is to be used. Some providers offer free icon fonts that can be found online, and font kits are also easy to set up.
Web developers don’t always have to pay to use vector-based pictograms. An array of open source libraries, some boasting quite expansive selections, can be found online. Here’s a list of some of the most popular providers of freely available symbol sets:
Most web developers don’t need all the pictograms included in a given font. A combination of icons from different providers is generally the norm; this is where font kits can be of great help. Web font generators like Fontello, fontastic.me, or the IcoMoon app, allow users to compile sets of various fonts from different sources. The main advantage of an individual font kit is that the icons can only be added as web fonts that are actually shown on the site. This reduces the data size and in turn, the site’s loading time.
Icon fonts are usually defined in the HMTL source code with the help of CSS classes. To carry out this step, the corresponding icon font needs to be incorporated into the head area of the HTML document. Some providers have made a standard CSS file available for this purpose. Bootstrap, the CSS framework, also makes it possible to integrate such elements, provided that it’s also supported by the desired font.
Given that icon fonts can be loaded via a customized stylesheet and accessed with predefined CSS classes, there are many possibilities for drafting designs. In contrast to pixel-based graphic files, vector-based pictograms, which are integrated using icon fonts, can be easily adjusted in the CSS code. This enables web developers to adjust the size, color, or opacity of a website accordingly. This also gives designers the flexibility of adding texture and shadow effects.
The evolution of responsive web design has had a huge effect on typography, and the appearance of a text now needs to be adjustable to any device. Responsive typography therefore needs flexible, adaptable fonts to ensure maximum readability. Learn more in our overview of font in responsive web design.
Responsive typography is a much-neglected aspect of responsive web design, but it’s actually surprisingly easy to create a responsive design for both headlines and main text. So what’s the secret? Find out in part three of our series, as we give you a run-down of the implementation of a responsive font and share tips on how to embed CSS commands into your web presence.
Since the introduction of web fonts, designers have enjoyed a massive increase in options for responsive typography. Their scalability means these fonts are displayed perfectly on every device, making these a perfect solution for responsive design. With thousands of free web fonts available from multiple online platforms, it’s now easier than ever before to find the perfect font for your website....
Icons can be easily included in HTML through CSS classes. One of the most popular icon fonts is Font Awesome, which offers more than 600 vector-based pictographs. This open source toolkit has proved popular with its easy use and regular updates. The installation kit contains a pre-configured CSS file, which makes starting out with this toolkit much easier.
What is a vector image? This image format allows you to resize a graphic while maintaining its quality. This is of the utmost importance for logos, which need to look good across a wide range of media from a letterhead to a huge billboard. Keep reading to find out more about what vector images are, when they are used, and what programs you can use to create them.
Provide powerful and reliable service to your clients with a web hosting package from IONOS.
View packages
