Standardized Design of Electronic Procedures
Home
First steps
First steps
What is DINTEL?
Designers
Developers
Resources
Frequently Asked Questions
Foundations
Foundations
Color
Typography
Box shadow
Spacing
Grid
Border
Border radius
Iconography
Illustrations
Animations
Accessibility
Design tokens
Writing guidelines
Data visualization
Interface elements
Interface elements
Modules
Templates
Components
Updates
Contact
Foundations
Typography
Font families
Fonts, styles, and text sizes help create a visual hierarchy that shows the reader what information to focus on and what’s most important.
Nunito Sans
Nunito is a well-balanced sans serif typeface family. The project began with Nunito , created by Vernon Adams as a rounded terminal sans serif for display typography .Jacques Le Bailly extended it to a full set of weights, and an attached regular unrounded terminal version called Nunito Sans.
Merriweather
Merriweather was designed to be a pleasant-to-read text face on screens. It features a very large x-height, slightly condensed letterforms, a slight diagonal accent, solid serifs and open shapes. There is also Merriweather Sans , a sans-serif version that harmonizes closely with the weights and styles of this serif family.
Gill Sans
Gill Sans is a sans serif typeface widely used today; it was created by typographer Eric Gill and published by the foundry Monotype between 1928 and 1930. Its forms are based on the underground Johnston created by Edward Johnston for the London Underground; Gill Sans is widely appreciated for its subtle and graceful shapes as well as its versatility.
Since 1999, the Government of Spain and the General State Administration have incorporated the Gill Sans typography into their institutional image programme. The logo of institutions and agencies under the General State Administration (Ministries, Secretaries of State, Security Forces, National Museums, etc.) include, together with the coat of arms of Spain, the name in typography Gill Sans.
Typographic hierarchy
desktop-300
Font family - Merriweather, Font size - 40px, Font Line Height - 52px, Font weight - Bold, Font Letter Spacing - 0px
Number card
desktop-200
Font family - Merriweather, Font size - 32px, Font Line Height - 44px, Font weight - Bold, Font Letter Spacing - 0px
Title FAQ, Title Hero, Section
desktop-100
Font family - Merriweather, Font size - 24px, Font Line Height - 36px, Font weight - Bold, Font Letter Spacing - 0px
Title Feedback
mobile-300
Font family - Merriweather, Font size - 28px, Font Line Height - 44px, Font weight - Bold, Font Letter Spacing - 0px
Number card
mobile-200
Font family - Merriweather, Font size - 26px, Font Line Height - 40px, Font weight - Bold, Font Letter Spacing - 0px
Title FAQ, Title Hero, Section
mobile-100
Font family - Merriweather, Font size - 12px, Font Line Height - 20px, Font weight - Bold, Font Letter Spacing - 0px
Title Feedback
300
Font Family - Nunito Sans, Font Size - 22px, Font Line Height - 32px, Font Weight - Bold, Font Letter Spacing - 0px
Subtitle L
200
Font Family - Nunito Sans, Font Size - 20px, Font Line Height - 28px, Font Weight - Bold, Font Letter Spacing - 0px
Title card
100
Font Family - Nunito Sans, Font Size - 18px, Font Line Height - 24px, Font Weight - Bold, Font Letter Spacing - 0px
Title accordion, Title alert, Title modal, Table mobile label, Title toast, Title cookie banner
400
Font Family - Nunito Sans, Font Size - 18px, Font Line Height - 24px, Font Weight - Regular, Font Letter Spacing - 0px
Body XL, Button L, Body Hero, Body Section
350
Font Family - Nunito Sans, Font Size - 16px, Font Line Height - 24px, Font Weight - Bold, Font Letter Spacing - 0px
Body L, Spinner title, Stepper current, Table header
300
Font Family - Nunito Sans, Font Size - 16px, Font Line Height - 24px, Font Weight - Regular, Font Letter Spacing - 0px
Body M (Default), Input value, Alert, Accordeon, Tab, Breadcrumb, Card, Button M, Collapse, Checbox, Radio, List, Dropdown, Search, Dropdown menu, Horizontal menu, Megamenu, Stepper, Pagination, Title Search results, Table body, Table mobile value, Toast, Vertical menu, Cookie banner description
200
Font Family - Nunito Sans, Font Size - 14px, Font Line Height - 20px, Font Weight - Regular, Font Letter Spacing - 0px
Body S, Button S, Input Text, Label, Date picker popover, Modal, Progress bar, Tags, Tootlitps
100
Font Family - Nunito Sans, Font Size - 12px, Font Line Height - 20px, Font Weight - Regular, Font Letter Spacing - 0px
Body XS (Detail), Error, Warning, Info, Spinner description
Quote
Font Family - Nunito Sans, Font Size - 16px, Font Line Height - 24px, Font Weight - Regular, Font Letter Spacing - 0px, Font Style - Italic
Quote
Logo
Font Family - Gill Sans, Font Size - 12px, Font Line Height - 16px, Font Weight - Regular, Font Letter Spacing - 0px, Font Style - Regular, Text Transform - Uppercase
Header logo
450
Font Family - Nunito Sans, Font Size - 18px, Font Line Height - 24px, Font Weight - Bold, Font Letter Spacing - 0px
Title card, paragrahp Link
400
Font Family - Nunito Sans, Font Size - 18px, Font Line Height - 24px, Font Weight - Regular, Font Letter Spacing - 0px
Link L, Back Link L, Section Links
350
Font Family - Nunito Sans, Font Size - 16px, Font Line Height - 24px, Font Weight - Bold, Font Letter Spacing - 0px
Breadcrumb, Link highlighted in paragraph
300
Font Family - Nunito Sans, Font Size - 16px, Font Line Height - 24px, Font Weight - Regular, Font Letter Spacing - 0px
Link M Back Link M, Link card, Date picker popover link, Search results, Link toast
250
Font Family - Nunito Sans, Font Size - 14px, Font Line Height - 20px, Font Weight - Bold, Font Letter Spacing - 0px
highlighted Link in paragraph
200
Font Family - Nunito Sans, Font Size - 14px, Font Line Height - 20px, Font Weight - Regular, Font Letter Spacing - 0px
Link S
This website uses own and third party cookies to provide a better service. If you continue browsing we consider that you accept its use.
