Skip to content
MENU

Soracom

Design System

Typography

The Soracom Design System uses Aeonik, Source Sans, Source Han Sans and Source Code fonts throughout.

Overview 

Source Pro Fonts 

The Source Pro fonts are an open-source font family from Adobe and are the primary font used throughout the Soracom Design System. It has been chosen for its variable font weight support, Japanese language support and matching mono-space versions. It is a modern and flexible typeface optimized for online and user interface applications.

For both English and Japanese languages SDS includes and uses a single custom subset version of Source Han Sans Variable font hosted on the SDS Assets content deliver network. This provides better character size consistency than using both Source Sans Pro and Source Han Sans (due to character size differences).

空色 Sky blue
空色 Sky blue

Aeonik 

Aeonik is our ESM primary brand font. It’s been chosen for its modern, simple and technical qualities. As Aeonik does not support Japanese characters, Aeonik is only used for larger headings in SDS and will automatically be replaced with Source Hans Sans JP for any Japanese characters.

空色 Sky blue
空色 Sky blue

Downloadable versions 

For use outside of SDS, the latest versions of the fonts can be downloaded directly from Adobe.

Online hosted versions 

The Source Pro fonts are available via Google fonts. The Google fonts version of Source Han Sans is re-branded as Noto Sans JP.

Font samples 

Source Han Sans JP

速い茶色のキツネ

スペインの雨は主に平原に降ります

IoTおよびM2M用に構築されたグローバルマルチキャリアセルラー接続。 IoTネットワークとデバイスの管理とセキュリティ保護に必要なコミットメントとすべてのツールを使用せずに、支払いを行います。

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z
西
1
2
3
4
5
6
7
8
9
0
?
!
(
%
)
[
#
]
{
@
}
/
&
\
<
-
+
÷
×
=
>
®
©
$
£
¥
¢
:
;
,
.
*
Source Code Pro

AaBbCcDdEe

1234567890

Global multicarrier cellular connectivity built for IoT & M2M. Pay as you go with no commitments and all the tools you need to manage and secure your IoT network and devices.

A
B
C
Č
Ć
D
Đ
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
Š
T
U
V
W
X
Y
Z
Ž
a
b
c
č
ć
d
đ
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
š
t
u
v
w
x
y
z
ž
А
Б
В
Г
Ґ
Д
Ђ
Е
Ё
Є
Ж
З
Ѕ
И
І
Ї
Й
Ј
К
Л
Љ
М
Н
Њ
О
П
Р
С
Т
Ћ
У
Ў
Ф
Х
Ц
Ч
Џ
Ш
Щ
Ъ
Ы
Ь
Э
Ю
Я
а
б
в
г
ґ
д
ђ
е
ё
є
ж
з
ѕ
и
і
ї
й
ј
к
л
љ
м
н
њ
о
п
р
с
т
ћ
у
ў
ф
х
ц
ч
џ
ш
щ
ъ
ы
ь
э
ю
я
Α
Β
Γ
Δ
Ε
Ζ
Η
Θ
Ι
Κ
Λ
Μ
Ν
Ξ
Ο
Π
Ρ
Σ
Τ
Υ
Φ
Χ
Ψ
Ω
α
β
γ
δ
ε
ζ
η
θ
ι
κ
λ
μ
ν
ξ
ο
π
ρ
σ
τ
υ
φ
χ
ψ
ω
ά
Ά
έ
Έ
έ
Ή
ί
ϊ
ΐ
Ί
ό
Ό
ύ
ΰ
ϋ
Ύ
Ϋ
ά
έ
ή
ί
ό
ύ
ώ
Ώ
Ă
Â
Ê
Ô
Ơ
Ư
ă
â
ê
ô
ơ
ư
1
2
3
4
5
6
7
8
9
0
?
!
(
%
)
[
#
]
{
@
}
/
&
\
<
-
+
÷
×
=
>
®
©
$
£
¥
¢
:
;
,
.
*
Aeonik

AaBbCcDdEe

1234567890

