+
+ After a suitable typeface has been chosen, it needs to be arranged to
+ form the various fonts that will be used to address different text needs
+ across designs.
+
+
+ Type Scale Customization
+
+
+ It is not compulsory that all of the sizes in a type scale be used.
+ However, when choosing a size from the scale, ensure to identify
+ possible use cases in proposed designs to ensure efficiency and reduce
+ any chances of having redundant text styles. Remember that less is more
+ and a particular font size can function in multiple capacities. After
+ making a selection of sizes, if there is subsequent need for an
+ additional size because of a recurring use case, then a suitable
+ corresponding size can be chosen from the scale. This is a better
+ practice.
+
+
+ For Layer5, we utilized the major third ratio to generate a type scale
+ that we could work with.
+
+
+
+ 
+
+
+
+ From this type scale, seven text sizes were selected to account for
+ various needs in our websites and products. These sizes were further
+ modified with suitable font specifications that will provide accurate
+ guidance for usage across implementations.
+
+
+
+
+
+
+
+ To create even more consistent designs, it is important to consider
+ typography with spacing and spatial proportions in mind. As a rule of
+ thumb, it is advisable that values obtained from the modular scale are
+ rounded off to a multiple of the base space value being used across a
+ set of designs. So for instance, if a set of designs has a base space
+ value of 4px or 6px, then, the font sizes selected are rounded off to be
+ multiples of four or six respectively.
+
+
+ In keeping with this, the values of the above sizes are noticeably
+ distinct from the original type scale that it was derived from. This is
+ because our base space value is 8px and as such, all the text sizes have
+ been rounded off to a multiple of eight. This same principle is applied
+ to the accompanying line heights of these text sizes as well.
+
+
Layout Considerations
+
+ For any digital product or website being created, one important thing to
+ be considered is the responsive nature of design, which translates to
+ what the said design will look like across different screen sizes
+ (desktop, tablet, and mobile). To this end, it is also crucial that any
+ of the text styles selected account for these different layout sizes as
+ well. As stated earlier, text styles can be used for multiple needs
+ across a given design. The important thing is that there is proper
+ documentation to point this out, ensuring that hierarchy and prominence
+ are duly established.
+
+
+ Establishing Hierarchy
+
+
+ Since the selected text sizes cannot all be used for the same purpose,
+ it is necessary to differentiate them from each other in order to have a
+ working typography system that applies to different use cases and layout
+ sizes. This will require exploration and multiple tests of these text
+ styles in the screen sizes they are intended for and the possible use
+ cases that they will account for which may have already been identified
+ at those early stages before use.
+
+
+ With these seven different text sizes derived from the type scale, we
+ have come up with ten fonts that can be applied in multiple use cases
+ and across multiple devices. This variation ensures that fonts are not
+ created randomly and utilized based on individual discretion, eventually
+ leading to multiple redundant fonts present in our type system. These
+ fonts must be considered first for application in any use case. If the
+ need arises for a new font to be added to the type system, sufficient
+ use cases have to be established to do so.
+
+
+ NOTE:
+
+
+ A new font can be something as little as changing only the font weight
+ of an already existing font and having both variations function in
+ different capacities. Of course it can also include replacing an already
+ existing font or creating an entirely new one to add to the type system.
+
+
Heading
+
+ Headings are usually the first thing a user sees when reading a block of
+ text. The idea is for them to be concise and provide a hint of what
+ readers can expect from the accompanying body of text or an entire page.
+ It should also capture attention and encourage further exploration. They
+ can range from large hero section headings to much smaller subtitle and
+ label headings. Whatever the case, headings at different sizes can help
+ to accurately indicate hierarchy and provide guidance for any reader
+ going through a group of text.
+
+
+ Of Layer5’s ten fonts, seven of them can function as heading text and
+ ensure hierarchy for different context. For text that needs to be
+ prominent in a group of text (especially at the beginning), any one of
+ these fonts will suffice.
+
+
Paragraph
+
+ A bulk of text content is written in body or paragraph fonts. These are
+ less prominent fonts that provide more context to what brief ideas any
+ available headings may have outlined. It can also be used for short text
+ in components and when creating other interface elements due to its
+ higher legibility when compared to heading or subtitle texts. Three font
+ sizes have been earmarked to function in this capacity for the text
+ needs in Layer5 and across all of its products.
+
+
+ Font Specification
+
+
+ Each font should not be a product of random choices just to have a set
+ of text to work with. They should be informed decisions based on how
+ they can assist to reinforce a brand, what they can be used to achieve
+ in designs, and to what extent they should be applied.
+
+
+ With these seven different text sizes derived from the type scale, we
+ have come up with ten fonts that can be applied in multiple use cases
+ and across multiple devices. This variation ensures that fonts are not
+ created randomly and utilized based on individual discretion, eventually
+ leading to multiple redundant fonts present in our type system. These
+ fonts must be considered first for application in any use case. If the
+ need arises for a new font to be added to the type system, sufficient
+ use cases have to be established to do so.
+
+
Heading
+
+ Headings are usually the first thing a user sees when reading a block of
+ text. The idea is for them to be concise and provide a hint of what
+ readers can expect from the accompanying body of text or an entire page.
+ It should also capture attention and encourage further exploration. They
+ can range from large hero section headings to much smaller subtitle and
+ label headings. Whatever the case, headings at different sizes can help
+ to accurately indicate hierarchy and provide guidance for any reader
+ going through a group of text.
+
+
+ Of Layer5’s ten fonts, seven of them can function as heading text and
+ ensure hierarchy for different context. For text that needs to be
+ prominent in a group of text (especially at the beginning), any one of
+ these fonts will suffice.
+
+
Body
+
+ A bulk of text content is written in body or paragraph fonts. These are
+ less prominent (larger) fonts that provide more context to what brief
+ ideas any available headings may have outlined. It can also be used for
+ short text in components and when creating other interface elements due
+ to its higher legibility when compared to heading or subtitle texts.
+ Three font sizes have been earmarked to function in this capacity for
+ the text needs in Layer5 and across all of its products.
+
+
+ Below are a list of Layer5’s fonts along with hints on how they could be
+ applied to create usable and efficient text for our interfaces. For
+ reference purposes, more documentation can be done like how frequently
+ these fonts can appear on a page, what ui elements or text content they
+ can be used for, and how to adjust some font properties to suit multiple
+ scenarios. Responsive design documentation of the chosen fonts should be
+ documented as well to govern their usage and application.
+
+
+
+
+
+
+
+
+ There are a couple of things to consider when preparing to apply
+ typography to any interface.
+
+
+ The Basics
+
+
+
Typeface
+
+ A typeface is a set of letters, numbers, and accessories that have
+ common design features. These characters are usually grouped into
+ families and used in relation to each other to ensure uniform text
+ representation in designs and forms of text that are relative to each
+ other. Qanelas Soft, Times New Roman, Merriweather, and Roboto are all
+ examples of typefaces.
+
+
Font
+
+ Often wrongly used interchangeably with typeface, a font refers to
+ variations of a typeface. So this includes the weight, size, line
+ height, tracking (letter spacing), and any other features that are added
+ to a typeface for it to function in a certain capacity. A key
+ relationship between a typeface and a font is that characters in a
+ typeface can be modified to form different fonts.
+
+
Line Height
+
+ Line height is mostly used to refer to the distance between lines of
+ text. WCAG standards for line height recommend a line height that is at
+ least 1.5 times the chosen font size, especially for small text sizes.
+ For larger fonts, however, evidence has shown that anything between 1.2
+ and 1.5 times the font size might also be appropriate, especially
+ considering the fact that most large fonts used for headings and
+ subheadings tend not to exceed a single line of text.
+
+
+ Type Scale
+
+
+ Type scale with respect to typography points to the set of incremental
+ steps or rations that dictate how font sizes increase or decrease as you
+ move up or down a given hierarchy. This increase or decrease is usually
+ originated from a base size that serves as the defining font within the
+ scale. These steps create a systemic progression of font sizes that
+ maintain harmony and visual balance within a system because of the
+ relationship they share with the base font.
+
+
+ The base size used to generate a type scale is determined by the
+ principles governing size, typography, and other brand specific
+ contexts. As a design best practice, a text size of 16px is generally
+ accepted as very legible for responsive design. It is also a multiple of
+ eight which is our base space value and this is further elaborated on in
+
+ Spacing
+
+ . Reasons like these influence its use as a base size for our type
+ scale. A modular type scale can be generated using harmonious values
+ like the golden ratio, the major third, the perfect fifth, and so on.
+
+
+
+
+
+
+
+ Because of the progressive increase or decrease that governs the content
+ of a type scale, it makes it easier to obtain consistent, related, and
+ harmonious font sizes that can each be used for specific needs when
+ curating digital interfaces.
+
+
+ Font Pairing
+
+
+ Sometimes, it might be necessary to make use of more than one typeface.
+ In such a case, an applicable principle is that one of the typefaces is
+ used mostly for headings and subheadings, while the other is used for
+ most paragraphs and body text needs across the same design. Detailed
+ research on typefaces and their compatibility will help to make informed
+ decisions when it comes to choosing a typeface for font pairing.
+
+
+ Layer5 has successfully been able to implement a font pairing of Qanelas
+ Soft for all heading and subheading text and Open Sans for all body,
+ paragraph, and content text needs.
+
+
+
+
+
+
+