Skip to content
MENU

Soracom

Design System

Typography

The Soracom Design System uses Adobe Source Sans, Source Code and Source Han Sans (Noto Sans CJK) fonts throughout.

The Source Pro fonts are an open-source font family from Adobe, distributed under the SIL Open Font License and available through Google Fonts, or the Adobe Fonts github. Source Han Sans version 2.0 is a major update of the Source Han Sans family which was first released in 2014 in collaboration with Google (which rebrands it as Noto Sans CJK).

Font samples 

Source Sans 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
?
!
(
%
)
[
#
]
{
@
}
/
&
\
<
-
+
÷
×
=
>
®
©
$
£
¥
¢
:
;
,
.
*
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
?
!
(
%
)
[
#
]
{
@
}
/
&
\
<
-
+
÷
×
=
>
®
©
$
£
¥
¢
:
;
,
.
*
Source Han Sans Pro (Noto Sans CJK)

速い茶色のキツネ

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

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
?
!
(
%
)
[
#
]
{
@
}
/
&
\
<
-
+
÷
×
=
>
®
©
$
£
¥
¢
:
;
,
.
*

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
H1

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

H2

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

H3

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

H4

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

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

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

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 グループを編集