A
B
C
Č
Ć
D
Đ
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
Š
T
U
V
W
X
Y
Z
Ž
a
b
c
č
ć
d
đ
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
š
t
u
v
w
x
y
z
ž
А
Б
В
Г
Ґ
Д
Ђ
Е
Ё
Є
Ж
З
Ѕ
И
І
Ї
Й
Ј
К
Л
Љ
М
Н
Њ
О
П
Р
С
Т
Ћ
У
Ў
Ф
Х
Ц
Ч
Џ
Ш
Щ
Ъ
Ы
Ь
Э
Ю
Я
а
б
в
г
ґ
д
ђ
е
ё
є
ж
з
ѕ
и
і
ї
й
ј
к
л
љ
м
н
њ
о
п
р
с
т
ћ
у
ў
ф
х
ц
ч
џ
ш
щ
ъ
ы
ь
э
ю
я
Α
Β
Γ
Δ
Ε
Ζ
Η
Θ
Ι
Κ
Λ
Μ
Ν
Ξ
Ο
Π
Ρ
Σ
Τ
Υ
Φ
Χ
Ψ
Ω
α
β
γ
δ
ε
ζ
η
θ
ι
κ
λ
μ
ν
ξ
ο
π
ρ
σ
τ
υ
φ
χ
ψ
ω
ά
Ά
έ
Έ
έ
Ή
ί
ϊ
ΐ
Ί
ό
Ό
ύ
ΰ
ϋ
Ύ
Ϋ
ά
έ
ή
ί
ό
ύ
ώ
Ώ
Ă
Â
Ê
Ô
Ơ
Ư
ă
â
ê
ô
ơ
ư
1
2
3
4
5
6
7
8
9
0
?
!
(
%
)
[
#
]
{
@
}
/
&
\
<
-
+
÷
×
=
>
®
©
$
£
¥
¢
:
;
,
.
*

Usage 

A complete set of typographic css classes are available for all heading and text sizes.

HTML defaults 

SDS sets the standard html text elements (h1-h6 & P) to a default set of styles.

Element Sample Typeface
H1

AaBbCcDdEe1234567890
IoT および M2M 用に構築された SORACOM グループを編集

Aeonik
H2

AaBbCcDdEe1234567890
IoT および M2M 用に構築された SORACOM グループを編集

Aeonik
H3

AaBbCcDdEe1234567890
IoT および M2M 用に構築された SORACOM グループを編集

Aeonik
H4

AaBbCcDdEe1234567890
IoT および M2M 用に構築された SORACOM グループを編集

Source
H5
AaBbCcDdEe1234567890
IoT および M2M 用に構築された SORACOM グループを編集
Source
H6
AaBbCcDdEe1234567890
IoT および M2M 用に構築された SORACOM グループを編集
Source
P

AaBbCcDdEe1234567890
IoT および M2M 用に構築された SORACOM グループを編集

Source

CSS class usage 

Available classes are listed below.

<div class="ds-heading--xlarge-bold">Content</div>
<div class="ds-heading--medium">Content</div>

Examples 

Headings 

Class: .ds-heading--xlarge-bold
AaBbCcDdEe1234567890
IoT および M2M 用に構築された SORACOM グループを編集
Class: .ds-heading--xlarge
AaBbCcDdEe1234567890
IoT および M2M 用に構築された SORACOM グループを編集
Class: .ds-heading--large-Bold
AaBbCcDdEe1234567890
IoT および M2M 用に構築された SORACOM グループを編集
Class: .ds-heading--large
AaBbCcDdEe1234567890
IoT および M2M 用に構築された SORACOM グループを編集
Class: .ds-heading--medium-bold
AaBbCcDdEe1234567890
IoT および M2M 用に構築された SORACOM グループを編集
Class: .ds-heading--medium
AaBbCcDdEe1234567890
IoT および M2M 用に構築された SORACOM グループを編集
Class: .ds-heading--regular-bold
AaBbCcDdEe1234567890
IoT および M2M 用に構築された SORACOM グループを編集
Class: .ds-heading--regular
AaBbCcDdEe1234567890
IoT および M2M 用に構築された SORACOM グループを編集
Class: .ds-heading--small-bold
AaBbCcDdEe1234567890
IoT および M2M 用に構築された SORACOM グループを編集
Class: .ds-heading--small
AaBbCcDdEe1234567890
IoT および M2M 用に構築された SORACOM グループを編集
Class: .ds-heading--xsmall-bold
AaBbCcDdEe1234567890
IoT および M2M 用に構築された SORACOM グループを編集
Class: .ds-heading--xsmall
AaBbCcDdEe1234567890
IoT および M2M 用に構築された SORACOM グループを編集

Text 

Class: .ds-text--large
AaBbCcDdEe1234567890
IoT および M2M 用に構築された SORACOM グループを編集
Class: .ds-text
AaBbCcDdEe1234567890
IoT および M2M 用に構築された SORACOM グループを編集
Class: .ds-text--small
AaBbCcDdEe1234567890
IoT および M2M 用に構築された SORACOM グループを編集
Class: .ds-text--xsmall
AaBbCcDdEe1234567890
IoT および M2M 用に構築された SORACOM グループを編集