Regsoft design system

Typography

Typography is a fundamental aspect of design that significantly impacts readability, user experience, and the overall aesthetic of an application. This page documents the typographic standards and conventions used throughout the Regsoft design system.

Our typography system is built on a foundation of CSS normalization techniques combined with carefully selected font families and sizing standards. These styles ensure consistency across all Regsoft applications while maintaining optimal readability and accessibility.

Font

Regsoft's corporate font family is 'Lato', a humanist sans-serif typeface that provides excellent readability at all sizes. Lato is available through Google Fonts and is used consistently across all Regsoft applications to maintain brand identity and visual coherence.

Paragraphs

We use a formula to vary our line height based upon the font size. That formula is:

line-height: calc(2px + 2ex + 2px);

For more information, see: this article

Headings

Headings add a hierarchical structure to your text. Here are the various heading styles:

H1 heading

H2 heading

H3 heading

H4 heading

H5 heading
H6 heading

Text formatting

Various text formatting options are available to emphasize different types of content:

  • Bold text - Use <strong> or <b> for important text
  • Italic text - Use <em> or <i> for emphasis
  • Inline code - Use <code> for code snippets
  • Small text - Use <small> for fine print
  • Highlighted text - Use <mark> to highlight
  • Deleted text - Use <del> for removed content
  • Inserted text - Use <ins> for added content
  • HTML - Use <abbr> for abbreviations

Links

Links are styled in blue (#003399) by default. Here's an example: This is a standard link. Links maintain their color even when visited, hovered, or active.

Blockquotes

Blockquotes are used for quoting text from another source:

The best way to predict the future is to invent it.

Alan Kay

Code blocks

For multi-line code, use <pre> tags: 

defmodule Example do
  def hello(name) do
    IO.puts("Hello, #{name}")
  end
end

Lists

Lists create concise bullet-points of information. Here are the variations available:

Unordered lists

Most lists are a collection of ideas where the position in the list does not convey additional information. Here's an example:

  • A list item
  • This is another point
  • This point could have been first in the list

Ordered lists

Sometimes the order matters.

  1. Initialize the project repository
  2. Configure the development environment
  3. Install required dependencies
  4. Set up the application structure
    1. Create the database schema
    2. Configure routing and controllers
  6. Implement core features
  7. Write tests and documentation

Description lists

Description lists are useful for defining terms or displaying key-value pairs:

Phoenix Framework
A productive web framework that does not compromise speed or maintainability.
Elixir
A dynamic, functional language for building scalable and maintainable applications.
LiveView
Rich, real-time user experiences with server-rendered HTML.

Horizontal rules

Use <hr> to create a thematic break between sections:

The line above is a horizontal rule.

Tables

Tables are used to present tabular data. Please don't use them for layout.

An example of how tables are formatted
Column one Column two
Value for the first column Value for the second column