Maîtriser la typographie dans React Native : poids des polices et polices personnalisées

La maîtrise de la typographie est essentielle pour créer des applications React Native visuellement attrayantes et conviviales. Ce guide explore comment gérer efficacement les poids de police et intégrer des polices personnalisées dans vos projets.

Table des matières

• Style du poids de la police
• Intégration de polices personnalisées

Style du poids de la police

React Native offre un contrôle simple sur le poids de la police à l’aide de la propriété de style fontWeight dans le composant Text. Cette propriété accepte des valeurs numériques (100-900) et des mots clés prédéfinis :

• 'normal' : Équivalent à 400.
• 'bold' : Équivalent à 700.
• '100', '200', '300', '400', '500', '600', '700', '800', '900' : Valeurs de poids spécifiques.

Voici un exemple illustrant différents poids de police :

import React from 'react';
import { Text, StyleSheet } from 'react-native';

const MyComponent = () => {
  return (
    <Text style={styles.text}>
      Ceci est un poids normal (400). <Text style={styles.boldText}>Ceci est en gras (700). <Text style={styles.lightText}>Ceci est léger (300).
    </Text>
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 16,
  },
  boldText: {
    fontWeight: 'bold',
  },
  lightText: {
    fontWeight: '300',
  },
});

export default MyComponent;

N’oubliez pas que le rendu du poids de la police dépend de la famille de polices choisie. Toutes les polices ne prennent pas en charge la gamme complète de poids. React Native utilisera le poids disponible le plus proche si un poids spécifique n’est pas pris en charge.

Intégration de polices personnalisées

Étendre les possibilités de conception au-delà des polices système par défaut implique l’ajout et l’utilisation de polices personnalisées. Cela améliore l’attrait visuel et l’image de marque de votre application.

1. Ajouter des fichiers de polices : Placez vos fichiers de polices (par exemple, .ttf, .otf) dans un dossier dédié dans les ressources de votre projet (par exemple, src/assets/fonts).
2. Enregister les polices (Expo) : Si vous utilisez Expo, utilisez expo-font :

import { useFonts } from 'expo-font';
import MyCustomFont from './assets/fonts/MyCustomFont.ttf';

export default function App() {
  const [loaded] = useFonts({
    'MyCustomFont': require('./assets/fonts/MyCustomFont.ttf'),
  });

  if (!loaded) return null;

  return (
    <Text style={{ fontFamily: 'MyCustomFont', fontWeight: 'bold' }}>Texte avec police personnalisée</Text>
  );
}

3. Enregister les polices (hors Expo) : Pour les projets non Expo, vous aurez peut-être besoin d’une approche plus manuelle (Cet exemple utilise un espace réservé pour la gestion spécifique à la plateforme. Ajustez en fonction de vos besoins 🙂

import React from 'react';
import { Text, StyleSheet, Platform } from 'react-native';
import MyCustomFont from './assets/fonts/MyCustomFont.ttf'; // Ajuster le chemin si nécessaire

const App = () => {
  return (
    <Text style={styles.text}>Ceci utilise une police personnalisée.</Text>
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 18,
    fontFamily: Platform.OS === 'ios' ? 'MyCustomFont' : 'MyCustomFont', // Gérer les différents OS ici.
  },
});

export default App;

4. Utiliser les polices enregistrées : Une fois enregistrées, utilisez le nom de la famille de polices dans la propriété de style fontFamily de vos composants Text. Assurez-vous que le nom correspond au nom du fichier de police utilisé lors de l’enregistrement.

En combinant les techniques de poids de police et de police personnalisée, vous obtenez un contrôle typographique précis dans vos applications React Native, ce qui améliore la cohérence visuelle et l’expérience utilisateur. N’oubliez pas de réaliser des tests complets sur différents appareils pour garantir un rendu cohérent.